/* Unseat audit v2 — motion layer
 * Drop into src/web/static/audit/motion.css. Load after tokens.css.
 */

[data-reveal],
[data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
}
[data-reveal].is-visible,
[data-reveal-stagger].is-visible > * {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal-stagger].is-visible > *:nth-child(1) { transition-delay: 0ms; }
[data-reveal-stagger].is-visible > *:nth-child(2) { transition-delay: 70ms; }
[data-reveal-stagger].is-visible > *:nth-child(3) { transition-delay: 140ms; }
[data-reveal-stagger].is-visible > *:nth-child(4) { transition-delay: 210ms; }
[data-reveal-stagger].is-visible > *:nth-child(5) { transition-delay: 280ms; }
[data-reveal-stagger].is-visible > *:nth-child(6) { transition-delay: 350ms; }
[data-reveal-stagger].is-visible > *:nth-child(7) { transition-delay: 420ms; }
[data-reveal-stagger].is-visible > *:nth-child(n+8) { transition-delay: 490ms; }

@keyframes rvOfferGlow {
  0%, 100% { box-shadow: 0 30px 80px rgba(0,0,0,0.38), 0 0 0 1px rgba(97,67,249,0.22), 0 0 42px rgba(97,67,249,0.14); }
  50%      { box-shadow: 0 30px 80px rgba(0,0,0,0.38), 0 0 0 1px rgba(143,62,186,0.38), 0 0 72px rgba(143,62,186,0.32); }
}
.rv-offer-glow { animation: rvOfferGlow 6s ease-in-out infinite; }

@keyframes rvRedWound {
  0%, 100% { box-shadow: 0 0 10px rgba(237,59,62,0.35), 0 0 0 0 rgba(237,59,62,0.55); }
  50%      { box-shadow: 0 0 18px rgba(237,59,62,0.7),  0 0 0 6px rgba(237,59,62,0); }
}
.rv-red-dot { animation: rvRedWound 2.4s ease-in-out infinite; }

@keyframes ctaPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(97,67,249,0.45); }
  50%      { box-shadow: 0 0 0 12px rgba(97,67,249,0); }
}
.cta-pulse { animation: ctaPulse 2.6s ease-in-out infinite; }
.cta-pulse:hover { animation: none; }

.rv-timeline-line {
  transform-origin: top;
  transform: scaleY(0);
  transition: transform 1200ms var(--ease-out);
}
[data-reveal].is-visible .rv-timeline-line,
[data-reveal-stagger].is-visible .rv-timeline-line { transform: scaleY(1); }

[data-leaderboard-bar] {
  width: 0 !important;
  transition: width 900ms var(--ease-out);
}
[data-leaderboard-bar].is-visible {
  width: var(--bar-width) !important;
}

/* ───────────────────────────────────────────────────────────
   FUNNEL CTA PULSE-GLOW
   Cross-page brand-gradient CTA animation: the landing page
   uses solid-green + ctaPulseGlow; the rest of the funnel
   (reveal / results / scan) keeps the violet→red brand
   gradient but gets the same "subtly alive" pulse-glow via
   a violet halo. Box-shadow-only — no layout jitter, no
   transform — so the existing per-CTA hover transform still
   owns the click affordance. Pause on hover so the button
   feels committed under interaction.
─────────────────────────────────────────────────────────── */
/* brandCtaPulseGlow removed 2026-05-27 per frontend-design review.
   Five things were pulsing/breathing simultaneously in the hero (CTA
   glow, live pill, scroll arrow, audit-card dot, peek slideshow) —
   the CTA pulse lost meaning when 5 other things competed. CTA hover
   transform alone now carries the interaction affordance. The live
   pill keeps its semantic pulse; static box-shadow keeps the CTA
   visually weighty without the breathing. */
.rv-hero-cta,
.rv-offer-cta,
.rv-sticky-btn,
.cta-button,
.unlock-nudge__cta {
  box-shadow: 0 18px 44px rgba(97, 67, 249, 0.40);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-reveal],
  [data-reveal-stagger] > * { opacity: 1 !important; transform: none !important; }
  [data-leaderboard-bar] { width: var(--bar-width) !important; }
}