:root {
  --ink: #141517;
  --rule: #3A3B3F;
  --paper: #F2F1EE;
  --muted: #A9A6A0;
  --orange: #FF5A1F;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --head: "Unbounded", system-ui, sans-serif;
  --text: "Golos Text", system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; }
body {
  background: var(--ink);
  color: var(--paper);
  font: 500 16px/1.45 var(--text);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
a, button { color: inherit; font: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }

#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

/* Зерно — одна плёнка поверх всего, и сцены, и текста; виньетка тянет взгляд к свету лампы. */
.grain {
  position: fixed; inset: -50%; pointer-events: none; z-index: 9;
  background-image: var(--noise);
  mix-blend-mode: overlay; opacity: 0.2;
}
/* Кадр 3: свет сходится на видеокарте, пустой пол уходит в тень. */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 4; opacity: 0;
  background: radial-gradient(48% 62% at 66% 54%, transparent 30%, rgba(8, 8, 10, 0.72) 100%);
  transition: opacity 1.2s var(--ease);
}
body[data-frame="3"]::before { opacity: 1; }
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 4;
  background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(10, 10, 12, 0.55) 100%);
}

/* Текстовый слой: каждый кадр показывает своё. */
.who, .things, .desk, .card { position: fixed; z-index: 6; transition: opacity 0.6s var(--ease), transform 0.9s var(--ease), clip-path 0.9s var(--ease); }
body:not([data-frame="1"]) .who,
body:not([data-frame="1"]) .things { opacity: 0; pointer-events: none; }

.who { left: clamp(16px, 4vw, 64px); top: clamp(20px, 5vh, 56px); max-width: 34rem; }
.who h1 {
  font: 800 clamp(2.4rem, 5.2vw, 5rem)/0.95 var(--head);
  letter-spacing: -0.02em;
}
.who::before {
  content: ""; position: absolute; z-index: -1; left: -14vw; right: -10vw; top: -14vh; bottom: -12vh;
  background: radial-gradient(closest-side, rgba(14, 14, 16, 0.85), rgba(14, 14, 16, 0.55) 55%, rgba(14, 14, 16, 0) 100%);
}
.who p { margin-top: 1rem; max-width: 26rem; color: #D6D4CF; font-size: 1.05rem; }

/* Подпись появляется у предмета под курсором: квадрат на предмете, линия, ярлык. */
.things ul { list-style: none; padding: 0; }
.things li[data-anchor] {
  position: fixed; left: 0; top: 0; z-index: 6;
  transform: translate(var(--x, -999px), var(--y, -999px));
  display: flex; flex-direction: column-reverse; align-items: flex-start;
  opacity: 0; transition: opacity 0.25s var(--ease);
}
.things li[data-anchor].on, .things li[data-anchor]:focus-within { opacity: 1; }
.things li[data-anchor]::before {
  content: ""; width: 7px; height: 7px; margin-left: -3px; background: var(--orange);
}
.things li[data-anchor] > * {
  position: relative; margin-bottom: var(--lift, 26px); margin-left: -3px;
  padding: 0.3rem 0.55rem; background: var(--ink); color: var(--paper);
  font-size: 0.8rem; line-height: 1.2; white-space: nowrap; text-decoration: none;
  border-left: 1px solid var(--orange);
}
.things li[data-anchor] > *::after {
  content: ""; position: absolute; left: -1px; top: 100%; width: 1px; height: var(--lift, 26px); background: var(--orange);
}
.things li[data-anchor][data-side="left"] { align-items: flex-end; }
.things li[data-anchor][data-side="left"]::before { margin-left: 0; margin-right: -3px; }
.things li[data-anchor][data-side="left"] > * { margin-left: 0; margin-right: -3px; border-left: 0; border-right: 1px solid var(--orange); }
.things li[data-anchor][data-side="left"] > *::after { left: auto; right: -1px; }
.things a:hover, .things button:hover { color: var(--orange); }
/* Сущности без предмета в сцене — пока только в HTML: для поиска и экранного диктора. */
.things li:not([data-anchor]) { position: fixed; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* Кадр 2: за столом. Текст внизу слева, в тени под столом. */
.desk {
  left: clamp(16px, 4vw, 64px); bottom: clamp(24px, 7vh, 72px); max-width: 30rem;
  opacity: 0; transform: translateX(-24px); pointer-events: none;
}
body[data-frame="2"] .desk { opacity: 1; transform: none; pointer-events: auto; transition-delay: 0.5s; }
.desk::before {
  content: ""; position: absolute; z-index: -1; left: -12vw; right: -18vw; top: -22vh; bottom: -12vh;
  background: radial-gradient(closest-side, rgba(14, 14, 16, 0.88), rgba(14, 14, 16, 0.6) 55%, rgba(14, 14, 16, 0) 100%);
}
.desk h2, .card h2 { font: 800 clamp(1.25rem, 1.9vw, 1.8rem)/1.12 var(--head); letter-spacing: -0.015em; }

/* Кадр 3: карточка — текст на затемнении, как у стола; проявляется шторкой слева направо. */
.card {
  left: clamp(16px, 4vw, 64px); top: 50%; width: min(22rem, calc(100vw - 32px));
  transform: translateY(-50%); clip-path: inset(-40vh 100% -40vh 0); pointer-events: none;
}
body[data-frame="3"] .card { clip-path: inset(-40vh -40vw -40vh -40vw); pointer-events: auto; transition-delay: 0.45s; }
.card::before {
  content: ""; position: absolute; z-index: -1; left: -12vw; right: -14vw; top: -18vh; bottom: -16vh;
  background: radial-gradient(closest-side, rgba(14, 14, 16, 0.88), rgba(14, 14, 16, 0.6) 55%, rgba(14, 14, 16, 0) 100%);
}
.card .go { display: inline-block; margin-top: 1.1rem; color: var(--paper); text-decoration: none; border-bottom: 1px solid var(--orange); padding-bottom: 3px; }
.card .go:hover { color: var(--orange); }
.card .back { display: block; margin-top: 1.1rem; font-size: 0.85rem; color: var(--muted); }
.card .back:hover { color: var(--paper); }

.nojs { position: fixed; bottom: 24px; left: 16px; right: 16px; color: var(--muted); }

.capture * { transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  .who, .things, .desk, .card { transition: none; }
}