@view-transition {
  navigation: auto;
}

@media (prefers-reduced-motion: no-preference) {
  body {
    animation: page-enter .34s cubic-bezier(.22, .85, .3, 1) both;
  }

  body.is-page-leaving {
    pointer-events: none;
    animation: page-leave .22s cubic-bezier(.45, 0, 1, 1) both;
  }

  ::view-transition-old(root) {
    animation: page-leave .2s cubic-bezier(.45, 0, 1, 1) both;
  }

  ::view-transition-new(root) {
    animation: page-enter .32s cubic-bezier(.22, .85, .3, 1) both;
  }
}

@keyframes page-enter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

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