@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: 280ms cubic-bezier(0.4, 0, 1, 1) 0ms both kp-page-transition-out;
}

::view-transition-new(root) {
  animation: 280ms cubic-bezier(0.2, 0.7, 0.2, 1) 360ms both kp-page-transition-in;
}

::view-transition-group(root) {
  background: #ffffff;
}

::view-transition-image-pair(root) {
  isolation: isolate;
}

::view-transition-old(root),
::view-transition-new(root) {
  mix-blend-mode: normal;
}

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

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

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 1ms;
    animation-delay: 0ms;
  }
}