.page-transition {
  position: fixed;
  inset: 0;
  z-index: 999999;
  pointer-events: none;
  overflow: hidden;
  visibility: visible;
}

.page-transition-bg {
  position: absolute;
  inset: 0;
  background: var(--color-black);
  transform: translateY(-100%);
  will-change: transform;
}

body.page-loading .page-transition,
body.page-leaving .page-transition {
  pointer-events: all;
}

body.page-loading .page-transition-bg,
body.page-leaving .page-transition-bg {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .page-transition {
    display: none;
  }
}