html,
body {
  overflow-x: clip;
}

.page-transition-layer {
  position: fixed;
  z-index: 2147483647;
  inset: 0;
  background: #f7f5ef;
  pointer-events: none;
  transform: translate3d(100%, 0, 0);
  transition: transform 680ms cubic-bezier(0.77, 0, 0.18, 1);
  will-change: transform;
}

.page-transition-layer[data-direction="back"] {
  background: #000;
  transform: translate3d(-100%, 0, 0);
}

.page-transition-layer.is-active {
  transform: translate3d(0, 0, 0);
}

.page-transition-layer iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  background: inherit;
}

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