/* Navigation opt-in is inlined in the document head so it is ready at reveal. */

/* The temporary snapshots must not block another navigation. */
::view-transition,
::view-transition-group(*),
::view-transition-image-pair(*),
::view-transition-old(*),
::view-transition-new(*) {
  pointer-events: none;
}

/* Transition the page content only. Navigation stays live during the animation. */
:root { view-transition-name: none; }
main { view-transition-name: page-content; }

::view-transition-group(page-content) {
  animation: none;
  z-index: 0;
}

::view-transition-old(page-content),
::view-transition-new(page-content) {
  transform-origin: 50% 20%;
}

::view-transition-old(page-content) {
  animation: chenyang-page-out 300ms cubic-bezier(.22, 1, .36, 1) both;
}

::view-transition-new(page-content) {
  animation: chenyang-page-in 300ms cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes chenyang-page-out {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(-8px) scale(.998);
  }
}

@keyframes chenyang-page-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(1.002);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

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

  /* Also settle an in-flight transition if the preference changes mid-navigation. */
  ::view-transition-old(*) {
    opacity: 0 !important;
  }

  ::view-transition-new(*) {
    opacity: 1 !important;
    transform: none !important;
    mix-blend-mode: normal;
  }
}