/* Universal page fade — works in every browser, not just the ones that
   support the (Chromium-only) View Transitions API. body starts hidden
   and fades in once transition.js marks it ready; internal links fade
   it out first, then navigate, so there's never an abrupt hard cut
   between pages. Requires JS — see the <noscript> fallback in each
   page's <head>. */
body {
  opacity: 0;
}

body.page-ready {
  opacity: 1;
  transition: opacity 200ms ease-out;
}

body.page-leaving {
  opacity: 0;
  transition: opacity 160ms ease-in;
}

/* Arriving at the end of a scroll transition (see page-transition.js).
   Quicker than the ordinary fade, because this one isn't introducing a
   page — it is finishing a movement. The reader has just watched a
   plain field rise to the top of the screen, and body's background is
   that same field, propagated to the canvas and so already painted
   before any of this. What crosses the fade is only the content, which
   is why it can be this short and still read as a reveal rather than a
   cut. transition.js holds it back until the page has painted once, or
   there would be nothing left to see it happen. */
html.pt-arrival body.page-ready {
  transition: opacity 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  body.page-ready,
  body.page-leaving {
    transition: none;
  }

}