/* Both documents opt in, including browser back/forward navigation. */
@view-transition { navigation: auto; }
::view-transition-group(root) { animation-duration: 480ms; }
::view-transition-old(root) { animation: none; }
::view-transition-new(root) {
  animation: page-arrive 480ms ease-in-out both;
  mix-blend-mode: normal;
}
@keyframes page-arrive { from { opacity: 0; } to { opacity: 1; } }

/* Link-navigation fallback for browsers without cross-document transitions. */
.page-curtain { position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: 0; transition: opacity 480ms ease-in-out; }
.page-curtain.is-visible { opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(root), ::view-transition-new(root) { animation: none; }
  .page-curtain { transition: none; }
}