/* ======================================================================
   FOX TOOLS -- slide page transition (navigation between pages).
   Uses the browser's native cross-document View Transitions: pages keep loading
   as normal links (no SPA, no library, no reload tricks, no loading screen).
   Browsers without support simply navigate instantly. The sidebar, topbar and the
   moving background stay put; only the page content slides. The banner (wolf +
   shards) is part of the content, so it slides as one piece and is not modified.
   Tune from the variables below.
   ====================================================================== */
@view-transition { navigation: auto; }

:root {
  --fxt-dur: 300ms;              /* whole transition */
  --fxt-shift: 44px;             /* slide distance */
  --fxt-ease: cubic-bezier(0.22, 0.7, 0.2, 1);
  --fxt-dir: 1;                  /* +1 = content moves left->right in LTR; flipped for RTL below */
}
html[dir="rtl"] { --fxt-dir: -1; }

/* keep the shell fixed while the content slides */
#fx-sidebar { view-transition-name: fx-side; }
#fx-topbar  { view-transition-name: fx-top; }
main#fx-main { view-transition-name: fx-content; }

/* the page as a whole: no default cross-fade (the named parts animate instead) */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-group(fx-side), ::view-transition-group(fx-top) { animation-duration: 0s; }
::view-transition-old(fx-side), ::view-transition-new(fx-side),
::view-transition-old(fx-top),  ::view-transition-new(fx-top)  { animation: none; }
/* a fresh sidebar image replaces the old one instantly (identical pixels), avoiding any flash */
::view-transition-old(fx-side), ::view-transition-old(fx-top) { display: none; }

@keyframes fxt-out { to { opacity: 0; transform: translateX(calc(var(--fxt-shift) * var(--fxt-dir) * -1)); } }
@keyframes fxt-in  { from { opacity: 0; transform: translateX(calc(var(--fxt-shift) * var(--fxt-dir))); } }
::view-transition-old(fx-content) { animation: fxt-out calc(var(--fxt-dur) * 0.55) var(--fxt-ease) both; }
::view-transition-new(fx-content) { animation: fxt-in var(--fxt-dur) var(--fxt-ease) both; animation-delay: calc(var(--fxt-dur) * 0.2); }

/* phones: shorter, cheaper */
@media (max-width: 600px) {
  :root { --fxt-dur: 240ms; --fxt-shift: 28px; }
}
/* accessibility: no motion at all */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}