/* ============================================
   Dandali — GSAP & ScrollTrigger Animations
   ============================================ */

/* -------------------------------------------
   Keyframes
   ------------------------------------------- */

/* Pulse dot */
@keyframes pulse-dot {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.6);
    opacity: 0.5;
  }
}

/* Gold shimmer (background-position sweep) */
@keyframes gold-shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Scroll indicator dot drift */
@keyframes scroll-dot-drift {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  50% {
    transform: translateY(36px);
    opacity: 0.2;
  }
  50.01% {
    transform: translateY(-4px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* -------------------------------------------
   Staggered Hero Entrance — 3-Beat
   ------------------------------------------- */

.hero-eyebrow,
.hero-headline,
.hero-sub,
.hero-ctas,
.hero-proof,
.scroll-indicator {
  opacity: 0;
}

.hero-eyebrow    { animation: hero-beat-in 0.45s var(--ease-out-expo) 0.15s forwards; }
.hero-headline   { animation: hero-beat-in 0.50s var(--ease-out-expo) 0.40s forwards; }
.hero-sub        { animation: hero-beat-in 0.45s var(--ease-out-expo) 0.60s forwards; }
.hero-ctas       { animation: hero-beat-in 0.40s var(--ease-out-expo) 0.75s forwards; }
.hero-proof      { animation: hero-beat-in 0.35s var(--ease-out-expo) 0.85s forwards; }
.scroll-indicator { animation: hero-beat-in 0.40s var(--ease-out-expo) 1.00s forwards; }

@keyframes hero-beat-in {
  0% {
    opacity: 0;
    transform: translateY(32px) scale(0.95);
  }
  60% {
    opacity: 0.85;
    transform: translateY(-3px) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* -------------------------------------------
   Why-Card Gentle Float — matches deck-float rhythm
   Staggered via animation-delay per card index
   ------------------------------------------- */

@keyframes why-card-float {
  0%, 100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -5px, 0);
  }
}

.why-card {
  animation: why-card-float 4.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.why-card:nth-child(1) {
  animation-delay: 0s;
}

.why-card:nth-child(2) {
  animation-delay: -1.5s;
}

.why-card:nth-child(3) {
  animation-delay: -3s;
}

@media (prefers-reduced-motion: reduce) {
  .why-card {
    animation: none;
  }
}