/* Shared motion for page content. The page background stays in place on exit. */
@media (prefers-reduced-motion: no-preference) {
  html[data-page-motion="enter"] :is(main:not(.home), header, footer) > *,
  html[data-page-motion="enter"] .home .identity > * {
    opacity: 0;
    transform: translateY(12px);
  }

  html[data-page-motion="ready"] :is(main:not(.home), header, footer) > *,
  html[data-page-motion="ready"] .home .identity > * {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 220ms ease-out, transform 220ms cubic-bezier(.22, 1, .36, 1);
    transition-delay: var(--page-motion-delay, 0ms);
  }

  html[data-page-motion="leave"] :is(main:not(.home), header, footer) > *,
  html[data-page-motion="leave"] .home .identity > * {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 150ms ease-in, transform 150ms ease-in;
    transition-delay: 0ms;
  }

  html[data-page-motion="leave"] .icon-label {
    opacity: 0;
    transition: opacity 150ms ease-in;
  }

  html.page-background-transition::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1000;
    pointer-events: none;
    background: var(--page-previous-background);
    opacity: 1;
    transition: opacity 210ms ease-out;
  }

  html.page-background-transition[data-page-motion="ready"]::before {
    opacity: 0;
  }
}