@view-transition {
  navigation: auto;
}

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 520ms;
    animation-timing-function: cubic-bezier(0.33, 0, 0.2, 1);
  }

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

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

@keyframes wc-page-blur-out {
  from {
    filter: blur(0);
  }

  70% {
    filter: blur(18px);
  }

  to {
    filter: blur(18px);
  }
}

@keyframes wc-page-blur-in {
  from {
    filter: blur(18px);
  }

  30% {
    filter: blur(18px);
  }

  to {
    filter: blur(0);
  }
}