/* ─── Train Journey Lobby ──────────────────────────────────────────────────── */

.trn {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #050508;
}

.trn__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ── Interior frame overlay — sits above doors, always in foreground ─────────── */

.trn__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  z-index: 30;
  user-select: none;
}

/* ── Door panels ─────────────────────────────────────────────────────────────── */

.trn__doors {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
}

.trn__door {
  position: absolute;
  top: 0;
  height: 100%;
  width: 50%;
  transition: transform 2400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  user-select: none;
}

.trn__door img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  display: block;
  user-select: none;
}

.trn__door--left  { left:  0; }
.trn__door--right { right: 0; }

/* CSS fallback when no door PNG is provided */
.trn__doors--css .trn__door--left {
  background: linear-gradient(
    to right,
    #0a0a16 0%,
    #0d0d1c 80%,
    rgba(10,10,22,0.35) 94%,
    transparent 100%
  );
  border-right: 2px solid #1c1c2a;
}

.trn__doors--css .trn__door--right {
  background: linear-gradient(
    to left,
    #0a0a16 0%,
    #0d0d1c 80%,
    rgba(10,10,22,0.35) 94%,
    transparent 100%
  );
  border-left: 2px solid #1c1c2a;
}

/* Doors open state */
.trn__doors--open .trn__door--left  { transform: translateX(-100%); }
.trn__doors--open .trn__door--right { transform: translateX( 100%); }

/* ── Zoom overlay — expands from doorway center on room entry ────────────────── */

.trn__zoom-overlay {
  position: fixed;
  inset: 0;
  background-color: #0a0a12; /* overridden by JS with room's wall color */
  transform: scale(0);
  opacity: 0;
  z-index: 9999; /* above everything, persists through navigation */
  pointer-events: none;
}

/* ── Hint text ───────────────────────────────────────────────────────────────── */

.trn__hint {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(201, 185, 154, 0.5);
  font-family: 'Raleway', sans-serif;
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  pointer-events: none;
  z-index: 15;
  opacity: 0;
  transition: opacity 0.7s ease;
  white-space: nowrap;
}