.page-intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  overflow: hidden;
  background: transparent;
  pointer-events: auto;
}

.intro-panel {
  position: relative;
  width: 50vw;
  height: 100%;
  overflow: hidden;
  flex: 0 0 50vw;
  background: #001F40;
  will-change: transform;
}

.intro-panel::after {
  position: absolute;
  inset-block: 0;
  width: 1px;
  background: rgba(255, 255, 255, .14);
  content: '';
}

.intro-panel-left::after { right: 0; }
.intro-panel-right::after { left: 0; }

.intro-panel img {
  position: absolute;
  top: 50%;
  left: 50vw;
  width: clamp(190px, 29vw, 390px);
  height: auto;
  max-width: none;
  transform: translate(-50%, -50%);
  user-select: none;
  -webkit-user-drag: none;
}

.intro-panel-right img { left: 0; }

.intro-panel-left { transform-origin: right center; }
.intro-panel-right { transform-origin: left center; }

.page-intro.is-opening .intro-panel-left {
  animation: intro-open-left 1.4s cubic-bezier(.22, .78, .26, 1) forwards;
}

.page-intro.is-opening .intro-panel-right {
  animation: intro-open-right 1.4s cubic-bezier(.22, .78, .26, 1) forwards;
}

@keyframes intro-open-left {
  to { transform: translateX(-100%); }
}

@keyframes intro-open-right {
  to { transform: translateX(100%); }
}

.page-intro.is-hidden {
  display: none;
}

@media (max-width: 600px) {
  .intro-panel img { width: min(54vw, 270px); }
}

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