@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: page-transition-out 140ms ease-out both;
}

::view-transition-new(root) {
  animation: page-transition-in 200ms cubic-bezier(.22, .61, .36, 1) both;
}

::view-transition-old(bottom-nav),
::view-transition-new(bottom-nav) {
  animation: none;
}

html.skip-launch-screen::view-transition-old(root),
html.skip-launch-screen::view-transition-new(root) {
  animation: none;
}

@keyframes page-transition-out {
  to { opacity: 0; }
}

@keyframes page-transition-in {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 1ms;
  }
}