/* AudioDex — animations.css  "The Frequency"
   All motion lives here. prefers-reduced-motion kills everything below. */

/* ─── Wave draw-in (clip-path reveal left→right) ────────────────────────── */
@keyframes wave-reveal {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0%   0 0); }
}

.freq-hero-bg.drawing {
  animation: wave-reveal 0.85s cubic-bezier(0.32, 0, 0.67, 0) forwards;
}

/* ─── Hero text arrivals ─────────────────────────────────────────────────── */
@keyframes hero-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

@keyframes letter-in {
  from { opacity: 0; transform: translateY(18px) skewX(-1.5deg); }
  to   { opacity: 1; transform: none; }
}

/* ─── Tagline cursor ─────────────────────────────────────────────────────── */
.tl-cursor {
  animation: cursor-blink 0.65s ease-in-out infinite;
}

.tl-cursor.done {
  animation: cursor-fade 0.45s 0.5s ease-out forwards;
}

@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

@keyframes cursor-fade {
  to { opacity: 0; width: 0; margin: 0; }
}

/* ─── Phone float ────────────────────────────────────────────────────────── */
@keyframes phone-float {
  0%   { transform: translateY(0px)    rotate(0.3deg); }
  50%  { transform: translateY(-10px)  rotate(-0.3deg); }
  100% { transform: translateY(0px)    rotate(0.3deg); }
}

/* ─── Scroll cue ─────────────────────────────────────────────────────────── */
@keyframes cue-drift {
  0%, 100% { opacity: 0.25; transform: translateX(-50%) translateY(0);  }
  50%       { opacity: 0.10; transform: translateX(-50%) translateY(8px); }
}

/* ─── CTA pulse (once on arrival) ───────────────────────────────────────── */
@keyframes cta-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(91, 79, 232, 0); }
  40%  { box-shadow: 0 0 0 12px rgba(91, 79, 232, 0.28); }
  100% { box-shadow: 0 0 0 20px rgba(91, 79, 232, 0); }
}

/* ─── Click ripple on click ──────────────────────────────────────────────── */
@keyframes ripple-out {
  from { opacity: 0.7; transform: scale(0.1); }
  to   { opacity: 0;   transform: scale(1.8); }
}

/* ─── Scanline travel ────────────────────────────────────────────────────── */
.scanline::after {
  animation: scandown 9s linear infinite;
}

@keyframes scandown {
  from { top: -120px; }
  to   { top: calc(100vh + 120px); }
}

/* ─── Page transitions ───────────────────────────────────────────────────── */
@keyframes page-out {
  to { opacity: 0; transform: translateX(-18px); }
}

@keyframes page-in {
  from { opacity: 0; transform: translateX(18px); }
  to   { opacity: 1; transform: none; }
}

/* ─── FAQ accordion ──────────────────────────────────────────────────────── */
.faq-answer {
  transition: max-height 0.38s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── Hero CTA button hover sweep ───────────────────────────────────────── */
.hero-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.08) 40%,
    rgba(255,255,255,0.14) 50%,
    rgba(255,255,255,0.08) 60%,
    transparent 100%
  );
  transform: translateX(-100%);
  transition: none;
}

.hero-cta:hover::before {
  animation: btn-sweep 1.4s ease-in-out infinite;
}

@keyframes btn-sweep {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%);  }
}

/* ─── Footer link underlines ─────────────────────────────────────────────── */
.footer-links a::after {
  transition: width 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── Nav link underlines ────────────────────────────────────────────────── */
.nav-links a::after {
  transition: width 0.24s ease;
}

/* ════════════════════════════════════════════════════════════════════════════
   prefers-reduced-motion — disable ALL motion
═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1      !important;
    transition-duration:       0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Show frequency line immediately */
  .freq-hero-bg {
    clip-path: inset(0 0% 0 0) !important;
    animation: none !important;
  }

  /* Reveal all hero elements immediately */
  html.js-ready .hero-eyebrow,
  html.js-ready .hero h1,
  html.js-ready .hero-tagline,
  html.js-ready .hero-subtext,
  html.js-ready .hero-actions,
  html.js-ready .hero-visual,
  html.js-ready .scroll-cue {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  .phone-frame { animation: none !important; }
  .scroll-cue  { animation: none !important; opacity: 0.25 !important; }
  .tl-cursor   { animation: none !important; }

  .reveal,
  .feature-card,
  .faq-item {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* Tagline cursor: just show static */
  .tl-cursor { width: 0 !important; }
}