/* Crossfade real page navigation while keeping the shared header still. */
@view-transition { navigation: auto; }
::view-transition { pointer-events: none; }
.site-header { view-transition-name: site-header; }
::view-transition-group(root) { animation: none; }
::view-transition-old(root) { animation: none; opacity: 1; }
::view-transition-new(root) { animation: page-fade-in 320ms ease-in-out both; }
::view-transition-old(root), ::view-transition-new(root) { mix-blend-mode: normal; }
::view-transition-group(site-header) { animation: none; }
::view-transition-old(site-header) { display: none; }
::view-transition-new(site-header) { animation: none; }
@keyframes page-fade-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  html:not([data-navigation-motion="on"])::view-transition-old(*), html:not([data-navigation-motion="on"])::view-transition-new(*) { animation: none !important; }
}