/* Route transitions: a fade, and nothing else.
 *
 * This used to be a directional wipe with the top bar held still, the nav
 * pill travelling between routes and the page heading morphing from one to
 * the next. Replaced with a plain crossfade on the user's instruction,
 * 27 September 2026.
 *
 * WHAT IS DELIBERATELY STILL HERE. The mechanism: cross-document view
 * transitions, which the browser drives across a normal navigation. FundPad
 * is real pages at real URLs and the organizer flow depends on that, so
 * nothing here intercepts a click, rewrites history or holds state between
 * pages. Where the API is missing the navigation is a plain navigation and
 * the site behaves exactly as it did before.
 *
 * WHAT IS DELIBERATELY GONE. Every view-transition-name. A named element gets
 * its own group and morphs between its old and new position, which is the
 * travelling and the morphing this is replacing. With no names there is one
 * group, the root, and one thing it can do: cross over. */

@view-transition { navigation: auto; }

/* Short. A fade is a cut with the edges taken off, and a slow one reads as
   the page having hesitated. */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 180ms;
  animation-timing-function: linear;
}

/* The browser's default for the root group is exactly a crossfade, so the
   durations above are the whole change. Naming the keyframes here instead
   would mean reimplementing what it already does, slightly differently. */

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation-duration: 90ms; }
}