/* Native cross-document transitions */
@view-transition {
  navigation: auto;
}

/* Disable default browser crossfade */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
}

/* Transition content only */
.transition {
  view-transition-name: page-content;
}

@keyframes page-exit {
  to {
    opacity: 0;
    transform: translateY(-6px);
    filter: blur(2px);
  }
}

@keyframes page-enter {
  from {
    opacity: 0;
    transform: translateY(10px);
    filter: blur(4px);
  }

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

/* Outgoing content */
::view-transition-old(page-content) {
  animation: 180ms cubic-bezier(.4, 0, 1, 1) both page-exit;
}

/* Incoming content */
::view-transition-new(page-content) {
  animation: 320ms cubic-bezier(0, .55, .45, 1) both page-enter;
}