/* Keep the shared shell steady while moving between the site's documents. */
@media screen {
  html { scrollbar-gutter: stable; background: #faf9fa; }
  .site-header .nav-desktop > a[aria-current="page"],
  .site-header .mobile-menu > a[aria-current="page"] {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 6px;
  }
}

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

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

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

  ::view-transition-image-pair(root) { isolation: isolate; }
  ::view-transition-old(root) {
    mix-blend-mode: normal;
    animation: page-leave 180ms ease-out both;
  }
  ::view-transition-new(root) {
    mix-blend-mode: normal;
    animation: page-arrive 260ms cubic-bezier(.22, 1, .36, 1) both;
  }

  /* The current header replaces its snapshot without fading or moving. */
  ::view-transition-group(site-header) { z-index: 2; }
  ::view-transition-old(site-header) { display: none; }
  ::view-transition-new(site-header) {
    animation: none;
    mix-blend-mode: normal;
  }

  /* A gentle entrance for browsers without cross-document transitions. */
  .page-transition-fallback main {
    animation: page-arrive 220ms cubic-bezier(.22, 1, .36, 1) both;
  }
}

@keyframes page-leave {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes page-arrive {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .site-header { view-transition-name: none; }
  .page-transition-fallback main { animation: none; }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}