/* Marketing MPA soft crossfade — load only on home/Docs/Contact/login.
   Keep out of packages/ui/theme.css so /app/* shells are not opted in
   (Playwright page.goto + navigation:auto throws "ViewTransition opt-in disabled").

   Hardening (Reel flake): use explicit ms + full `animation` shorthand with
   `both` fill-mode. Do NOT use --dur-* here — tokens.css zeros those under
   prefers-reduced-motion to 0.001ms, which can make a still-enabled VT look
   like a hard cut if media queries disagree. */
@view-transition {
  navigation: auto;
}

@keyframes vt-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes vt-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

::view-transition-old(root) {
  animation: 320ms cubic-bezier(0.2, 0.8, 0.2, 1) both vt-fade-out;
}

::view-transition-new(root) {
  animation: 320ms cubic-bezier(0.2, 0.8, 0.2, 1) both vt-fade-in;
}

@media (max-width: 480px) {
  ::view-transition-old(root) {
    animation-duration: 480ms;
  }
  ::view-transition-new(root) {
    animation-duration: 480ms;
  }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }
}