::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 420ms;
  animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
  mix-blend-mode: normal;
}

html[data-slide="forward"]::view-transition-old(root) {
  animation-name: page-out-left;
}

html[data-slide="forward"]::view-transition-new(root) {
  animation-name: page-in-right;
}

html[data-slide="backward"]::view-transition-old(root) {
  animation-name: page-out-right;
}

html[data-slide="backward"]::view-transition-new(root) {
  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-old(root),
  ::view-transition-new(root) {
    animation-duration: 1ms;
  }
}