/* Page-to-page transitions: the page content cross-fades while the navbar stays fixed in place.
   Chrome and Safari 18+ support this; other browsers switch instantly.
   Loaded only in the production build (see vite.config.ts): the dev server's empty page shell cannot
   take part in a transition, and Chrome logs an error when one is attempted. */
@view-transition {
  navigation: auto;
}

/* The navbar is its own layer, so it does not fade or blink between pages. */
.main-header-1 {
  view-transition-name: site-header;
}

/* The old page fades out over the new one, which is already live underneath and plays its own intro.
   The new page is not faded in, so there is no moment where the screen is blank. */
::view-transition-old(root) {
  animation-duration: 0.35s;
  animation-timing-function: ease-in-out;
}

::view-transition-new(root) {
  animation: none;
}

::view-transition-group(site-header) {
  animation: none;
}