html.page-transition-pending::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 10001;
  pointer-events: none;
  background: var(--page-transition-color, #0f0f0f);
  transform: translate3d(0, 0, 0) scaleY(1);
  transform-origin: top;
  backface-visibility: hidden;
  will-change: transform;
}

html.page-transition-pending,
html.page-transition-pending body {
  background: #ffffff !important;
}

html.page-transition-pending body > * {
  visibility: hidden !important;
}

html.page-transition-pending.page-transition-revealing::before {
  animation: pageTransitionOut 0.68s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.page-transition {
  position: fixed;
  inset: 0;
  z-index: 10000;
  pointer-events: none;
  background: var(--page-transition-color, #0f0f0f);
  contain: layout paint;
  transform: translate3d(0, 0, 0) scaleY(0);
  transform-origin: bottom;
  visibility: hidden;
  backface-visibility: hidden;
  will-change: transform;
}

.page-transition.is-active {
  visibility: visible;
  animation: pageTransitionIn 0.56s cubic-bezier(0.83, 0, 0.17, 1) forwards;
}

.page-transition.is-leaving {
  visibility: visible;
  transform: translate3d(0, 0, 0) scaleY(1);
  transform-origin: top;
  animation: pageTransitionOut 0.68s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.page-transition.is-visible-hold {
  visibility: visible;
  transform: translate3d(0, 0, 0) scaleY(1);
}

@keyframes pageTransitionIn {
  from {
    transform: translate3d(0, 0, 0) scaleY(0);
  }
  to {
    transform: translate3d(0, 0, 0) scaleY(1);
  }
}

@keyframes pageTransitionOut {
  from {
    transform: translate3d(0, 0, 0) scaleY(1);
  }
  to {
    transform: translate3d(0, 0, 0) scaleY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  html.page-transition-pending::before,
  html.page-transition-pending.page-transition-revealing::before,
  .page-transition,
  .page-transition.is-active,
  .page-transition.is-leaving {
    animation: none;
    visibility: hidden;
  }
}