/* ============================================================
 * USE Theme Claude — view-transitions.css
 * Tweaks for the View Transitions API. Browser support is progressive.
 * Inline duration is set by the NavigationModule via inline <style>.
 * ============================================================ */

@layer motion {
  ::view-transition-old(root) {
    animation: use-fade-out var(--use-vt-duration, 320ms) ease both;
  }
  ::view-transition-new(root) {
    animation: use-fade-in var(--use-vt-duration, 320ms) ease both;
  }

  @keyframes use-fade-out { to { opacity: 0; } }
  @keyframes use-fade-in  { from { opacity: 0; } }

  @media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
      animation: none !important;
    }
  }
}