/* ==========================================================================
   transitions.css — cross-document View Transitions between pages, plus a
   universal fade-in on first paint. Shared across all pages.

   Fail-safe: html.js-loading only ever exists if the inline script at the
   top of <body> ran (i.e. JS is enabled) — a no-JS visitor never gets that
   class, so the body{opacity:0} rule below never matches and the page is
   always fully visible. js/page-load.js removes the class once the DOM is
   ready, and the plain `body` rule fades it back in.
   ========================================================================== */

html.js-loading body {
  opacity: 0;
}
body {
  opacity: 1;
  transition: opacity 260ms var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  body { transition: none; }
}

/* Cross-document View Transitions (progressive enhancement — browsers
   without support just navigate instantly, exactly as before). */
@view-transition {
  navigation: auto;
}
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 320ms;
    animation-timing-function: cubic-bezier(.22, 1, .36, 1);
  }
}