::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--duration-normal);
  animation-timing-function: var(--ease-out-expo);
}

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

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

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

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

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(root),
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }
}