@view-transition {
  navigation: auto;
}

@keyframes slide-out-left {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}
@keyframes slide-in-from-right {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}
@keyframes slide-out-right {
  from { transform: translateX(0); }
  to { transform: translateX(100%); }
}
@keyframes slide-in-from-left {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) {
    mix-blend-mode: normal;
    animation: 300ms ease-in-out forwards slide-out-left;
  }
  ::view-transition-new(root) {
    mix-blend-mode: normal;
    animation: 300ms ease-in-out backwards slide-in-from-right;
  }

  html[data-nav-direction="backward"]::view-transition-old(root) {
    animation-name: slide-out-right;
  }
  html[data-nav-direction="backward"]::view-transition-new(root) {
    animation-name: slide-in-from-left;
  }
}