@view-transition {
  navigation: auto;
}

html,
body {
  background: #000;
}

html body canvas.ozz-blackhole-canvas {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 0 !important;
  opacity: .9 !important;
  contain: strict;
  background: #000;
  mix-blend-mode: screen !important;
  view-transition-name: ozz-singularity;
  isolation: isolate;
  backface-visibility: hidden;
}

html body.wizard-open canvas.ozz-blackhole-canvas {
  opacity: .28 !important;
  filter: blur(12px);
}

/* The canvas snapshot is dismissed almost immediately. The destination
   renderer continues the saved phase in real time; holding a frozen browser
   snapshot here would make the orbit visibly stop between pages. */
::view-transition-group(ozz-singularity) {
  z-index: 2147483646;
  animation-duration: 1ms;
  animation-timing-function: linear;
}

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

::view-transition-old(ozz-singularity) {
  z-index: 2;
  opacity: 0;
  mix-blend-mode: screen;
  animation: none;
}

::view-transition-new(ozz-singularity) {
  z-index: 1;
  opacity: 1;
  mix-blend-mode: screen;
  animation: none;
}

::view-transition-old(root) {
  animation: ozz-page-out 120ms linear both;
}

::view-transition-new(root) {
  animation: ozz-page-in 120ms linear both;
}

@keyframes ozz-page-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

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

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(ozz-singularity),
  ::view-transition-old(ozz-singularity),
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 1ms !important;
  }
}