@view-transition {
  navigation: auto;
}

main { view-transition-name: navigation-main; }
.masthead { view-transition-name: navigation-header; }

::view-transition-group(navigation-main) { z-index: 0; }
::view-transition-group(navigation-header) { z-index: 1; }

::view-transition-group(navigation-header),
::view-transition-old(navigation-header),
::view-transition-new(navigation-header),
::view-transition-old(root),
::view-transition-new(root),
::view-transition-group(navigation-main),
::view-transition-old(navigation-main),
::view-transition-new(navigation-main) {
  animation: none;
}

::view-transition-old(navigation-main),
::view-transition-new(navigation-main) {
  object-fit: none;
  object-position: top left;
}

html[data-navigation-direction="right"] { --navigation-x: 100vw; --navigation-y: 0px; }
html[data-navigation-direction="left"] { --navigation-x: -100vw; --navigation-y: 0px; }
html[data-navigation-direction="down"] { --navigation-x: 0px; --navigation-y: 100vh; }
html[data-navigation-direction="up"] { --navigation-x: 0px; --navigation-y: -100vh; }

html[data-navigation-direction]::view-transition-old(navigation-main) {
  animation: navigation-out 650ms cubic-bezier(.4, 0, .2, 1) both;
}
html[data-navigation-direction]::view-transition-new(navigation-main) {
  animation: navigation-in 650ms cubic-bezier(.4, 0, .2, 1) both;
}

@keyframes navigation-out { to { transform: translate(calc(-1 * var(--navigation-x)), calc(-1 * var(--navigation-y))); } }
@keyframes navigation-in { from { transform: translate(var(--navigation-x), var(--navigation-y)); } }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  main, .masthead { view-transition-name: none; }
  html[data-navigation-direction]::view-transition-old(navigation-main),
  html[data-navigation-direction]::view-transition-new(navigation-main) { animation: none; }
}