.ow-transition {
  --ow-door-speed: 680ms;
  position: fixed;
  z-index: 2147483000;
  inset: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
  background: #0b0e0f;
}

.ow-transition.is-active,
html.ow-arrival .ow-transition {
  visibility: visible;
  pointer-events: auto;
}

.ow-door {
  position: absolute;
  top: 0;
  bottom: 0;
  width: calc(50% + 2px);
  overflow: hidden;
  will-change: transform;
  transition: transform var(--ow-door-speed) cubic-bezier(.72, 0, .22, 1);
}

.ow-door--left {
  left: 0;
  transform: translateX(-102%);
}

.ow-door--right {
  right: 0;
  transform: translateX(102%);
}

.ow-transition.is-closed .ow-door,
html.ow-arrival .ow-door {
  transform: translateX(0);
}

.ow-door__picture,
.ow-door__art {
  position: absolute;
  top: 0;
  width: 100vw;
  height: 100%;
  max-width: none;
}

.ow-door__picture {
  display: block;
}

.ow-door__art {
  left: 0;
  object-fit: cover;
  object-position: center;
}

.ow-door--left .ow-door__picture {
  left: 0;
}

.ow-door--right .ow-door__picture {
  right: 0;
}

@media (max-width: 899px), (max-width: 1024px) and (orientation: portrait) {
  .ow-transition {
    --ow-door-speed: 480ms;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ow-door {
    transition-duration: .001ms;
  }
}