.page-transition-curtain {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: #050505;
  box-shadow: 18px 0 36px rgb(0 0 0 / 34%);
  pointer-events: none;
  transform: translate3d(-100%, 0, 0);
  will-change: transform;
}

html.page-transition-leaving {
  overflow: hidden;
}

html.page-transition-leaving .page-transition-curtain {
  transform: translate3d(0, 0, 0);
  transition: transform 520ms cubic-bezier(0.76, 0, 0.24, 1);
}

html.page-transition-arrival {
  background: #050505;
  overflow: hidden;
}

html.page-transition-arrival body > :not(.page-transition-curtain) {
  visibility: hidden;
}

html.page-transition-arrival.page-transition-mounted body > :not(.page-transition-curtain) {
  visibility: visible;
}

html.page-transition-arrival .page-transition-curtain {
  transform: translate3d(0, 0, 0);
}

html.page-transition-arrival.page-transition-reveal .page-transition-curtain {
  transform: translate3d(100%, 0, 0);
  transition: transform 520ms cubic-bezier(0.76, 0, 0.24, 1);
}

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

  html.page-transition-arrival,
  html.page-transition-leaving {
    overflow: auto;
  }

  html.page-transition-arrival body > :not(.page-transition-curtain) {
    visibility: visible;
  }
}