@view-transition {
  navigation: auto;
}

::view-transition-group(root) {
  animation-duration: 360ms;
  animation-timing-function: cubic-bezier(.22, 1, .36, 1);
}

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

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

@keyframes page-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes page-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

html.page-transition-capable body {
  opacity: 0;
  transition: opacity 320ms cubic-bezier(.22, 1, .36, 1);
}

html.page-transition-capable.page-entered body {
  opacity: 1;
}

html.page-transition-capable.page-leaving body {
  opacity: 0;
  pointer-events: none;
  transition-duration: 190ms;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(root) {
    animation-duration: .01ms !important;
  }

  html.page-transition-capable body,
  html.page-transition-capable.page-entered body,
  html.page-transition-capable.page-leaving body {
    opacity: 1;
    transition: none;
  }
}