/* THE HALLWAY — the numbers on these doors are for the building, not you. */

:root {
  --hw-wall: #3a2f3e;
  --hw-wall-dark: #241c28;
  --hw-line: #6a5a70;
}

html.hallway-html { scroll-behavior: auto; }

body.hallway {
  margin: 0;
  background: var(--hw-wall-dark);
  color: #e8dce8;
  overflow: hidden;
}

.corridor-intro {
  position: fixed;
  top: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  text-align: center;
  max-width: 36ch;
  font-size: 0.75rem;
  opacity: 0.7;
}
.corridor-intro .placard {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.7rem;
  opacity: 0.7;
}

.corridor {
  display: flex;
  width: 100vw;
  height: 100vh;
  overflow-x: scroll;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}

.bay {
  flex: 0 0 100vw;
  height: 100vh;
  scroll-snap-align: start;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, var(--hw-wall) 0%, var(--hw-wall) 38%, #2c2430 38%, #2c2430 62%, var(--hw-wall) 62%, var(--hw-wall) 100%);
}

/* converging perspective lines top and bottom, suggesting a corridor
   that keeps going past both ends of the screen */
.bay::before,
.bay::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 38%;
  background-image: repeating-linear-gradient(
    100deg,
    transparent 0 60px,
    var(--hw-line) 60px 61px
  );
  opacity: 0.25;
}
.bay::before { top: 0; }
.bay::after { bottom: 0; transform: scaleY(-1); }

/* click the wall itself (not a door) and the lights stutter */
.bay.bay-flicker {
  animation: bay-flicker-kf 0.35s steps(3);
}
@keyframes bay-flicker-kf {
  0%, 100% { filter: brightness(1); }
  25% { filter: brightness(0.4); }
  50% { filter: brightness(1.3); }
  75% { filter: brightness(0.6); }
}

.bay .door-big {
  width: min(50vw, 240px);
  height: min(70vh, 380px);
  background: linear-gradient(180deg, #5a4a5e, #3a2f3e);
  border: 3px solid #1a1420;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.3s ease, filter 0.3s ease;
}
.bay .door-big:hover { transform: scale(1.02); filter: brightness(1.1); }

.bay .door-number {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 3rem;
  opacity: 0.85;
}

.bay .knob {
  position: absolute;
  right: 16px;
  top: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #14101a;
}

.bay-index {
  position: absolute;
  bottom: 3rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.62;
}

.scroll-hint {
  position: fixed;
  bottom: 1.5rem;
  right: 2rem;
  z-index: 10;
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.7;
  animation: nudge 2s ease-in-out infinite;
}
@keyframes nudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(6px); }
}