/* ————————————————————————————————————————
   sonARe — rooms.css
   the chrome every room shares: tokens, night ink, hud corners,
   ruler + marker, intro / fallback / ending, the log voice.
   a room's own piece.css adds only what is specific to that room.

   tokens
   · porcelain           the ink; porcelain-dim / -faint are its two quieter steps
   · signal              the one colour that means "this is on" — never decoration
   · signal-rgb          the same colour as bare channels, for rgba() and canvas/GL
   · hairline            the menu rule, .08 — matched to the homepage
   · rule                the instrument rule (ruler, ticks), .22 — it sits at 32% opacity
   letter-spacing uses two values only: .08em on labels, .14em on the station / scale mark.
———————————————————————————————————————— */

:root{
  --black:#000;
  --porcelain:#eaedef;
  --porcelain-dim:rgba(234,237,239,.6);
  --porcelain-faint:rgba(234,237,239,.5);
  --hairline:rgba(255,255,255,.08);
  --rule:rgba(255,255,255,.22);
  --signal:#9fd8d4;
  --signal-rgb:159,216,212;
  --signal-dim:rgba(var(--signal-rgb),.4);
  --serif:"Newsreader","Iowan Old Style",Georgia,serif;
  --sans:"Switzer","Helvetica Neue",-apple-system,sans-serif;
  --mono:"Fragment Mono","SF Mono",ui-monospace,Menlo,monospace;
  --tick:150ms linear;
  --track:.08em;
  --track-mark:.14em;

  /* older room vocabulary — aliases, so every room reads the same ink */
  --ink:rgba(234,237,239,.88);
  --ink-dim:var(--porcelain-dim);
  --ink-faint:var(--porcelain-faint);
}

/* after 21:00 the ink warms — night.js flips the class */
body.night{
  --porcelain:#ece4d3;
  --porcelain-dim:rgba(236,228,211,.6);
  --porcelain-faint:rgba(236,228,211,.5);
  --ink:rgba(236,228,211,.88);
  --signal:#dcb98c;
  --signal-rgb:220,185,140;
}

*{box-sizing:border-box;}
html,body{
  margin:0;height:100%;background:var(--black);color:var(--ink);
  font-family:var(--sans);
  overscroll-behavior:none;-webkit-tap-highlight-color:transparent;
}
::selection{background:var(--signal-dim);color:var(--black);}

#stage{
  position:fixed;inset:0;overflow:hidden;outline:none;
  touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
}
canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;}

/* ————— hud — an instrument face: mono, lowercase, two corners ————— */
.hud{
  position:absolute;inset:0;pointer-events:none;
  font-family:var(--mono);font-weight:400;letter-spacing:var(--track);
  text-transform:lowercase;font-size:11px;
}
.hud::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(rgba(0,0,0,.30),transparent 16%,transparent 80%,rgba(0,0,0,.40));
}
.corner{position:absolute;padding:18px 20px;}
.tl{top:42px;left:0;padding:16px 18px;}
.tr{top:42px;right:0;padding:16px 18px;text-align:right;}
/* the log sits centre-screen, below the middle */
.bl{
  left:0;right:0;bottom:auto;top:62%;max-width:none;padding:0 10vw;
  display:flex;justify-content:center;text-align:center;
}

/* the readout — a room's number, small by default; a room may make it the headline */
.depth{
  font-family:var(--mono);font-weight:400;text-transform:lowercase;letter-spacing:0;
  font-size:clamp(13px,1.8vw,18px);line-height:1;color:var(--ink-dim);
  font-variant-numeric:tabular-nums;opacity:.62;text-shadow:0 1px 14px rgba(0,0,0,.75);
}
.depth small{font-size:.72em;letter-spacing:var(--track);color:var(--ink-dim);opacity:.7;}

/* the station — the one scale mark under the number */
.zone{
  display:block;margin-top:6px;font-size:10px;letter-spacing:var(--track-mark);
  color:var(--ink-dim);opacity:.6;text-shadow:0 1px 12px rgba(0,0,0,.7);
}
/* the live numbers — tabular, no tracking: they must line up */
.meta{
  color:var(--ink-dim);line-height:1.8;font-size:10px;letter-spacing:var(--track);
  font-variant-numeric:tabular-nums;opacity:.55;text-shadow:0 1px 12px rgba(0,0,0,.7);
}

/* story lines — serif, centred, arriving like breath */
.log{
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(16px,2.0vw,22px);letter-spacing:0;text-transform:none;
  line-height:1.5;color:var(--porcelain);max-width:40ch;
}
.log p{margin:0;opacity:0;transition:opacity 1.2s ease;text-shadow:0 1px 18px rgba(0,0,0,.85);}
.log p.in{opacity:.92;}

/* ————— chrome ————— */
.brand-bar{
  position:fixed;top:0;left:0;right:0;height:52px;
  border-bottom:1px solid var(--hairline);z-index:4;pointer-events:none;
}
.home-link{
  position:fixed;top:14px;left:24px;z-index:6;
  font-family:var(--sans);font-weight:300;font-size:22px;line-height:1;
  letter-spacing:-.035em;text-transform:none;opacity:.92;
  color:var(--porcelain);text-decoration:none;
  text-shadow:0 1px 12px rgba(0,0,0,.75);transition:opacity var(--tick),color var(--tick);
}
.home-link .ar{font-weight:400;}
.home-link:hover{opacity:1;color:var(--porcelain);}

#langToggle{
  position:fixed;bottom:1rem;right:18px;z-index:6;
  font-family:var(--mono);font-weight:400;font-size:.62rem;letter-spacing:var(--track);
  text-transform:lowercase;opacity:.5;background:none;border:0;color:var(--ink-dim);
  cursor:pointer;pointer-events:auto;transition:opacity var(--tick);
}
#langToggle:hover{opacity:1;color:var(--ink);}

/* ————— the ruler — the room's one axis; a room decides which edge ————— */
.ruler{
  position:absolute;top:52px;left:32px;height:calc(100% - 52px);width:1px;
  background:linear-gradient(var(--rule),transparent 60%);
  opacity:.32;pointer-events:auto;cursor:ns-resize;
}
.tick{position:absolute;right:0;width:9px;height:1px;background:var(--rule);}
/* the marker — a level-meter needle; it glows only because it is live */
.marker{
  position:absolute;right:-4px;width:9px;height:9px;margin-top:-4px;
  border:1px solid var(--signal);border-radius:50%;
  background:rgba(var(--signal-rgb),.12);box-shadow:0 0 10px rgba(var(--signal-rgb),.4);
  transition:top var(--tick);pointer-events:none;
}

/* ————— intro ————— */
.intro{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;gap:14px;
  transition:opacity 1.4s ease;
}
.intro.gone{opacity:0;pointer-events:none;}
.title{
  font-family:var(--sans);font-weight:300;font-size:clamp(40px,10vw,96px);
  letter-spacing:-.03em;line-height:1.04;margin:0;text-transform:lowercase;color:var(--porcelain);
}
.sub{
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(16px,2.6vw,21px);color:var(--ink);opacity:.85;
}
.hint{
  font-family:var(--mono);font-weight:400;font-size:11px;text-transform:lowercase;
  letter-spacing:var(--track);color:var(--ink-dim);margin-top:18px;
  max-width:min(84vw,52ch);line-height:1.7;
  animation:pulse 3.4s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:.4}50%{opacity:.9}}

/* ————— fallback (no webgl) ————— */
.fallback{
  position:absolute;inset:0;display:none;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:24px;gap:18px;
}
.fallback p{
  font-family:var(--serif);font-style:italic;max-width:30ch;
  color:var(--ink-dim);line-height:1.5;
}
.note-mono{font-family:var(--mono);font-style:normal;font-size:11px;letter-spacing:var(--track);}

/* ————— ending ————— */
.ending{
  position:absolute;left:0;right:0;bottom:9%;z-index:5;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:16px;padding:0 24px;opacity:0;pointer-events:none;transition:opacity 2.2s ease;
}
.ending.show{opacity:1;pointer-events:auto;}
.ending .efin{
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(16px,2.4vw,22px);color:var(--porcelain);
  max-width:34ch;line-height:1.55;text-shadow:0 1px 18px rgba(0,0,0,.85);
}
.ending .elinks{
  display:flex;gap:24px;flex-wrap:wrap;justify-content:center;
  font-family:var(--mono);font-size:11px;letter-spacing:var(--track);text-transform:lowercase;
}
.ending .elinks a,.ending .elinks button{
  color:var(--ink-dim);text-decoration:none;background:none;border:0;cursor:pointer;
  font:inherit;letter-spacing:inherit;transition:color .2s;
}
.ending .elinks a:hover,.ending .elinks button:hover{color:var(--porcelain);}

/* ————— cue — the small arrow that says "this moves" ————— */
.cue{
  position:fixed;left:50%;bottom:6%;transform:translateX(-50%);z-index:5;
  width:24px;height:24px;color:var(--ink-dim);opacity:0;pointer-events:none;
  transition:opacity 1.1s ease;
}
.cue svg{width:100%;height:100%;display:block;}
.cue.show{opacity:.42;animation:cuebob 2.8s ease-in-out infinite;}
@keyframes cuebob{0%,100%{transform:translateX(-50%) translateY(-3px);}50%{transform:translateX(-50%) translateY(5px);}}
@keyframes cuering{0%,100%{transform:translateX(-50%) scale(.92);}50%{transform:translateX(-50%) scale(1.08);}}

/* ————— language + a11y plumbing ————— */
.vis-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
html[lang="en"] [data-l="de"]{display:none!important}
html[lang="de"] [data-l="en"]{display:none!important}

/* ————— reduced motion + small screens ————— */
@media (prefers-reduced-motion:reduce){
  .hint{animation:none;}
  .cue.show{animation:none;}
  .ending{transition:opacity .01s;}
}
@media (max-width:560px){
  .corner{padding:13px 14px;}
  .depth{font-size:14px;}
  .meta{font-size:9px;}
  .bl{top:58%;padding:0 7vw;}
  .log{font-size:15px;letter-spacing:0;}
  .home-link{top:15px;left:16px;font-size:19px;}
}