@view-transition {
  navigation: auto;
}

::view-transition-group(root) {
  animation-duration: 170ms;
  animation-timing-function: cubic-bezier(.2, .75, .25, 1);
}

::view-transition-old(root) {
  animation-name: spark-page-out;
}

::view-transition-new(root) {
  animation-name: spark-page-in;
}

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

@keyframes spark-page-in {
  from { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(root) { animation-duration: 0s; }
}