/* Native navigation starts immediately; the browser blends the two pages. */
@view-transition { navigation: auto; }

::view-transition { pointer-events: none; }
/* The root is a viewport snapshot. Interpolating its geometry can shift a
   page as a menu's scrollbar lock disappears on the destination document. */
::view-transition-group(root) { animation: none; }
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 200ms;
  animation-timing-function: cubic-bezier(.22, .61, .36, 1);
}

/* Browsers without cross-document transitions get a short arrival fade only.
   No persistent opacity or covering layer can trap a restored/canceled page. */
html[data-page-entering='true'] body {
  animation: cirqle-page-enter 180ms cubic-bezier(.22, .61, .36, 1);
}
@keyframes cirqle-page-enter { from { opacity: .65; } to { opacity: 1; } }

html[data-motion-paused='true']::view-transition-group(root),
html[data-motion-paused='true']::view-transition-old(root),
html[data-motion-paused='true']::view-transition-new(root),
html[data-motion-paused='true'][data-page-entering='true'] body { animation: none; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(root),
  ::view-transition-old(root),
  ::view-transition-new(root),
  html[data-page-entering='true'] body { animation: none; }
}