:root {
  --page-transition-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --page-transition-duration: 220ms;
  --page-transition-enter-distance: 12px;
  --page-transition-exit-distance: 10px;
}

html {
  background: #f4faff;
}

html.has-page-transition body {
  transition:
    opacity var(--page-transition-duration) var(--page-transition-ease),
    transform var(--page-transition-duration) var(--page-transition-ease),
    filter var(--page-transition-duration) var(--page-transition-ease);
  will-change: opacity, transform, filter;
}

html.has-page-transition:not(.is-ready) body {
  opacity: 0;
  transform: translate3d(0, var(--page-transition-enter-distance), 0);
  filter: saturate(0.98);
}

html.has-page-transition.is-ready body {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  filter: saturate(1);
}

html.has-page-transition.is-transitioning body {
  opacity: 0;
  transform: translate3d(0, calc(var(--page-transition-exit-distance) * -1), 0);
  filter: saturate(0.98);
}

@media (prefers-reduced-motion: reduce) {
  html.has-page-transition body {
    transition: none !important;
  }

  html.has-page-transition:not(.is-ready) body,
  html.has-page-transition.is-ready body,
  html.has-page-transition.is-transitioning body {
    opacity: 1;
    transform: none;
    filter: none;
  }
}