/**
 * Page transitions
 *
 * Cross-document view transitions: the browser holds the outgoing page, paints
 * the incoming one, and cross-fades between them.
 *
 * Browsers without the API fade the incoming content in instead. That is done
 * from CSS rather than from a script on DOMContentLoaded: by then the page has
 * usually been painted already, so setting the opacity back to zero made the
 * content appear, blink out and fade in again.
 */

@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 260ms;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* The navbar deliberately has no view-transition-name of its own. Naming an
   element lifts it into its own captured layer, and its backdrop-filter then
   has no page behind it to sample: the bar stopped frosting entirely. It rides
   the root cross-fade instead, which is unnoticeable because it looks all but
   identical from one page to the next. */

/* `view-transition-name` is unsupported exactly where the cross-fade above
   cannot run, so this covers those browsers and nothing else. The animation
   fills both ways: it starts hidden and ends visible, and if it never runs the
   content is simply shown. */
@supports not (view-transition-name: none) {
  #main-content {
    animation: page-fade-in 280ms cubic-bezier(0.4, 0, 0.2, 1) both;
  }
}

@keyframes page-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }

  #main-content {
    animation: none;
  }
}