/**
 * Dead Malls — trail layer on top of the kit.
 *
 * One bespoke set-piece: the Directory (.scene.dir), a pinned 320vh scene
 * between Chapter III and the tally. A great backlit mall directory board —
 * brushed-aluminum frame, acrylic lightbox strips glowing the warm ivory of
 * a food-court Saturday — powers on strip by strip, fails strip by strip,
 * and relights three, warmer, for the second acts. This file owns the stage
 * and the materials; all scroll choreography and sound live in
 * dead-malls.js. Strip states arrive as CSS custom properties (--lit,
 * --vac, --warm, --board), so nothing here animates on its own except the
 * class-toggled ledger and end line.
 */

/* ── the pinned wrapper ────────────────────────────────────────────────────
   Same contract as the kit-era rose window: the base .scene rules are reset
   so the wrapper can own its 320vh pin with an inner sticky stage. */
.scene.dir {
  display: block;
  min-height: 0;
  height: 320vh;
  padding: 0;
  overflow: visible;
}

.dir-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: #0a090f;
}

/* ── the atrium ────────────────────────────────────────────────────────────
   Dark mall interior around the board: a cool skylight wash overhead (the
   one cool note on the scene), warm floor sheen below, and heavy shadow at
   the edges so the board hangs in a concourse, not on a web page. */
.dir-atrium {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(90% 42% at 50% -8%, rgba(111, 179, 201, 0.07), transparent 62%),
    radial-gradient(120% 38% at 50% 114%, rgba(224, 164, 88, 0.07), transparent 65%),
    linear-gradient(90deg,
      rgba(0, 0, 0, 0.5), transparent 12%,
      transparent 88%, rgba(0, 0, 0, 0.5)),
    linear-gradient(180deg, #07070c 0%, #0b0a11 45%, #100e15 80%, #0a090f 100%);
}

/* ── the board ─────────────────────────────────────────────────────────────
   Brushed-aluminum frame: vertical grain at low opacity over a metal ramp,
   a hard outer shadow, and a recessed cavity the strips sit inside. */
.dir-board {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  width: min(1020px, 88vw);
  height: min(70vh, 720px);
  display: flex;
  flex-direction: column;
  padding: clamp(10px, 1.6vh, 16px) clamp(10px, 1.4vw, 18px);
  border-radius: 8px;
  background:
    repeating-linear-gradient(90deg,
      rgba(255, 255, 255, 0.022) 0 2px,
      transparent 2px 4px),
    linear-gradient(180deg,
      #44474f, #2b2e35 6%, #22252b 50%, #1b1e24 94%, #383b43);
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.65),
    0 4px 18px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);
}

/* ── the header: DIRECTORY · YOU ARE HERE ──────────────────────────────────
   Amber backlit lettering. --board is the board's overall power, driven by
   JS, so the header buzzes up with the strips and sags as they die. */
.dir-head {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 2px 8px clamp(8px, 1.4vh, 14px);
}

.dir-head-word {
  font-family: "Space Mono", monospace;
  font-weight: 700;
  font-size: clamp(13px, 2.5vh, 21px);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: #f3dcae;
  text-shadow:
    0 0 10px rgba(245, 205, 135, 0.8),
    0 0 30px rgba(235, 180, 100, 0.4),
    0 0 60px rgba(230, 165, 85, 0.2);
  opacity: calc(0.16 + var(--board, 0) * 0.84);
}

.dir-head-here {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "Space Mono", monospace;
  font-size: clamp(8px, 1.2vh, 10px);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #cdb288;
  opacity: calc(0.2 + var(--board, 0) * 0.8);
}

.dir-head-here i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e8b96a;
  box-shadow:
    0 0 8px rgba(240, 195, 115, 0.95),
    0 0 20px rgba(230, 170, 90, 0.5);
}

/* ── the strip cavity ────────────────────────────────────────────────────── */
.dir-strips {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(2px, 0.45vh, 5px);
  padding: clamp(6px, 1vh, 10px) clamp(8px, 1.2vw, 14px);
  border-radius: 4px;
  background: #0c0d13;
  box-shadow:
    inset 0 2px 14px rgba(0, 0, 0, 0.8),
    inset 0 0 0 1px rgba(0, 0, 0, 0.6),
    0 1px 0 rgba(255, 255, 255, 0.05);
  /* Directory type lives at this scale; strips inherit it. */
  font-size: clamp(9px, 1.5vh, 13px);
}

/* ── one lightbox strip ────────────────────────────────────────────────────
   Dark acrylic at rest; .s-panel is the warm fluorescent lightbox and
   .s-warm the warmer second-act relight. Both are plain layers whose
   opacity JS drives, so a strip's glow costs one composited fade. */
.strip {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  align-items: center;
  padding: 0 clamp(8px, 1vw, 14px);
  border-radius: 2px;
  background: linear-gradient(180deg, #171922, #101219 55%, #0c0e14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 -1px 0 rgba(0, 0, 0, 0.7),
    0 1px 2px rgba(0, 0, 0, 0.4);
}

.s-panel,
.s-warm {
  position: absolute;
  inset: 0;
  border-radius: 2px;
  pointer-events: none;
}

/* The prime: warm ivory fluorescent, slightly hot in the middle of the
   panel like an old tube, blooming past the acrylic edge. */
.s-panel {
  background:
    radial-gradient(135% 180% at 50% 42%,
      rgba(252, 240, 212, 0.34),
      rgba(244, 222, 176, 0.16) 52%,
      rgba(220, 190, 140, 0.06) 78%,
      transparent),
    linear-gradient(180deg,
      rgba(255, 246, 224, 0.10),
      rgba(255, 244, 220, 0.02) 30%,
      rgba(210, 180, 130, 0.05) 85%,
      rgba(255, 250, 235, 0.08));
  box-shadow:
    0 0 18px rgba(240, 205, 140, 0.28),
    0 0 46px rgba(230, 185, 110, 0.12),
    inset 0 0 10px rgba(255, 244, 214, 0.30),
    inset 0 -6px 12px rgba(120, 80, 30, 0.10);
  opacity: var(--lit, 0);
}

/* Second acts: same lightbox, relamped warmer. */
.s-warm {
  background:
    radial-gradient(135% 180% at 50% 45%,
      rgba(255, 216, 152, 0.42),
      rgba(245, 182, 106, 0.18) 55%,
      transparent 82%);
  box-shadow:
    0 0 26px rgba(255, 190, 115, 0.42),
    0 0 70px rgba(250, 170, 90, 0.16),
    inset 0 0 12px rgba(255, 225, 175, 0.4);
  opacity: var(--warm, 0);
}

/* ── the lettering ─────────────────────────────────────────────────────────
   Changeable-track directory type: mono, tracked out, and each strip gets a
   slightly different squeeze (--cx), tracking (--ls) and lift (--dy) from
   the JS seed, so the board reads hand-set rather than typeset. The base
   glyph is the dead print — dim cream on dark acrylic; the <i> overlay is
   the same glyphs again with the glow, faded by --lit. */
.s-left {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.s-row {
  display: flex;
  align-items: center;
  gap: 1.1em;
  min-width: 0;
}

.s-name {
  position: relative;
  font-family: "Space Mono", monospace;
  font-weight: 700;
  font-size: 1em;
  letter-spacing: var(--ls, 0.18em);
  color: #efdfc0;
  white-space: nowrap;
  opacity: calc(0.2 + var(--lit, 0) * 0.8);
  transform: scaleX(var(--cx, 0.94)) translateY(var(--dy, 0));
  transform-origin: left center;
}

.s-name i {
  position: absolute;
  left: 0;
  top: 0;
  font-style: normal;
  text-shadow:
    0 0 7px rgba(255, 236, 190, 0.95),
    0 0 18px rgba(250, 205, 130, 0.55),
    0 0 34px rgba(240, 180, 100, 0.3);
  opacity: var(--lit, 0);
}

/* The second-act line, under the old name: warmer, smaller, glowing with
   the relight rather than the original tube. */
.s-new {
  font-family: "Space Mono", monospace;
  font-weight: 700;
  font-size: 0.66em;
  letter-spacing: 0.22em;
  color: #ffd9a4;
  white-space: nowrap;
  text-shadow:
    0 0 8px rgba(255, 205, 140, 0.8),
    0 0 22px rgba(250, 175, 95, 0.45);
  opacity: var(--warm, 0);
}

/* The mall, small, at the right edge. It dims with its store. */
.s-mall {
  position: relative;
  z-index: 2;
  margin-left: auto;
  padding-left: 14px;
  font-family: "Space Mono", monospace;
  font-size: 0.6em;
  letter-spacing: 0.26em;
  color: #9d9377;
  white-space: nowrap;
  opacity: calc(0.28 + var(--lit, 0) * 0.72);
}

/* The VACANT tag: a stick-on label, not a neon sign — print red-brown,
   slightly crooked, stamped in where the light was. */
.s-vac {
  flex: 0 0 auto;
  font-family: "Space Mono", monospace;
  font-weight: 700;
  font-size: 0.6em;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(216, 140, 95, 0.92);
  border: 1px solid rgba(216, 140, 95, 0.5);
  border-radius: 1px;
  padding: 1px 4px 1px 7px;
  background: rgba(40, 16, 10, 0.4);
  opacity: var(--vac, 0);
  transform: rotate(-1.4deg) translateY(-0.5px)
    scale(calc(0.92 + var(--vac, 0) * 0.08));
}

/* ── the ledger ──────────────────────────────────────────────────────────── */
.dir-ledger {
  position: absolute;
  left: 8vw;
  bottom: 8vh;
  max-width: 46ch;
  display: flex;
  flex-direction: column;
  gap: 7px;
  pointer-events: none;
}

.dir-ledger .dl-line,
.dir-ledger .dl-sub {
  display: block;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.dir-ledger.show .dl-line,
.dir-ledger.show .dl-sub {
  opacity: 1;
  transform: translateY(0);
}

.dir-ledger .dl-line {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.9);
}

.dir-ledger .dl-line em {
  font-style: normal;
  color: var(--sodium);
}

.dir-ledger .dl-sub {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  transition-delay: 0.35s;
}

/* ── the counter ─────────────────────────────────────────────────────────── */
.dir-count {
  position: absolute;
  right: 8vw;
  bottom: 8vh;
  display: flex;
  align-items: baseline;
  gap: 10px;
  pointer-events: none;
}

.dir-count b {
  font: 700 26px/1 "Space Mono", monospace;
  color: var(--sodium);
  min-width: 2ch;
  text-align: right;
  text-shadow: 0 0 18px rgba(224, 164, 88, 0.35);
}

.dir-count span {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── the end line ────────────────────────────────────────────────────────── */
.dir-end {
  position: absolute;
  left: 50%;
  bottom: 13vh;
  transform: translate(-50%, 8px);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.7rem, 3.6vw, 2.8rem);
  color: var(--paper);
  white-space: nowrap;
  text-shadow: 0 0 24px rgba(224, 164, 88, 0.35);
  opacity: 0;
  transition: opacity 1.1s ease, transform 1.1s ease;
  pointer-events: none;
}

.dir-end.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ── mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .scene.dir {
    height: 300vh;
  }

  .dir-board {
    top: 40%;
    width: 94vw;
    height: 70vh;
    border-radius: 6px;
  }

  .dir-head-word {
    letter-spacing: 0.3em;
  }

  .dir-head-here {
    letter-spacing: 0.2em;
  }

  /* Long names plus the VACANT tag fill a 390px strip on their own. */
  .s-mall {
    display: none;
  }

  /* Ledger and counter stack along the bottom edge; the mute pill sits at
     bottom-left on the kit, so the ledger rides above it, as on the rose. */
  .dir-ledger {
    left: 22px;
    right: 22px;
    bottom: 12vh;
    max-width: none;
  }

  .dir-ledger .dl-line {
    font-size: 10px;
    letter-spacing: 0.12em;
  }

  .dir-ledger .dl-sub {
    font-size: 9px;
  }

  .dir-count {
    right: 22px;
    bottom: 6.5vh;
  }

  .dir-count b {
    font-size: 20px;
  }

  .dir-end {
    bottom: 20vh;
    font-size: 1.5rem;
  }
}