/* =========================================================================
   Cross-document view transitions.
   Same-origin navigations morph instead of flashing white. This is an
   enhancement: browsers without it navigate normally and lose nothing.
   ========================================================================= */

@view-transition { navigation: auto; }

/* Elements that exist on every page keep their identity across the
   navigation, so the chrome stays put while the content changes. */
.nav        { view-transition-name: site-nav; }
.brand      { view-transition-name: site-brand; }
.progress   { view-transition-name: site-progress; }
.footer     { view-transition-name: site-footer; }

/* The page body is the only thing that actually animates: a short lift and
   fade, in the same easing as the rest of the site. */
::view-transition-old(root) {
  animation: vt-out 220ms cubic-bezier(0.65, 0, 0.35, 1) both;
}
::view-transition-new(root) {
  animation: vt-in 380ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes vt-out { to { opacity: 0; transform: translateY(-0.75rem); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(1rem); } }

/* Persistent chrome should not cross-fade against itself. */
::view-transition-group(site-nav),
::view-transition-group(site-brand),
::view-transition-group(site-progress),
::view-transition-group(site-footer) {
  animation-duration: 220ms;
}
::view-transition-old(site-nav),
::view-transition-new(site-nav),
::view-transition-old(site-footer),
::view-transition-new(site-footer) {
  animation: none;
  mix-blend-mode: normal;
}

/* Someone who asked for less motion gets an instant swap, not a slide. */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}