/* Native cross-document navigation when supported; all other browsers navigate normally. */
@supports (view-transition-name: none) {
  @view-transition { navigation: auto; }

  .site-header { view-transition-name: site-header; }

  ::view-transition-old(root) {
    animation: page-transition-out 125ms ease-out both;
  }

  ::view-transition-new(root) {
    animation: page-transition-in 240ms cubic-bezier(.2,.8,.2,1) both;
  }

  /* Keep the persistent navigation visually settled between documents. */
  ::view-transition-old(site-header),
  ::view-transition-new(site-header) {
    animation-duration: 1ms;
    animation-timing-function: linear;
  }

  @keyframes page-transition-out {
    to { opacity: 0; }
  }

  @keyframes page-transition-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
  }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}