/* CoLab Haus — Animations (Dark Prismatic Theme) */

/* ========== PRISM KEYFRAMES ========== */

/* Prism Shift — background position animation for gradients */
@keyframes prismShift {
  0%, 100% { background-position: 0% 50%; }
  33% { background-position: 100% 0%; }
  66% { background-position: 50% 100%; }
}

/* Prism Orbs — subtle scale/opacity pulse for orb overlays */
@keyframes prismOrbs {
  0% { opacity: 0.5; transform: scale(1) rotate(0deg); }
  50% { opacity: 0.85; transform: scale(1.08) rotate(2deg); }
  100% { opacity: 0.5; transform: scale(1) rotate(0deg); }
}

/* Prism Flow — horizontal scroll for vivid gradient animations */
@keyframes prismFlow {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* ========== PRISM SURFACE UTILITY ========== */
/* Apply to dark sections for subtle orb overlays */
.prism-surface {
  position: relative;
  overflow: hidden;
}

.prism-surface::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 40%, rgba(200, 170, 240, 0.1) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 30%, rgba(170, 220, 245, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 80%, rgba(240, 180, 200, 0.07) 0%, transparent 50%);
  animation: prismOrbs 10s ease-in-out infinite alternate;
  pointer-events: none;
}

/* ========== SCROLL ANIMATIONS ========== */

/* Fade in from below */
[data-animate] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s var(--ch-ease), transform 0.6s var(--ch-ease);
}

[data-animate].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Override: Hero content must always be visible (above the fold) */
.page-hero [data-animate],
.page-hero__content,
.hero [data-animate],
.hero__content {
  opacity: 1 !important;
  transform: none !important;
}

/* Stagger children */
[data-animate-stagger] > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s var(--ch-ease), transform 0.5s var(--ch-ease);
}

[data-animate-stagger].is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

[data-animate-stagger].is-visible > *:nth-child(1) { transition-delay: 0ms; }
[data-animate-stagger].is-visible > *:nth-child(2) { transition-delay: 100ms; }
[data-animate-stagger].is-visible > *:nth-child(3) { transition-delay: 200ms; }
[data-animate-stagger].is-visible > *:nth-child(4) { transition-delay: 300ms; }
[data-animate-stagger].is-visible > *:nth-child(5) { transition-delay: 400ms; }
[data-animate-stagger].is-visible > *:nth-child(6) { transition-delay: 500ms; }

/* Counter animation */
.counter[data-target] {
  font-variant-numeric: tabular-nums;
}

/* ========== DECORATIVE ========== */

/* Floating particles — prism colors */
@keyframes particle-float {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.3;
  }
  33% {
    transform: translate(20px, -30px) scale(1.1);
    opacity: 0.6;
  }
  66% {
    transform: translate(-10px, -60px) scale(0.9);
    opacity: 0.2;
  }
}

.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--ch-prism-vivid-violet);
  border-radius: 50%;
  animation: particle-float 6s ease-in-out infinite;
}

.particle:nth-child(2) { animation-delay: -2s; animation-duration: 8s; background: var(--ch-prism-vivid-mint); }
.particle:nth-child(3) { animation-delay: -4s; animation-duration: 7s; background: var(--ch-prism-vivid-blue); }
.particle:nth-child(4) { animation-delay: -1s; animation-duration: 9s; background: var(--ch-prism-vivid-rose); }
.particle:nth-child(5) { animation-delay: -3s; animation-duration: 6.5s; background: var(--ch-prism-vivid-peach); }

/* Pulse animation */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* Float animation */
@keyframes float {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-8px); }
}

/* DNA Helix decoration */
.dna-decoration {
  position: absolute;
  right: -120px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.06;
  pointer-events: none;
}
