/* Smooth page changes with no library (#113, from docs/research/2026-10-08-smooth-page-transitions.md).
   Browsers with cross-document view transitions cross-fade between pages; the others navigate as before. */
@view-transition { navigation: auto; }

/* The menu bar is on every page, so it stays put while the rest changes underneath */
nav .bar { view-transition-name: site-nav; }

/* The old page fades out and lifts slightly, the new one fades in from just below */
::view-transition-old(root) { animation: zz-page-out var(--ease-page-out) both; }
::view-transition-new(root) { animation: zz-page-in var(--ease-page-in) both; }
@keyframes zz-page-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes zz-page-in { from { opacity: 0; transform: translateY(8px); } }

/* The browser canvas behind the pages takes the page's theme, so nothing flashes white in dark mode */
:root { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } }

/* Less motion asked for (for example Windows "Animation effects" off): a plain cross-fade, no sliding */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root) { animation: zz-fade-out var(--ease-page-out) both; }
  ::view-transition-new(root) { animation: zz-fade-in var(--ease-page-in) both; }
}
@keyframes zz-fade-out { to { opacity: 0; } }
@keyframes zz-fade-in { from { opacity: 0; } }