/* ENTRY HALL — Level 0 energy. Drab, humming, almost-right. */

@property --flicker {
  syntax: '<number>';
  inherits: true;
  initial-value: 1;
}

:root {
  --wall: #d9cf9e;
  --wall-dark: #b8ac78;
  --carpet-a: #9c8a3f;
  --carpet-b: #8a7a38;
  --light: #f2edc9;
  --ink: #3a3624;
}

body.entry {
  background: var(--wall);
  color: var(--ink);
  min-height: 100vh;
  position: relative;
}

/* the humming fluorescent wash over everything */
body.entry::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  background: radial-gradient(ellipse at 50% -10%, var(--light) 0%, transparent 60%);
  filter: brightness(var(--flicker));
  animation: hum 6s infinite steps(24);
  mix-blend-mode: multiply;
}

@keyframes hum {
  0%, 100% { --flicker: 1; }
  4% { --flicker: 0.7; }
  5% { --flicker: 1; }
  38% { --flicker: 1; }
  39% { --flicker: 0.55; }
  40% { --flicker: 0.9; }
  41% { --flicker: 1; }
  70% { --flicker: 1; }
  71% { --flicker: 0.6; }
  73% { --flicker: 1; }
}

/* the wall zone: everything above the floor line. doors are the last
   thing in it, pinned to the bottom edge so they read as built into the
   wall rather than centered arbitrarily over empty space. the gap is
   clamped rather than stretched with justify-content: space-between —
   that stretched the copy-to-doors distance to whatever a tall viewport
   happened to leave empty, sometimes most of a screen's worth. */
.hall {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  padding: 4rem 1.5rem 0;
  gap: clamp(2.5rem, 10vh, 6rem);
}

.wall-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

.hall h1 {
  font-family: Georgia, serif;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.8rem, 5vw, 3.2rem);
  letter-spacing: 0.04em;
  text-shadow: 0 0 18px rgba(242, 237, 201, 0.8);
}

.hall .subhead {
  max-width: 34ch;
  font-size: 0.85rem;
  opacity: 0.75;
  letter-spacing: 0.05em;
}

/* the baseboard — the actual seam between wall and floor. doors sit
   right above this; the carpet starts right after it. */
.baseboard {
  position: relative;
  z-index: 2;
  height: 12px;
  background: linear-gradient(180deg, var(--wall-dark), #6b6038);
  border-top: 1px solid rgba(0, 0, 0, 0.35);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* endless carpet floor, tiled diamond pattern that quietly scrolls —
   now a normal block sitting right under the baseboard, not a fixed
   layer floating independently behind the content */
.carpet {
  position: relative;
  z-index: 1;
  height: 38vh;
  overflow: hidden;
  background-image:
    repeating-linear-gradient(45deg, var(--carpet-a) 0 20px, var(--carpet-b) 20px 40px),
    repeating-linear-gradient(-45deg, var(--carpet-a) 0 20px, transparent 20px 40px);
  background-size: 80px 80px;
  animation: drift 40s linear infinite;
  transform: perspective(500px) rotateX(55deg) scale(1.4);
  transform-origin: top;
}

@keyframes drift {
  from { background-position: 0 0, 0 0; }
  to { background-position: -400px 0, 400px 0; }
}

.carpet::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.25) 0%, transparent 12%);
}

/* a corridor of doors, none of them the way out — one row, always,
   never wrapping. a wrapped second row would float free of the
   baseboard below, undoing the whole point of grounding them there.
   narrow viewports scroll sideways instead, same as the Hallway room. */
.doors {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 2.5rem;
  flex-wrap: nowrap;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  /* overflow-x: auto forces overflow-y to auto too (mismatched overflow
     axes aren't allowed per spec) — that would clip the hover lift and
     the contact shadow's blur without this padding to give them room */
  padding: 14px 1.5rem 26px;
  margin-bottom: -26px;
}
.doors .door {
  flex: 0 0 auto;
}

.door {
  width: 140px;
  height: 220px;
  background: linear-gradient(180deg, var(--wall-dark), #8f8352);
  border: 3px solid var(--ink);
  border-bottom-width: 4px;
  border-radius: 3px 3px 0 0;
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 2.75rem;
  cursor: pointer;
  transition: filter 0.3s ease, box-shadow 0.3s ease;
  /* a contact shadow, grounding the door against the floor it's
     standing at the edge of — not just a flat rectangle on a wall */
  box-shadow: 0 10px 14px -6px rgba(20, 16, 5, 0.55);
}

.door:hover {
  /* no lift — a door mounted in a wall doesn't float up when you look
     at it. brightness + a slightly deeper contact shadow is enough. */
  filter: brightness(1.08);
  box-shadow: 0 12px 16px -6px rgba(20, 16, 5, 0.6);
}

/* real paint, not the wall's own drab tone — the two rooms you're
   actually allowed to walk into get an honest coat of color */
.doors .door:nth-child(1) {
  background: linear-gradient(180deg, #2f9188, #155852);
  border-color: #0c332f;
}
.doors .door:nth-child(2) {
  background: linear-gradient(180deg, #cf5a34, #8f3319);
  border-color: #521a0c;
}

/* the knob — a backplate, a brass core with a real light source, and a
   keyhole, instead of one flat dot standing in for all of it */
.door .knob {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
}
.door .knob::before {
  /* backplate/rosette, sitting behind the knob itself */
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  background: linear-gradient(155deg, #7a6224, #3a2d0c);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}
.door .knob {
  background: radial-gradient(circle at 35% 30%, #f6e6ab 0%, #cda12e 40%, #8a6a17 75%, #55400c 100%);
  border: 1px solid #2e2308;
  box-shadow:
    0 2px 3px rgba(0, 0, 0, 0.6),
    inset 0 1px 1px rgba(255, 255, 255, 0.55),
    inset 0 -2px 2px rgba(0, 0, 0, 0.45);
}
.door .knob::after {
  /* the keyhole */
  content: '';
  position: absolute;
  top: 62%;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 5px;
  background: #241a05;
  border-radius: 1px;
  box-shadow: 0 -2px 0 -0.5px #241a05;
}

/* the plaque — a small mounted placard near the top of the door,
   centered, not text just sitting loose on the surface */
.door .label {
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--light);
  text-align: center;
  padding: 0.35rem 0.6rem;
  background: rgba(20, 16, 5, 0.35);
  border: 1px solid rgba(20, 16, 5, 0.5);
  border-radius: 2px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* exit signs that point nowhere useful */
.exit-sign {
  position: fixed;
  top: 2rem;
  font-family: Arial, sans-serif;
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: #f4d9d9;
  background: #7a1f1f;
  padding: 0.4rem 0.9rem;
  border: 2px solid #4a1010;
  z-index: 6;
  animation: sign-buzz 8s infinite;
  opacity: 0.85;
}
.exit-sign.left { left: 2rem; transform: rotate(-2deg); cursor: pointer; }
.exit-sign.right { right: 2rem; transform: rotate(1.5deg); cursor: pointer; }

/* click a sign, it stops lying for a second */
.egg-toggle { position: absolute; opacity: 0; pointer-events: none; }

body:has(#exit-l:checked) .exit-sign.left,
body:has(#exit-r:checked) .exit-sign.right {
  color: transparent;
  animation: sign-jolt 0.3s;
}
body:has(#exit-l:checked) .exit-sign.left::after,
body:has(#exit-r:checked) .exit-sign.right::after {
  content: 'NO EXIT';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
@keyframes sign-jolt {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-2px); }
  75% { transform: translateX(2px); }
}

@keyframes sign-buzz {
  0%, 96%, 100% { opacity: 0.85; }
  97% { opacity: 0.3; }
  98% { opacity: 0.85; }
}

/* the curator's note — real hint text, easy to miss */
.placard.hint {
  position: relative;
  z-index: 2;
  max-width: 40ch;
  font-size: 0.75rem;
  opacity: 0.72;
  margin-top: 1rem;
}

/* text the same color as the wall — invisible until dragged over.
   the selection colors are the only place it's readable. */
.veiled {
  color: var(--wall);
  -webkit-text-fill-color: var(--wall);
}
.veiled::selection {
  color: var(--ink);
  background: var(--light);
}

/* the third door. no label, no knob offset to match the others —
   it just doesn't belong in this hallway. */
.door.unlabeled {
  background: linear-gradient(180deg, #8f8352, #6b6038);
  filter: saturate(0.7);
}
.door.unlabeled .knob { background: #1a1710; }
.door.unlabeled .label { opacity: 0.4; }