/* ─── PULSE — live status dot ─────────────────────────────── */

@keyframes pulse {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(255, 107, 53, 0.5);
  }
  50% {
    opacity: 0.6;
    box-shadow: 0 0 0 8px rgba(255, 107, 53, 0);
  }
}

.live-dot {
  animation: pulse 2s infinite;
}


/* ─── SLIDE-UP — hero entrance ────────────────────────────── */

@keyframes slide-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-left .eyebrow,
.hero-left h1,
.hero-sub,
.signup-card,
.countdown-card {
  animation: slide-up 0.8s var(--ease-out-quart) backwards;
}

.hero-left .eyebrow  { animation-delay: 0.1s; }
.hero-left h1        { animation-delay: 0.2s; }
.hero-sub            { animation-delay: 0.35s; }
.countdown-card      { animation-delay: 0.4s; }
.signup-card         { animation-delay: 0.5s; }


/* ─── MARQUEE SCROLL ──────────────────────────────────────── */

@keyframes scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.marquee-track {
  animation: scroll 40s linear infinite;
}

.marquee:hover .marquee-track {
  /* Slow to 25% speed on hover instead of pausing — feels like slo-mo replay */
  animation-duration: 160s;
}


/* ─── SCROLL CUE — animated descender below hero ─────────── */

@keyframes descend {
  0%   { transform: translateY(-30px); opacity: 0; }
  40%  { opacity: 1; }
  100% { transform: translateY(30px);  opacity: 0; }
}

.scroll-cue-line {
  animation: descend 2.4s ease-in-out infinite;
}


/* ─── FEATURE CARDS — scroll-triggered stagger reveal ────── */

.feature-grid.animate-ready .feature {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity    600ms var(--ease-out-quart),
    transform  600ms var(--ease-out-quart),
    box-shadow 600ms var(--ease-out-quart),
    background var(--duration-medium) ease;
}

.feature-grid.in-view .feature {
  opacity: 1;
  transform: translateY(0);
}

.feature-grid.in-view .feature:nth-child(1) { transition-delay: 0ms; }
.feature-grid.in-view .feature:nth-child(2) { transition-delay: 150ms; }
.feature-grid.in-view .feature:nth-child(3) { transition-delay: 300ms; }

.feature-grid.in-view .feature:hover {
  box-shadow: 0 24px 60px -20px rgba(61, 90, 254, 0.25);
}


/* ─── LANE DIVIDER — self-drawing SVG ────────────────────── */

.lane-divider line {
  stroke-dasharray: 1440;
  stroke-dashoffset: 1440;
  transition: stroke-dashoffset 900ms var(--ease-out-quart);
}

.lane-divider.draw-in line {
  stroke-dashoffset: 0;
}

.lane-divider circle {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
  transition: transform 250ms var(--ease-out-quart);
}

.lane-divider.draw-in circle { transform: scale(1); }

/* Stagger circles in after the line finishes (~900ms) */
.lane-divider.draw-in circle:nth-child(2)  { transition-delay: 900ms; }
.lane-divider.draw-in circle:nth-child(3)  { transition-delay: 940ms; }
.lane-divider.draw-in circle:nth-child(4)  { transition-delay: 980ms; }
.lane-divider.draw-in circle:nth-child(5)  { transition-delay: 1020ms; }
.lane-divider.draw-in circle:nth-child(6)  { transition-delay: 1060ms; }
.lane-divider.draw-in circle:nth-child(7)  { transition-delay: 1100ms; }
.lane-divider.draw-in circle:nth-child(8)  { transition-delay: 1140ms; }
.lane-divider.draw-in circle:nth-child(9)  { transition-delay: 1180ms; }
.lane-divider.draw-in circle:nth-child(10) { transition-delay: 1220ms; }
.lane-divider.draw-in circle:nth-child(11) { transition-delay: 1260ms; }
.lane-divider.draw-in circle:nth-child(12) { transition-delay: 1300ms; }
.lane-divider.draw-in circle:nth-child(13) { transition-delay: 1340ms; }
.lane-divider.draw-in circle:nth-child(14) { transition-delay: 1380ms; }
.lane-divider.draw-in circle:nth-child(15) { transition-delay: 1420ms; }
.lane-divider.draw-in circle:nth-child(16) { transition-delay: 1460ms; }
.lane-divider.draw-in circle:nth-child(17) { transition-delay: 1500ms; }
.lane-divider.draw-in circle:nth-child(18) { transition-delay: 1540ms; }


/* ─── SUCCESS PING — form submit celebration ─────────────── */

@keyframes success-ping {
  0%   { box-shadow: 0 0 0 0   rgba(61, 90, 254, 0.55); }
  100% { box-shadow: 0 0 0 20px rgba(61, 90, 254, 0); }
}

.signup-card.success {
  animation: success-ping 700ms ease-out forwards;
}