@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: 220ms cubic-bezier(.4, 0, 1, 1) both site-page-out;
}

::view-transition-new(root) {
  animation: 320ms cubic-bezier(0, 0, .2, 1) both site-page-in;
}

@keyframes site-page-out {
  to {
    opacity: 0;
    transform: translateY(-6px);
  }
}

@keyframes site-page-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }

  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}