/* ============================================================== *
 *  animations.css — reveals, keyframes, view transitions, motion a11y
 * ============================================================== */

/* ---- scroll reveal ---- */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  filter: blur(6px);
  transition:
    opacity var(--t-slow) var(--ease-out),
    transform var(--t-slow) var(--ease-out),
    filter var(--t-slow) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 80ms);
}
[data-reveal].is-in {
  opacity: 1;
  transform: none;
  filter: none;
}

/* ---- keyframes ---- */
@keyframes drive-in {
  from { opacity: 0; transform: translateX(-60%); }
  60%  { opacity: 1; }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes cue-bounce {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50%      { transform: translateY(7px); opacity: 1; }
}

@keyframes wheel-roll {
  to { transform: rotate(360deg); }
}

@keyframes aura-drift {
  0%   { transform: translate(-4%, -2%) scale(1); }
  50%  { transform: translate(4%, 3%) scale(1.08); }
  100% { transform: translate(-4%, -2%) scale(1); }
}

@keyframes float-soft {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

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

@keyframes pulse-glow {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 0.9; }
}

/* ============================================================== *
 *  View transitions (cinematic cross-fade between routes)
 * ============================================================== */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 420ms;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
::view-transition-old(root) { animation-name: vt-fade-out; }
::view-transition-new(root) { animation-name: vt-fade-in; }

@keyframes vt-fade-out { to { opacity: 0; transform: scale(0.99); } }
@keyframes vt-fade-in  { from { opacity: 0; transform: scale(1.01); } }

/* The top bar is its own transition group, but groups stack in DOM order and
   the bar precedes <main> — so the incoming view's group would paint over it
   for the duration of the transition. Lift it so it always stays on top. */
::view-transition-group(topbar) { z-index: 2147483647; }

/* ============================================================== *
 *  Reduced motion — respect the user's preference everywhere
 * ============================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; filter: none; }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none !important; }
}