/* Original global page transition, now between native HTML documents.
   Timing and wipe geometry: reference/page-transitions.md. */
@view-transition {
  navigation: auto;
}

/* The exported layouts reset the body background to transparent. Give both
   document snapshots and the space revealed by the exit an opaque canvas. */
html { background-color: #fff; color-scheme: light; }
html body { background-color: #fff; }
::view-transition { background-color: #fff; }

::view-transition-group(root) { animation-duration: 1.1s; }
::view-transition-image-pair(root) { isolation: isolate; }

@keyframes dot-page-exit {
  from { opacity: 1; transform: translateY(0%) scale(1); }
  to { opacity: 0; transform: translateY(-10%) scale(.9); }
}

@keyframes dot-page-enter {
  from {
    opacity: 1;
    transform: translateY(30%) scale(1);
    clip-path: inset(100% 0 0 0);
  }
  to {
    opacity: 1;
    transform: translateY(0%) scale(1);
    clip-path: inset(0 0 0 0);
  }
}

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

::view-transition-old(root) {
  animation: dot-page-exit 1s cubic-bezier(.8, 0, .2, 1) both;
  z-index: 1;
}

::view-transition-new(root) {
  animation: dot-page-enter 1s cubic-bezier(.8, 0, .2, 1) .1s both;
  z-index: 2;
  /* Same bottom-to-top wipe as the original, using directly animated geometry
     instead of an alpha mask/custom property on a cross-document snapshot. */
}

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

  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
    clip-path: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
}