/* =====================================================================
   Cross-document view transitions — phones only
   ---------------------------------------------------------------------
   Linked from base.njk with media="(max-width: 960px)", because
   `@view-transition` is a top-level at-rule that cannot be nested inside a
   media query — the link attribute is the only way to gate it.

   What it buys: navigating between pages cross-fades instead of flashing
   white, and the two pieces of app chrome stay PUT while it happens, which
   is the difference between "a new page loaded" and "the app moved".
   Unsupported browsers ignore the whole file and navigate normally.
   ===================================================================== */
@view-transition {
  navigation: auto;
}

/* A named element is captured on its own and morphed between the two
   documents rather than cross-faded with the page, so the top bar and the
   tab bar do not blink on every navigation. */
.site-header {
  view-transition-name: app-bar;
}
.tabbar {
  view-transition-name: tab-bar;
}

::view-transition-old(root) {
  animation-duration: 140ms;
  animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45);
}
::view-transition-new(root) {
  animation-duration: 220ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
::view-transition-group(app-bar),
::view-transition-group(tab-bar) {
  animation-duration: 0s;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}