:root {
  --figma-light-blue: radial-gradient(76.42% 95.44% at 0% 100%, #ffffff 0%, #d0e8ff 100%);
  --ink: #140d34;
  --night: #1a1640;
  --paper: #fff4e8;
  --violet: #6a5aa6;
  --blue: #405dff;
  --cyan: #18c8ff;
  --magenta: #ff2f8e;
  --mono: "JetBrains Mono", "Cascadia Code", Consolas, monospace;
  --display: "Onest", "Segoe UI", sans-serif;
  --serif: "Cormorant Garamond", Georgia, serif;
}
* { box-sizing: border-box; }
html { background: var(--night); }
body { margin: 0; color: var(--paper); font-family: var(--mono); overflow-x: hidden; }

#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="dialogs"] { height: 90vh; }
.chapter[data-chapter="exit"] { height: 70vh; }
/* vh timeline: screen 0–60, room –200, hold –240, modern –460, tech –540, push –610, os –710, dialogs –800, exit –870, end */
.chapter.end .outro { display: grid; justify-items: center; gap: 26px; pointer-events: auto; }
.replay { font: 400 20px/1 "Inter", "Segoe UI", sans-serif; color: #fff; background: #0a8cff; border: 0; border-radius: 60px; padding: 18px 30px; cursor: pointer;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, .14); opacity: 0; transition: opacity .6s; }
body.at-end .replay { opacity: 1; }
.chapter.end { height: 50vh; }   /* the story ends at 830vh on the wide shot with the page peeking 10% from below (content starts at 920vh) */
.chapter.end p { font: 850 clamp(40px, 5vw, 84px)/.9 "Coolvetica HC", "Arial Narrow", sans-serif; text-transform: uppercase; text-align: center; margin: 0;
  text-shadow: 0 2px 24px rgba(10, 6, 40, .6); opacity: 0; transition: opacity .6s; }
.chapter.end p span { display: block; margin-top: 14px; font: 400 16px/1.3 "Inter", sans-serif; letter-spacing: .04em; text-transform: none; text-shadow: none; opacity: .7; }
body.at-end .chapter.end p { opacity: 1; }

/* ---------- monitor glass content ---------- */
.screen { position: fixed; left: 0; top: 0; width: 800px; height: 600px; transform-origin: 0 0; z-index: 2;
  pointer-events: none; color: #e9e4ff; visibility: hidden; text-shadow: 0 0 14px rgba(140, 160, 255, .55), 0 0 2px rgba(200, 210, 255, .6); }
.screen-inner { position: absolute; inset: 0; padding: 56px 64px; display: flex; flex-direction: column; justify-content: center;
  background: radial-gradient(120% 90% at 50% 45%, rgba(64,93,255,.10), transparent 70%); }
.screen-logo { width: 150px; height: auto; image-rendering: pixelated; margin-bottom: 18px; }
.prompt { margin: 0 0 18px; font-size: 18px; opacity: .75; }
.screen-title { font: 800 52px/1.12 var(--mono); margin: 0; letter-spacing: -.02em; }
.screen-title em { font-style: normal; color: #a9b4ff; }
.caret { animation: blink 1s steps(1) infinite; color: #a9b4ff; }
.screen-sub { margin: 26px 0 0; font-size: 14px; letter-spacing: .12em; opacity: .5; }
.screen::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,.18) 0 2px, transparent 2px 4px); mix-blend-mode: multiply; }
@keyframes blink { 50% { opacity: 0; } }

/* ---------- wall headline ---------- */
/* wall headlines: real text, positioned by html-text.js; font sizes come from the 3D wall (--big / --lead) */
.wall-copy { position: fixed; left: 0; top: 0; z-index: 1; margin: 0; text-align: center; white-space: nowrap; visibility: hidden;
  pointer-events: none; will-change: transform; transform: translate(-50%, -50%); }
.wall-copy.live { pointer-events: auto; }
.wall-copy .lead, .wall-copy .big { background: var(--figma-light-blue); -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-font-smoothing: antialiased; user-select: text; cursor: text; }
.wall-copy .lead { font: 400 var(--lead, 30px)/1.2 "Inter", "Segoe UI", sans-serif; text-transform: uppercase; }
.wall-copy .big { font: 850 var(--big, 140px)/.86 "Coolvetica HC", "Arial Narrow", sans-serif; text-transform: uppercase; padding-top: .06em; }
.wall-copy > span { display: block; overflow: hidden; padding: 0 .12em .14em; }
.wall-copy > span:first-child { margin-bottom: -.1em; }
.wall-copy ::selection { background: #0a8cff; color: #fff; -webkit-text-fill-color: #fff; }
.wall-copy > span > span { display: block; transform: translateY(var(--rise, 110%)); will-change: transform; }

/* ---------- chrome ---------- */
.top { position: fixed; z-index: 8; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 14px; padding: 20px 28px; pointer-events: none; }
.brand { pointer-events: auto; display: block; width: 64px; }
.brand img { width: 100%; height: auto; display: block; }
.who { display: flex; flex-direction: column; font-size: 12px; line-height: 1.35; }
.who span { opacity: .6; }
.hint { position: fixed; z-index: 3; white-space: nowrap; left: 50%; bottom: 22px; transform: translateX(-50%); margin: 0; font-size: 13px; letter-spacing: .06em;
  padding: 10px 18px; border-radius: 99px; background: rgba(20,13,52,.55); backdrop-filter: blur(6px); transition: opacity .4s; }
body.scrolled .hint { opacity: 0; }

/* ---------- loader (Figma frame 2085661738): navy, soft glow that follows the cursor, huge Coolvetica percentage bottom-left */
.loader { position: fixed; inset: 0; z-index: 10; background: #051727; overflow: hidden; transition: opacity .7s ease, visibility .7s;
  --gx: 50%; --gy: 50%; }
.loader-glow { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle 30vw at var(--gx) var(--gy), rgba(208, 232, 255, .085), rgba(208, 232, 255, .03) 45%, transparent 70%); }
.loader-top { position: absolute; left: 2.5vw; right: 2.5vw; top: 2.6vw; display: flex; justify-content: space-between;
  font: 400 clamp(14px, 1.05vw, 20px)/1 "Inter", "Segoe UI", sans-serif; color: #e9f3ff; }
.loader-count { position: absolute; left: .4vw; bottom: -.11em; margin: 0; white-space: nowrap;
  font: 850 clamp(240px, 38vw, 740px)/.86 "Coolvetica HC", "Arial Narrow", sans-serif; letter-spacing: -.01em;
  background: radial-gradient(76.42% 95.44% at 0% 100%, #ffffff 0%, #d0e8ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.loader-count b { font-weight: inherit; font-variant-numeric: tabular-nums; }
body.ready .loader { opacity: 0; visibility: hidden; }

@media (max-width: 700px) {
  .top { padding: 14px 16px; }
  .brand { width: 52px; }
  .hint { bottom: 16px; font-size: 12px; }
}
.reduce-motion .caret { animation: none; }


/* design stills */
[data-clean] .wall-copy, [data-clean] .top, [data-clean] .hint, [data-clean] .chapter.end p { display: none !important; }
[data-clean="all"] .screen { display: none !important; }

/* 3D pixel cursor (desktop) */
.has-3d-cursor, .has-3d-cursor * { cursor: none !important; }
.cursor-3d { position: fixed; left: 0; top: 0; width: 128px; height: 128px; z-index: 1000; pointer-events: none; opacity: 0; transition: opacity .2s; will-change: transform; }

@font-face { font-family: "Coolvetica HC"; src: url(assets/fonts/coolvetica-heavy-compressed.otf) format("opentype"); font-weight: 850; font-display: block; }
/* Inter (SIL Open Font License, assets/fonts/inter/OFL.txt) — the open replacement for SF Pro in all small text */
@font-face { font-family: "Inter"; src: url(assets/fonts/inter/inter-latin-wght-normal.woff2) format("woff2"); font-weight: 100 900; font-display: block; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Inter"; src: url(assets/fonts/inter/inter-latin-ext-wght-normal.woff2) format("woff2"); font-weight: 100 900; font-display: block; unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Inter"; src: url(assets/fonts/inter/inter-cyrillic-wght-normal.woff2) format("woff2"); font-weight: 100 900; font-display: block; unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Inter"; src: url(assets/fonts/inter/inter-cyrillic-ext-wght-normal.woff2) format("woff2"); font-weight: 100 900; font-display: block; unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }