/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity var(--duration-slow) var(--ease-cinematic),
              transform var(--duration-slow) var(--ease-cinematic);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.stagger > .reveal:nth-child(1) { transition-delay: 0ms; }
.stagger > .reveal:nth-child(2) { transition-delay: 100ms; }
.stagger > .reveal:nth-child(3) { transition-delay: 200ms; }
.stagger > .reveal:nth-child(4) { transition-delay: 300ms; }
.stagger > .reveal:nth-child(5) { transition-delay: 400ms; }
.stagger > .reveal:nth-child(6) { transition-delay: 500ms; }
.stagger > .reveal:nth-child(7) { transition-delay: 600ms; }
.stagger > .reveal:nth-child(8) { transition-delay: 700ms; }

/* Hero entrance */
.hero-reveal {
  opacity: 0;
  transform: translateY(28px);
  animation: heroFadeIn 0.8s var(--ease-cinematic) forwards;
}

.hero-reveal--delay-1 { animation-delay: 0ms; }
.hero-reveal--delay-2 { animation-delay: 150ms; }
.hero-reveal--delay-3 { animation-delay: 300ms; }
.hero-reveal--delay-4 { animation-delay: 450ms; }
.hero-reveal--delay-5 { animation-delay: 650ms; }
.hero-reveal--delay-6 { animation-delay: 850ms; }
.hero-reveal--delay-7 { animation-delay: 1100ms; }

@keyframes heroFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Ambient pulse — more dramatic */
.ambient-pulse {
  animation: ambientPulse 8s ease-in-out infinite;
}

@keyframes ambientPulse {
  0%, 100% { opacity: 0.5; transform: translateY(-50%) scale(1); }
  50% { opacity: 0.8; transform: translateY(-50%) scale(1.15); }
}

/* Secondary ambient has offset timing */
.hero__ambient--secondary {
  animation: ambientPulseAlt 10s ease-in-out infinite;
}

@keyframes ambientPulseAlt {
  0%, 100% { opacity: 0.3; transform: translateY(-40%) scale(1.05); }
  50% { opacity: 0.6; transform: translateY(-60%) scale(1.2); }
}

/* Connector draw */
.connector-draw {
  width: 0;
  transition: width var(--duration-slow) var(--ease-cinematic);
}

.connector-draw.is-visible { width: 100%; }

/* Step pulse */
.step-pulse {
  animation: stepPulse 3s ease-in-out infinite;
}

@keyframes stepPulse {
  0%, 100% { box-shadow: 0 0 0 rgba(133, 22, 255, 0); }
  50% { box-shadow: 0 0 20px rgba(133, 22, 255, 0.15); }
}

/* Featured tier glow — more dramatic */
.tier-glow {
  animation: tierGlow 4s ease-in-out infinite;
}

@keyframes tierGlow {
  0%, 100% {
    box-shadow: 0 0 0 rgba(133, 22, 255, 0),
                inset 0 0 0 rgba(133, 22, 255, 0);
  }
  50% {
    box-shadow: 0 0 60px rgba(133, 22, 255, 0.2),
                0 0 120px rgba(133, 22, 255, 0.06),
                inset 0 0 30px rgba(133, 22, 255, 0.03);
  }
}

/* Card hover glows — more visible */
.card--purple:hover { box-shadow: 0 8px 40px rgba(133, 22, 255, 0.12), 0 0 80px rgba(133, 22, 255, 0.06); }
.card--cyan:hover { box-shadow: 0 8px 40px rgba(123, 228, 255, 0.12), 0 0 80px rgba(123, 228, 255, 0.06); }
.card--neutral:hover { box-shadow: 0 8px 40px rgba(226, 226, 226, 0.06), 0 0 60px rgba(226, 226, 226, 0.03); }
.card--gradient:hover { box-shadow: 0 8px 40px rgba(133, 22, 255, 0.08), 0 0 60px rgba(123, 228, 255, 0.08); }
.card--orange:hover { box-shadow: 0 8px 40px rgba(232, 114, 58, 0.12), 0 0 80px rgba(232, 114, 58, 0.06); }

.count-up { font-variant-numeric: tabular-nums; }

/* Gradient line decoration */
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Badge glow */
@keyframes badgeGlow {
  0%, 100% { box-shadow: 0 4px 16px rgba(133, 22, 255, 0.3); }
  50% { box-shadow: 0 4px 32px rgba(133, 22, 255, 0.5), 0 0 48px rgba(133, 22, 255, 0.2); }
}