/* RoboTakeover.org — stylesheet.
   Two voices: humans speak in Fraunces (soft, wonky italics, right column); the machine answers in Martian Mono
   (left column, under the rail). The interface is a film rail on the left, chapter numerals bleeding off the top-right,
   a wordmark bottom-left and a timecode transport bottom-right. */
@font-face { font-family: 'Fraunces'; src: url('assets/fonts/fraunces.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('assets/fonts/fraunces-italic.woff2') format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: 'MartianMono'; src: url('assets/fonts/martian-mono.woff2') format('woff2'); font-weight: 100 800; font-display: swap; }

:root {
  --human: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --machine: 'MartianMono', 'Martian Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --ink: #efe8dd;
  --ink-dim: rgba(239, 232, 221, .5);
  --ink-faint: rgba(239, 232, 221, .16);
  --bg: #050403;
  --accent: #ff8a3c;
  --rail: 76px;
  --gutter: clamp(20px, 3.4vw, 52px);
  --edge: 72px;            /* right-hand text column stops here (room for the vertical dateline) */
  --bars: 0px;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body { font-family: var(--human); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body.locked { overflow: hidden; }
button { font: inherit; color: inherit; }
::selection { background: var(--accent); color: #000; }

#gl, #fallback { position: fixed; inset: 0; width: 100%; height: 100%; display: block; background: var(--bg); }
#gl[hidden], #fallback[hidden] { display: none; }
body.render .loader, body.render .ctls, body.render .hint, body.render .notice { display: none; }
body.render .rail, body.render .transport, body.render .mark, body.render .bar, body.render .rail-ember, body.render .log { transition: none; }
.scroller { position: relative; width: 1px; height: 1200vh; pointer-events: none; }

/* ---------- loader ---------- */
.loader { position: fixed; inset: 0; z-index: 60; background: var(--bg); padding: 0 0 36px calc(var(--rail) + 28px); display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; transition: opacity .8s ease, visibility .8s; }
.loader.done { opacity: 0; visibility: hidden; }
.loader-label { font-family: var(--machine); font-weight: 500; font-size: 10px; letter-spacing: .34em; text-transform: uppercase; color: var(--ink-dim); }
.loader-pct { font-family: var(--human); font-weight: 200; font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1; font-size: 96px; line-height: .9; font-variant-numeric: tabular-nums; }
.loader-pct::after { content: '%'; font-size: 24px; margin-left: 4px; color: var(--ink-dim); font-style: italic; }
.loader-rule { width: 56px; height: 1px; background: var(--accent); margin-top: 8px; }

/* ---------- stage ---------- */
.stage { position: fixed; inset: 0; z-index: 10; pointer-events: none; overflow: hidden; }
.stage > * { pointer-events: auto; }
.bar { position: absolute; left: 0; right: 0; height: var(--bars); background: #000; z-index: 30; transition: height 1.2s cubic-bezier(.7,0,.3,1); pointer-events: none; }
.bar-top { top: 0; } .bar-bottom { bottom: 0; }

/* ---------- rail (vertical timeline) ---------- */
.rail { position: absolute; left: 0; top: 0; bottom: 0; width: var(--rail); border-right: 1px solid var(--ink-faint); z-index: 40; opacity: 0; transition: opacity 1s ease .2s; }
.ready .rail { opacity: 1; }
.rail-line { position: absolute; left: 37px; top: 88px; bottom: 88px; width: 1px; background: var(--ink-faint); }
.rail-fill { position: absolute; left: 37px; top: 88px; width: 1px; height: calc(var(--p) * (100% - 176px)); background: linear-gradient(180deg, rgba(255,138,60,.15), var(--accent)); }
.rail-ember { position: absolute; left: 34px; top: calc(88px + var(--p) * (100% - 176px)); width: 7px; height: 7px; margin-top: -3px; border-radius: 50%; background: #fff1dc; box-shadow: 0 0 10px 3px var(--accent); transition: background .8s, box-shadow .8s; }
body[data-era="eye"] .rail-ember { background: #e4dcff; box-shadow: 0 0 12px 4px rgba(190,170,255,.7); }
body[data-era="takeover"] .rail-ember { background: #fff1dc; box-shadow: 0 0 14px 5px rgba(255,138,60,.9); }
.track { position: absolute; left: 0; top: 88px; bottom: 88px; width: 100%; cursor: pointer; }
.track:focus-visible { outline: 1px solid var(--accent); outline-offset: -8px; }
.eras { list-style: none; margin: 0; padding: 0; position: absolute; left: 46px; top: 88px; bottom: 88px; width: 20px; }
.eras li { position: absolute; left: 0; top: var(--at); writing-mode: vertical-rl; transform: translateY(-50%) rotate(180deg); font-family: var(--machine); font-weight: 500; font-size: 8.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-dim); cursor: pointer; white-space: nowrap; transition: color .4s; }
.eras li.on { color: var(--ink); }
.eras li:hover { color: var(--accent); }

/* ---------- chapter numeral & dateline (right edge) ---------- */
.chapter { position: absolute; right: -0.05em; top: 20px; font-family: var(--human); font-weight: 200; font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1; font-size: clamp(150px, 24vw, 380px); line-height: .78; letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1px rgba(239,232,221,.42); pointer-events: none; user-select: none; }
body[data-voice="machine"] .chapter { font-family: var(--machine); font-weight: 200; font-variation-settings: normal; letter-spacing: -.1em; -webkit-text-stroke: 1px var(--accent); opacity: .7; }
.dateline { position: absolute; right: 28px; top: 50%; transform: translateY(-50%); writing-mode: vertical-rl; display: flex; align-items: center; gap: 14px; font-family: var(--machine); font-weight: 500; font-size: 10px; letter-spacing: .34em; text-transform: uppercase; white-space: nowrap; pointer-events: none; }
.dateline-date { color: var(--accent); }
.dateline, .mark, .timecode, .eras li { text-shadow: 0 1px 2px rgba(0,0,0,.3), 0 2px 18px rgba(0,0,0,.35); }
.dateline-name { color: var(--ink-dim); }
.dateline-sep { width: 1px; height: 28px; background: var(--ink-faint); }

/* ---------- captions: two voices, two columns ---------- */
.caption { position: absolute; right: var(--edge); top: 33%; width: min(36vw, 470px); text-align: right; pointer-events: none; }
.caption-rule { width: 56px; height: 1px; background: var(--accent); margin: 0 0 20px auto; }
.caption-line { margin: 0; font-family: var(--human); font-style: italic; font-weight: 300; font-variation-settings: 'opsz' 72, 'SOFT' 70, 'WONK' 1; font-size: clamp(26px, 3.1vw, 46px); line-height: 1.06; letter-spacing: -.005em; text-wrap: balance; text-shadow: 0 1px 2px rgba(0,0,0,.35), 0 2px 28px rgba(0,0,0,.45); }
.caption-line .w { display: inline-block; will-change: transform, opacity, filter; }
body[data-voice="machine"] .caption { right: auto; left: calc(var(--rail) + 28px); top: auto; bottom: 148px; width: min(46vw, 620px); text-align: left; }
body[data-voice="machine"] .caption-rule { margin: 0 0 18px 0; width: 32px; }
body[data-voice="machine"] .caption-line { font-family: var(--machine); font-style: normal; font-weight: 400; font-variation-settings: normal; font-size: clamp(14px, 1.45vw, 21px); line-height: 1.55; letter-spacing: 0; text-wrap: initial; }
.caption-line .prompt { color: var(--accent); }
.caption-line .cursor { display: inline-block; width: .6em; height: 1.05em; vertical-align: -0.15em; background: var(--accent); margin-left: 3px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0 } }

/* ---------- agent log: the machine writes into the human column ---------- */
.log { position: absolute; right: var(--edge); top: 33%; width: min(34vw, 430px); font-family: var(--machine); font-size: 11px; line-height: 1.9; letter-spacing: .02em; color: rgba(215,226,248,.72); text-align: right; opacity: 0; transition: opacity .6s; pointer-events: none; }
.log.on { opacity: 1; }
.log div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.log .ok { color: #9ef0c0; } .log .warn { color: var(--accent); } .log .sys { color: #fff; }

/* ---------- wordmark ---------- */
.mark { position: absolute; left: calc(var(--rail) + 28px); bottom: 34px; display: grid; text-decoration: none; color: var(--ink); z-index: 40; opacity: 0; transition: opacity 1s ease .2s; }
.ready .mark { opacity: 1; }
.mark-l1, .mark-l2 { font-family: var(--human); font-weight: 900; font-variation-settings: 'opsz' 144, 'SOFT' 0, 'WONK' 0; font-size: 22px; line-height: .92; letter-spacing: -.01em; }
.mark-l2 { font-weight: 200; font-style: italic; }
.mark span span.m { font-family: var(--machine); font-style: normal; font-weight: 500; font-size: .86em; letter-spacing: 0; }
.mark-tld { margin-top: 7px; font-family: var(--machine); font-weight: 500; font-size: 9px; letter-spacing: .34em; text-transform: uppercase; color: var(--ink-dim); }

/* ---------- transport ---------- */
.transport { position: absolute; right: var(--gutter); bottom: 32px; text-align: right; z-index: 40; opacity: 0; transition: opacity 1s ease .2s; }
.ready .transport { opacity: 1; }
.timecode { font-family: var(--machine); font-weight: 200; font-size: clamp(26px, 3.2vw, 44px); line-height: 1; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.ctls { margin-top: 10px; display: flex; justify-content: flex-end; gap: 20px; }
.tb { background: none; border: 0; border-bottom: 1px solid transparent; padding: 8px 0 7px; font-family: var(--machine); font-weight: 500; font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--ink-dim); cursor: pointer; transition: color .25s, border-color .25s; }
.tb:hover { color: var(--ink); }
.tb[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.tb:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; }

/* ---------- opening ---------- */
.title { position: absolute; inset: 0; pointer-events: none; }
.title > * { pointer-events: auto; }
.title-word { position: absolute; left: calc(var(--rail) - 2px); top: 9%; display: grid; margin: 0; }
.tw { display: block; font-family: var(--human); font-weight: 900; font-variation-settings: 'opsz' 144, 'SOFT' 30, 'WONK' 1; font-size: clamp(84px, 19.5vw, 310px); line-height: .8; letter-spacing: -.05em; white-space: nowrap; }
.tw-2 { margin-left: .18em; font-weight: 200; font-style: italic; font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1; }
.tw span { display: inline-block; will-change: transform, opacity, filter; }
.title-sub { position: absolute; right: var(--edge); bottom: 30%; width: min(36vw, 440px); margin: 0; text-align: right; font-family: var(--human); font-style: italic; font-weight: 300; font-variation-settings: 'opsz' 48, 'SOFT' 80, 'WONK' 1; font-size: clamp(17px, 1.6vw, 24px); line-height: 1.35; color: var(--ink-dim); }
.title-actions { position: absolute; left: calc(var(--rail) + 28px); bottom: 118px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.begin { font-family: var(--machine); font-weight: 500; font-size: 11px; letter-spacing: .32em; text-transform: uppercase; padding: 13px 0 12px; border: 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); background: none; cursor: pointer; transition: color .3s, border-color .3s, letter-spacing .4s; }
.begin::before { content: '\25B6\00a0\00a0'; color: var(--accent); font-size: 9px; }
.begin:hover { color: var(--accent); border-color: var(--accent); letter-spacing: .38em; }
.begin:focus-visible { outline: 1px solid var(--accent); outline-offset: 6px; }
.title-or { font-family: var(--machine); font-size: 10px; letter-spacing: .14em; color: var(--ink-dim); }
.endcard-link { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.endcard-link:hover { color: var(--accent); }

/* ---------- end card ---------- */
.endcard { position: absolute; left: calc(var(--rail) + 28px); right: var(--edge); top: 30%; opacity: 0; pointer-events: none; }
.endcard.on { pointer-events: auto; }
.endcard-mark { font-family: var(--machine); font-weight: 200; font-size: clamp(28px, 5vw, 64px); letter-spacing: -.02em; line-height: 1; }
.endcard-note { margin: 14px 0 0; font-family: var(--human); font-style: italic; font-weight: 300; font-variation-settings: 'opsz' 48, 'SOFT' 80, 'WONK' 1; font-size: clamp(17px, 1.7vw, 24px); color: var(--ink-dim); }
.endcard-actions { margin-top: 28px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }

/* ---------- hint & notice ---------- */
.hint { position: absolute; right: var(--gutter); bottom: 104px; font-family: var(--machine); font-size: 9px; letter-spacing: .3em; text-transform: uppercase; color: var(--ink-dim); opacity: 0; transition: opacity 1s; pointer-events: none; white-space: nowrap; text-align: right; }
.hint.on { opacity: .9; }
.notice { position: absolute; left: calc(var(--rail) + 28px); top: 28px; max-width: min(520px, 70vw); padding: 10px 14px; border-left: 1px solid var(--accent); background: rgba(5,4,3,.72); font-family: var(--machine); font-size: 10px; letter-spacing: .06em; line-height: 1.6; color: var(--ink-dim); z-index: 50; }

/* ---------- per-era accents ---------- */
body[data-era="dark"] { --accent: #ffb27a; }
body[data-era="fire"] { --accent: #ff8a3c; }
body[data-era="fields"] { --accent: #ffc64d; }
body[data-era="city"] { --accent: #ffb060; }
body[data-era="industry"] { --accent: #ff6a2a; }
body[data-era="computing"] { --accent: #59ff8c; }
body[data-era="internet"] { --accent: #6fd6ff; }
body[data-era="llm"] { --accent: #c3a4ff; }
body[data-era="agents"] { --accent: #dfe9ff; }
body[data-era="eye"] { --accent: #ffffff; }
body[data-era="takeover"] { --accent: #ff8a3c; }

/* ---------- narrow viewports: the rail lies down across the top ---------- */
@media (max-width: 720px), (max-height: 520px) {
  :root { --rail: 0px; --edge: 18px; --gutter: 18px; }
  .rail { width: 100%; height: 46px; bottom: auto; border-right: 0; border-bottom: 1px solid var(--ink-faint); }
  .rail-line { left: 18px; right: 18px; top: 22px; bottom: auto; width: auto; height: 1px; }
  .rail-fill { left: 18px; top: 22px; height: 1px; width: calc(var(--p) * (100% - 36px)); }
  .rail-ember { top: 22px; left: calc(18px + var(--p) * (100% - 36px)); margin-top: -3px; margin-left: -3px; }
  .track { left: 0; top: 0; bottom: auto; height: 46px; }
  .eras { left: 18px; top: 30px; bottom: auto; width: auto; height: 12px; }
  .eras li { display: none; }
  .eras li.on { display: block; writing-mode: horizontal-tb; transform: none; left: 0; top: 0; }
  .chapter { top: 30px; right: -2px; font-size: clamp(110px, 32vw, 160px); }
  .dateline { writing-mode: horizontal-tb; right: auto; left: 18px; top: 58px; transform: none; gap: 10px; font-size: 9px; }
  .dateline-sep, .dateline-name { display: none; }
  .caption { right: 18px; top: 27%; width: calc(100% - 36px); }
  .caption-line { font-size: clamp(24px, 7.6vw, 34px); }
  body[data-voice="machine"] .caption { left: 18px; bottom: 132px; width: calc(100% - 36px); }
  body[data-voice="machine"] .caption-line { font-size: 14px; }
  .log { display: none; }
  .mark { left: 18px; bottom: 26px; }
  .mark-l1, .mark-l2 { font-size: 17px; }
  .transport { right: 18px; bottom: 26px; }
  .timecode { font-size: 22px; }
  .ctls { gap: 14px; }
  .tb { letter-spacing: .2em; }
  .title-word { left: 10px; top: 12%; }
  .tw { font-size: clamp(60px, 21vw, 120px); }
  .title-sub { left: 18px; right: 18px; width: auto; bottom: 36%; text-align: left; }
  .title-actions { left: 18px; bottom: 104px; }
  .endcard { left: 18px; right: 18px; top: 30%; }
  .hint { display: none; }
  .notice { left: 18px; top: 56px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .caption-line .cursor { animation: none; }
  .bar { transition: none; }
}
body.reduce-motion .caption-line .cursor { animation: none; }