/* kaikode — base: tokens, loader, header, story track. Brand: Rethink Sans only; the pixel is the one device. */
:root {
  --night: #1A2152; --night-deep: #0E1230; --indigo: #4257E0; --periwinkle: #AEB9FF; --paper: #F7F7F5;
  --kaolin: #ECE5D8; --mist: #E8EBF8; --ink: #14161B; --ink-muted: #555A66; --line: #DCDEE5; --line-strong: #767C90;
  --sans: "Rethink Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html { background: var(--night-deep); }
body { margin: 0; color: var(--paper); font-family: var(--sans); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* the pixel: the brand square, blinking like a cursor (1.06 s, steps(2)); solid when motion is reduced */
.px { display: inline-block; width: .32em; height: .32em; background: var(--periwinkle); vertical-align: baseline; margin-left: .08em; }
.px.blink { animation: px-blink 1.06s steps(2, start) infinite; }
@keyframes px-blink { to { visibility: hidden; } }
.reduce-motion .px.blink { animation: none; }

#scene { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100lvh; display: block; z-index: 0; }
.track { position: relative; z-index: 1; pointer-events: none; }
.chapter { height: 140vh; }
.chapter[data-chapter="screen"] { height: 60vh; }
.chapter[data-chapter="hold"] { height: 40vh; }
.chapter[data-chapter="modern"] { height: 220vh; }
.chapter[data-chapter="tech"] { height: 80vh; }
.chapter[data-chapter="push"] { height: 70vh; }
.chapter[data-chapter="os"] { height: 100vh; }
.chapter[data-chapter="live"] { height: 30vh; }
.chapter[data-chapter="exit"] { height: 70vh; }
.chapter.end { height: 50vh; }
/* vh timeline: screen 0–60 · room –200 · hold –240 · modern –460 · tech –540 · push –610 · test –710 · live –740 · exit –810 · end –860 */

/* loader: night ground, a status line, a huge count in paper, the pixel blinking after it */
.loader { position: fixed; inset: 0; z-index: 50; background: var(--night-deep); color: var(--paper); display: grid; grid-template-rows: auto 1fr auto;
  padding: clamp(18px, 2.4vw, 32px); transition: opacity .7s ease-out, visibility .7s; }
.loader.off { opacity: 0; visibility: hidden; }
.loader-glow { position: absolute; left: -10vw; top: -10vh; width: 60vw; height: 60vh; background: radial-gradient(closest-side, rgba(66, 87, 224, .35), transparent); filter: blur(40px); pointer-events: none; }
.loader-top { display: flex; justify-content: space-between; font: 500 14px/1.2 var(--sans); letter-spacing: .01em; color: var(--periwinkle); }
.loader-top span:last-child { font-family: var(--mono); color: rgba(247, 247, 245, .6); }
.loader-count { align-self: end; margin: 0; font: 600 clamp(120px, 24vw, 420px)/.8 var(--sans); letter-spacing: -.05em; }
.loader-count .px { width: .14em; height: .14em; margin-left: .04em; vertical-align: 0; }

/* header: wordmark top-left (brand rule), who, sound. difference blend keeps it readable on the room and on paper */
.top { position: fixed; z-index: 40; inset: 0 0 auto; display: flex; align-items: center; gap: 22px; padding: clamp(14px, 2vw, 26px) clamp(16px, 2.4vw, 32px); pointer-events: none; }
.top > * { pointer-events: auto; }
.brand { display: block; height: 22px; }
.brand svg, .brand img { height: 100%; width: auto; display: block; }
.who { display: grid; font: 500 13px/1.25 var(--sans); color: var(--paper); letter-spacing: .01em; }
.who span { color: rgba(247, 247, 245, .62); font-weight: 400; }
.snd { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; height: 36px; padding: 0 14px 0 12px; border: 1px solid rgba(247, 247, 245, .32); border-radius: 999px;
  background: rgba(14, 18, 48, .35); color: var(--paper); font: 500 12px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; backdrop-filter: blur(8px); }
.snd:hover { border-color: var(--paper); }
.snd-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.snd-bars i { width: 2px; height: 4px; background: currentColor; }
.snd[aria-pressed="true"] .snd-bars i { animation: bars .9s ease-in-out infinite alternate; }
.snd[aria-pressed="true"] .snd-bars i:nth-child(2) { animation-delay: -.3s; } .snd[aria-pressed="true"] .snd-bars i:nth-child(3) { animation-delay: -.6s; } .snd[aria-pressed="true"] .snd-bars i:nth-child(4) { animation-delay: -.15s; }
@keyframes bars { to { height: 12px; } }
.top.on-paper .who, .top.on-paper .snd { color: var(--ink); }
.top.on-paper .who span { color: var(--ink-muted); }
.top.on-paper .snd { border-color: rgba(20, 22, 27, .3); background: rgba(247, 247, 245, .5); }

/* skip + scroll hint */
.skip, .hint { position: fixed; z-index: 40; left: 50%; translate: -50% 0; margin: 0; font: 500 13px/1 var(--sans); letter-spacing: .04em; color: var(--paper); white-space: nowrap; }
.skip { bottom: clamp(18px, 3vh, 32px); display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border: 1px solid rgba(247, 247, 245, .32); border-radius: 999px; background: rgba(14, 18, 48, .35); cursor: pointer; backdrop-filter: blur(8px); opacity: 0; transition: opacity .5s; }
body.entered:not(.past-story) .skip { opacity: 1; }
body.scrolled .skip { opacity: 0; pointer-events: none; }
.hint { bottom: clamp(70px, 10vh, 90px); color: rgba(247, 247, 245, .75); opacity: 0; transition: opacity .5s; pointer-events: none; }
body.entered:not(.scrolled) .hint { opacity: 1; }
body.waiting-connect .hint { opacity: 0; }
.ico { display: inline-block; width: 1em; height: 1em; flex: none; vertical-align: -.12em; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }

/* wall headlines: HTML text projected onto the wall above the monitor (main.js places and scales it) */
.wall { position: fixed; left: 0; top: 0; z-index: 3; margin: 0; pointer-events: none; text-align: center; color: var(--paper); transform-origin: 50% 50%; opacity: 0; will-change: transform, opacity; }
.wall small { display: block; font: 400 clamp(14px, 1.5vw, 24px)/1.2 var(--sans); letter-spacing: .02em; color: rgba(247, 247, 245, .8); margin-bottom: .5em; }
.wall b { display: block; font: 600 clamp(36px, 6.4vw, 110px)/.92 var(--sans); letter-spacing: -.04em; text-wrap: balance; text-shadow: 0 2px 24px rgba(14, 18, 48, .5); }

/* the end of the story: a short line and the replay, over the wide shot */
.outro { position: fixed; inset: auto 0 12vh; z-index: 3; display: grid; justify-items: center; gap: 22px; pointer-events: none; opacity: 0; transition: opacity .6s; }
body.at-end .outro { opacity: 1; }
.outro p { margin: 0; font: 600 clamp(28px, 4vw, 64px)/.95 var(--sans); letter-spacing: -.035em; color: var(--paper); text-align: center; text-shadow: 0 2px 24px rgba(14, 18, 48, .6); }

@media (max-width: 800px) {
  .who { display: none; }
  .brand { height: 18px; }
  .snd { height: 34px; }
  .wall b { font-size: 11vw; }
}
@media (prefers-reduced-motion: reduce) { .snd[aria-pressed="true"] .snd-bars i { animation: none; height: 8px; } }