@view-transition {
  navigation: auto;
}

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-group(root) {
    animation-duration: 300ms;
    animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  }

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

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

  ::view-transition-new(root) {
    animation: dc-page-vt-in 300ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  :root[data-dc-transition-page="index"]::view-transition-new(root) {
    animation: none;
    filter: none;
    opacity: 1;
  }

  @keyframes dc-page-vt-out {
    from {
      opacity: 1;
      filter: blur(0);
    }

    to {
      opacity: 0;
      filter: blur(4px);
    }
  }

  @keyframes dc-page-vt-in {
    from {
      opacity: 0;
      filter: blur(3px);
    }

    to {
      opacity: 1;
      filter: blur(0);
    }
  }
}

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

.dc-page-transition-fallback-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms cubic-bezier(0.4, 0, 1, 1);
}

:root.dc-page-transition-fallback-active .dc-page-transition-fallback-overlay {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .dc-page-transition-fallback-overlay {
    display: none;
  }
}