@view-transition { navigation: auto; }

/* Keep the destination opaque: landing artwork must not bleed through legal pages. */
.site-header,
.site-header.is-compact {
  height: 88px;
  transition: background .25s ease;
  view-transition-name: site-header;
}
::view-transition-group(*) { animation-duration: 180ms; }
::view-transition-group(root) { animation: none; }
::view-transition-old(root) { display: none; }
::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
/* Show only the destination header, without interpolating its geometry.
   Two translucent snapshots otherwise expose duplicated menu text. */
::view-transition-group(site-header) { animation: none; }
::view-transition-old(site-header) { display: none; }
::view-transition-new(site-header) { animation: none; mix-blend-mode: normal; }
.internal-navigation .site-intro { display: none; }
.internal-navigation:not(.native-page-transitions) main { animation: page-fade-in 180ms ease both; }
.site-header ~ main [id] { scroll-margin-top: 96px; }
.site-header nav a[aria-current] { color: var(--accent); }
@keyframes page-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes page-fade-out { from { opacity: 1; } to { opacity: 0; } }
@media (max-width: 560px) {
  .site-header, .site-header.is-compact { height: 74px; }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(*) { animation-duration: 0s; }
  .internal-navigation main { animation: none !important; }
}