@view-transition { navigation: auto; }

/* Only content below the shared header participates in the slide. */
[data-page-content] { view-transition-name: page-content; }
::view-transition-group(root), ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
::view-transition-old(root) { display: none; }
::view-transition-group(page-content) { animation-duration: var(--motion-layout); }
::view-transition-image-pair(page-content) { isolation: auto; }
::view-transition-old(page-content), ::view-transition-new(page-content) {
  mix-blend-mode: normal;
  animation-duration: var(--motion-layout);
  animation-timing-function: var(--motion-ease);
  animation-fill-mode: both;
}
:root[data-page-direction="forward"]::view-transition-old(page-content) { animation-name: page-out-left; }
:root[data-page-direction="forward"]::view-transition-new(page-content) { animation-name: page-in-right; }
:root[data-page-direction="backward"]::view-transition-old(page-content) { animation-name: page-out-right; }
:root[data-page-direction="backward"]::view-transition-new(page-content) { animation-name: page-in-left; }
@keyframes page-out-left { to { transform: translateX(-100%); } }
@keyframes page-in-right { from { transform: translateX(100%); } }
@keyframes page-out-right { to { transform: translateX(100%); } }
@keyframes page-in-left { from { transform: translateX(-100%); } }

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