/* Cross-document snapshots, not another DOM tree or WebGL scene. */
@view-transition {
  navigation: auto;
}

::view-transition-group(root) {
  animation-duration: 320ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

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

/* Keep real links responsive during the short snapshot animation. */
::view-transition { pointer-events: none; }

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

::view-transition-old(root) {
  animation: keizie-page-out 240ms ease-out both;
}

::view-transition-new(root) {
  animation: keizie-page-in 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes keizie-page-out {
  to { opacity: 0; transform: translateY(-6px); }
}

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

/* Opacity-only fallback keeps fixed canvases and controls in their exact place. */
html.page-transition-pending body {
  opacity: 0;
}

html.page-transition-entering body {
  animation: keizie-page-fade-in 240ms ease-out both;
}

html.page-transition-leaving body {
  opacity: 0;
  transition: opacity 150ms ease-out;
  pointer-events: none;
}

@keyframes keizie-page-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }

  ::view-transition-group(root),
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }

  html.page-transition-pending body,
  html.page-transition-entering body,
  html.page-transition-leaving body {
    opacity: 1;
    animation: none;
    transition: none;
    pointer-events: auto;
  }
}