#page-transition {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100001;
  pointer-events: none;
}

#page-transition.is-active {
  display: block;
  pointer-events: all;
}

.page-transition-panel {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  background: #080808;
  will-change: transform;
}

.page-transition-panel--left {
  left: 0;
}

.page-transition-panel--right {
  right: 0;
}

/* Cover screen before JS runs on incoming navigation */
html.page-transition-enter #page-transition {
  display: block;
  pointer-events: all;
}

html.page-transition-enter .page-transition-panel--left,
html.page-transition-enter .page-transition-panel--right {
  transform: translate3d(0, 0, 0);
}

html.admin-mode #page-transition {
  display: none !important;
  pointer-events: none !important;
}

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