/* Full document navigation keeps each page's scripts, history and scroll intact. */
::view-transition-group(root) {
  animation-duration: 440ms;
  animation-timing-function: cubic-bezier(.22, 1, .36, 1);
}

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

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 440ms;
  animation-timing-function: cubic-bezier(.22, 1, .36, 1);
  animation-fill-mode: both;
  mix-blend-mode: plus-lighter;
}

::view-transition-old(root) { animation-name: pxm-page-fade-out; }
::view-transition-new(root) { animation-name: pxm-page-fade-in; }

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

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

/* Entry-only enhancement in browsers without cross-document transitions. */
html.pxm-page-enter body {
  animation: pxm-document-enter 440ms cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes pxm-document-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Exclude the closing mobile menu from the page snapshots. */
.mobile-menu-overlay {
  view-transition-name: pxm-mobile-menu;
}

::view-transition-group(pxm-mobile-menu) {
  display: none;
}

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

  html.pxm-page-enter body {
    animation: none;
    opacity: 1;
  }
}