/* Cross-document view transitions.
 *
 * Both documents have to opt in for this to fire — a navigation only animates
 * if the page being left and the page being entered both declare it. That is
 * why this lives in its own file rather than in either page's stylesheet.
 *
 * Where the API is missing the navigation simply happens the old way, with no
 * fallback needed and nothing to feature-detect.
 */

@view-transition {
  navigation: auto;
}

/* One duration for every part of the transition, root and named elements
 * alike, on the same easing the icons use for their magnetic pull — so the
 * page change feels like it belongs to the same object as the rest of the
 * site rather than to the browser. */
::view-transition-group(*) {
  animation-duration: 420ms;
  animation-timing-function: cubic-bezier(0.2, 0.8, 0.3, 1);
}

/* The wordmark is on both pages, so it is treated as one element that persists
 * rather than two that cross-fade. It sits in the same place on each, which
 * means it simply stays put while everything around it changes.
 *
 * Named here rather than in each page's own stylesheet: a view-transition-name
 * has to be unique in a document, so keeping every name in one file is what
 * stops two of them being invented separately and colliding. */
.g-title,
footer .meta .title {
  view-transition-name: page-title;
}

/* A transition is motion, and some people have asked the OS for less of it.
 * Nothing is disabled — the navigation still works, it just arrives at once. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}