/* One short transition for the page, with navigation staying visually anchored. */
@view-transition { navigation: auto; }
#main { view-transition-name: page-content; }
.site-header { view-transition-name: site-header; }
::view-transition { pointer-events: none; }
::view-transition-group(*) { animation: none; }
::view-transition-old(root), ::view-transition-old(site-header) { display: none; }
::view-transition-new(root), ::view-transition-new(site-header) { animation: none; }
::view-transition-old(page-content) {
  animation: page-depart 140ms ease-out both;
  mix-blend-mode: normal;
}
::view-transition-new(page-content) {
  animation: page-arrive 260ms cubic-bezier(.22, 1, .36, 1) both;
  mix-blend-mode: normal;
}
@keyframes page-depart { to { opacity: 0; transform: translateY(-4px); } }
@keyframes page-arrive { from { opacity: 0; transform: translateY(7px); } }

/* Reveals run once, only below the fold; no long stagger or drifting surfaces. */
.will-reveal { transform: translateY(12px); transition-duration: 420ms; }
.will-reveal.is-visible { transform: none; }

html.motion-paused::view-transition-old(*), html.motion-paused::view-transition-new(*) { animation: none !important; }
html.motion-paused::view-transition-old(page-content) { display: none; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}