/* Source: custom — Exvisios (cross-document page transition)

   Navigation, not decoration: the site moves between pages the way one object
   would, instead of flashing white and repainting. A short crossfade of the
   page, with the header held still so the thing you just clicked in does not
   blink. It is the only motion that happens BETWEEN pages, which is why it sits
   outside the two-per-page budget in CLAUDE.md.

   Progressive enhancement: browsers without cross-document view transitions
   (Firefox today) simply navigate as before. Opt-in is gated on
   prefers-reduced-motion, so under reduced motion there is no transition at all,
   not a shortened one. Keyframes live on the browser's own ::view-transition
   pseudo-elements, never on page elements. */

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0.32s;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }

  /* The header is the same object on every page. It keeps its place and only
     cross-dissolves its own state (transparent over a dark hero → solid ivory). */
  .header { view-transition-name: site-header; }
  ::view-transition-group(site-header) { animation-duration: 0.32s; }
}