/* ui.css — Gikambura Walk: layout of the overlays over the fixed canvas (loader, hero, title block, caption, room card,
   ruler, counter, hint + progress line, veil, finale, no-WebGL fallback) and the 2400vh scroll track. Holds at 400 px. */

/* ---- Lenis ---- */
html.lenis, html.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

html, body { overscroll-behavior-y: none; }
#track { position: relative; height: 2400vh; pointer-events: none; }
#gl { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; z-index: 0; touch-action: pan-y; }

/* every overlay sits on the canvas and never catches the pointer (links re-enable it) */
.ov { position: fixed; z-index: 2; pointer-events: none; }
.ov a { pointer-events: auto; }

/* ---- loader ---- */
#loader {
  position: fixed; inset: 0; z-index: 10;
  background: var(--paper);
  display: grid; place-items: center;
  transition: opacity 0.7s var(--ease), visibility 0.7s;
}
#loader.done { opacity: 0; visibility: hidden; }
#loader .box { width: min(440px, 82vw); }
#loader .kicker { margin-bottom: 14px; }
#loader h1 { font-size: clamp(28px, 4vw, 44px); line-height: 1; margin-bottom: 26px; }
#loader .bar { height: 2px; background: var(--rule-2); overflow: hidden; }
#loader .bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width 0.25s linear; }
#loader .label { margin-top: 10px; font: 400 11px/1.4 var(--font-mono); letter-spacing: 0.06em; color: var(--ink-3); display: flex; justify-content: space-between; }

/* ---- hero (left, over the sheet) ---- */
#hero {
  left: var(--gutter); top: clamp(26px, 11vh, 120px);
  width: min(400px, 28vw);          /* narrow enough that the title stacks "The plan / is the / house." and the column clears the sheet's west grid bubbles */
  will-change: opacity, transform;
}
#hero h1 {
  font-size: clamp(42px, 6.4vw, 96px);
  line-height: 0.95;
  margin: 12px 0 20px;
  letter-spacing: -0.04em;
}
#hero h1 em { font-size: 1.04em; }
#hero .lede { font: 400 15px/1.6 var(--font-mono); color: var(--ink-2); max-width: 38ch; }

/* ---- title block (bottom-right of the sheet) ---- */
#titleblock {
  right: clamp(16px, 3vw, 44px); bottom: clamp(16px, 4vh, 40px);
  display: grid; grid-template-columns: max-content 1fr;
  min-width: 320px;
  border: 1px solid var(--ink);
  background: var(--card);
  font: 400 11px/1.3 var(--font-mono);
  box-shadow: 0 1px 0 var(--ink), 0 14px 40px rgba(27, 27, 31, 0.08);
  will-change: opacity, transform;
}
#titleblock > div { padding: 7px 12px; border-bottom: 1px solid var(--rule); }
#titleblock > div:nth-last-child(-n + 2) { border-bottom: 0; }
#titleblock .k { color: var(--ink-3); letter-spacing: 0.12em; text-transform: uppercase; font-size: 9.5px; border-right: 1px solid var(--rule); }
#titleblock .v { font-weight: 500; }
#titleblock .v b { font-weight: 600; color: var(--accent); }

/* ---- rise caption ---- */
#caption {
  left: 50%; bottom: 13vh; transform: translateX(-50%);
  width: min(760px, 86vw); text-align: center;
  font: italic 400 clamp(20px, 2.4vw, 32px)/1.3 var(--font-serif);
  color: var(--ink);
  opacity: 0;
}
#caption b { font: 500 0.42em/1 var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); display: block; margin-bottom: 12px; font-style: normal; }

/* ---- room card ---- */
#card {
  left: var(--gutter); bottom: clamp(56px, 10vh, 96px);
  width: min(390px, 86vw);
  background: var(--card);
  border-left: 3px solid var(--accent);
  padding: 18px 22px 20px;
  box-shadow: 0 12px 44px rgba(27, 27, 31, 0.14), 0 1px 0 rgba(27, 27, 31, 0.08);
  transform: translateY(26px); opacity: 0;
  transition: transform 0.5s var(--ease), opacity 0.4s var(--ease);
  will-change: transform, opacity;
}
#card.on { transform: none; opacity: 1; }
.card-eyebrow { display: flex; gap: 10px; align-items: baseline; }
.card-eyebrow .n { color: var(--ink); }
.card-title { font-size: 29px; line-height: 1.02; margin: 10px 0 8px; }
.card-meta { font: 500 12px/1.5 var(--font-mono); color: var(--accent); letter-spacing: 0.02em; }
.card-facts { list-style: none; margin: 12px 0 0; padding: 0; }
.card-facts li { position: relative; padding: 7px 0 7px 18px; border-top: 1px solid var(--rule-2); font: 400 12.5px/1.5 var(--font-mono); color: var(--ink-2); }
.card-facts li::before { content: ""; position: absolute; left: 0; top: 16px; width: 8px; height: 1px; background: var(--accent); }

/* ---- ruler (right edge) ---- */
#ruler { right: clamp(10px, 2vw, 28px); top: 10vh; height: 80vh; width: 56px; }
#ruler .line { position: absolute; right: 14px; top: 0; bottom: 0; width: 1px; background: var(--rule); }
#ruler .tick { position: absolute; right: 10px; width: 9px; height: 1px; background: var(--ink-3); }
#ruler .tick.key { width: 14px; background: var(--ink); }
#ruler .tick.on { background: var(--accent); height: 2px; margin-top: -0.5px; }
#ruler .tick b { position: absolute; right: 22px; top: -6px; font: 500 9px/1 var(--font-mono); letter-spacing: 0.1em; color: var(--ink-3); white-space: nowrap; }
#ruler .tick.on b { color: var(--accent); }
#ruler .marker { position: absolute; right: 4px; width: 21px; height: 2px; background: var(--accent); margin-top: -1px; }
#ruler .marker::after { content: ""; position: absolute; right: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }

/* ---- counter ---- */
#counter {
  left: var(--gutter); bottom: clamp(16px, 3.6vh, 36px);
  font: 500 11px/1 var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2);
}
#counter b { font-weight: 600; color: var(--accent); }

/* ---- hint + progress line ---- */
#hint {
  left: 50%; bottom: 6vh; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  font: 500 11px/1 var(--font-mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-2);
}
#hint span { background: var(--paper); padding: 5px 10px; box-shadow: 0 0 0 4px var(--paper); }
#hint .line { width: 1px; height: 40px; background: var(--ink); transform-origin: top; animation: hintPulse 1.8s var(--ease) infinite; }
@keyframes hintPulse { 0% { transform: scaleY(0); opacity: 0; } 40% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1) translateY(10px); opacity: 0; } }
#progress { top: 0; left: 0; right: 0; height: 2px; z-index: 3; }
#progress i { display: block; height: 100%; width: 0; background: var(--accent); }

/* ---- veil + finale ---- */
#veil { inset: 0; background: var(--paper); opacity: 0; z-index: 4; }
#finale { inset: 0; z-index: 5; display: grid; place-items: center; text-align: center; padding: 0 24px; opacity: 0; }
#finale .inner { max-width: 820px; }
#finale h2 { font-size: clamp(42px, 7.4vw, 104px); line-height: 0.95; letter-spacing: -0.04em; }
#finale .body { font: 400 15px/1.65 var(--font-mono); color: var(--ink-2); max-width: 62ch; margin: 26px auto 24px; }
#finale .meta { font: 500 10.5px/1.7 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
#finale .meta b { color: var(--accent); font-weight: 600; }

/* ---- no WebGL ---- */
#nowebgl { position: fixed; inset: 0; z-index: 20; background: var(--paper); overflow: auto; padding: 10vh var(--gutter); }
#nowebgl .inner { max-width: 720px; }
#nowebgl h1 { font-size: clamp(36px, 6vw, 72px); line-height: 0.95; margin: 12px 0 18px; }
#nowebgl p { font: 400 14px/1.65 var(--font-mono); color: var(--ink-2); margin: 0 0 14px; }
#nowebgl .note { padding: 12px 14px; border-left: 3px solid var(--accent); background: var(--card); }

/* ---- responsive ---- */
@media (max-width: 1100px) {
  #titleblock { min-width: 280px; }
}
@media (max-width: 820px) {
  #hero { width: 82vw; top: 9vh; }
  #hero h1 { font-size: clamp(34px, 11vw, 58px); }
  #hero .lede { font-size: 13px; }
  #titleblock { min-width: 0; right: 14px; bottom: 14px; font-size: 10px; }
  #titleblock .opt { display: none; }
  #ruler { display: none; }
  #card { left: 14px; right: 14px; width: auto; bottom: 58px; padding: 14px 16px 16px; }
  .card-title { font-size: 23px; }
  .card-facts li { font-size: 12px; padding: 6px 0 6px 16px; }
  #counter { left: 14px; bottom: 18px; }
  #caption { font-size: 19px; width: 88vw; bottom: 16vh; }
  #hint { bottom: 8vh; }
  #finale .body { font-size: 13.5px; }
}
@media (max-width: 480px) {
  #hero { top: 8vh; }
  #hero h1 { font-size: clamp(32px, 12vw, 48px); }
  #titleblock { grid-template-columns: max-content 1fr; }
  #titleblock > div { padding: 5px 8px; }
  .card-facts li:nth-child(n + 4) { display: none; }
}
@media (max-height: 520px) {
  #hero { top: 6vh; }
  #hero h1 { font-size: clamp(30px, 6vw, 48px); margin: 8px 0 10px; }
  #card { bottom: 44px; }
  .card-facts li:nth-child(n + 3) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  #hint .line { animation: none; }
  #card { transition: none; }
}

/* (7 Nov) landscape screens: the hint lives in the hero column (paper, clear of the drawing) instead of over the plan's
   south edge, where it sat on the RAIN TANK label */
@media (min-aspect-ratio: 5/4) {
  #hint { left: var(--gutter); transform: none; align-items: flex-start; bottom: 15vh; }
}

/* (7 Nov) legibility over the 3D frames, the per-stop card side, the hero's paper panel */
#card.right { left: auto; right: calc(clamp(10px, 2vw, 28px) + 66px); }
#counter { background: rgba(239, 233, 220, 0.84); padding: 5px 9px; margin-left: -9px; border-radius: 2px; }
#ruler .tick b { text-shadow: 0 0 3px var(--paper), 0 0 6px var(--paper), 0 0 9px var(--paper); }
#caption { text-shadow: 0 0 4px var(--paper), 0 0 10px var(--paper), 0 0 18px var(--paper), 0 0 30px var(--paper); }
#hero::before { content: ''; position: absolute; inset: -28px -56px -28px -40px; z-index: -1;
  background: radial-gradient(ellipse at 42% 50%, rgba(239, 233, 220, 0.96) 56%, rgba(239, 233, 220, 0) 80%); }
#titleblock { right: calc(clamp(16px, 3vw, 44px) + 58px); }
@media (max-width: 820px) {
  #card.right { left: 14px; right: 14px; }
  #card .card-facts li:nth-child(n + 2) { display: none; }
  #titleblock { right: clamp(16px, 3vw, 44px); }
}
/* (7 Nov) the rise caption lives in the empty upper left on landscape screens (it sat on the building's corner) */
@media (min-aspect-ratio: 5/4) {
  #caption { left: var(--gutter); top: 13vh; bottom: auto; transform: none; text-align: left; width: min(560px, 42vw); }
}
/* (7 Nov) the closing copy sits on a paper plate over the aerial (it lay across the roofs) */
#finale .inner { background: rgba(239, 233, 220, 0.92); padding: clamp(24px, 4vw, 48px) clamp(24px, 5vw, 64px); box-shadow: 0 18px 60px rgba(27, 27, 31, 0.16); }