/* Проба сцены «Место 19 → ночь → 360 Гц». Положение актёров ставит scene.js (transform/opacity), здесь — вид и размеры.
   Токены и стили табло/монитора — из site/css/site.css, чтобы встраивание было один-в-один. */
:root {
  --hall: #0A1228; --deep: #05080F; --led: #FF2B1C; --act: #FF4300; --pro: #8B5CFF; --vip: #2FD27A;
  --paper: #F2F0EB; --mute: #A9B0C2;
  --display: "Sofia Sans Extra Condensed", "Arial Narrow", sans-serif;
  --text: "Wix Madefor Display", system-ui, sans-serif;
  --mono: "Martian Mono", ui-monospace, monospace;
  --pad: clamp(16px, 3.4vw, 48px);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
html, body { overflow-x: clip; }
body { background: var(--deep); color: var(--paper); font: 400 16px/1.5 var(--text); }
img { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--act); outline-offset: 3px; border-radius: 2px; }
.mono { font: 500 11px/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.word { font: 900 1em/.82 var(--display); text-transform: uppercase; letter-spacing: -.005em; white-space: nowrap; }

/* ---------- Табло (как в site.css) ---------- */
.tablo { --seg: var(--led); position: relative; display: inline-block; padding: 7% 8%; border-radius: 6px;
  background: linear-gradient(160deg, #1a1d24, #07080b 60%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -2px 6px rgba(0,0,0,.8), 0 30px 60px -20px rgba(0,0,0,.9), 0 0 80px -10px color-mix(in oklab, var(--seg) 35%, transparent); }
.tablo::before { content: ""; position: absolute; inset: 5% 5.5%; border-radius: 3px;
  background: radial-gradient(120% 90% at 50% 40%, color-mix(in oklab, var(--seg) 10%, #0b0506), #020203);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), inset 0 0 24px rgba(0,0,0,.9); }
.tablo::after { content: ""; position: absolute; inset: 2.2%; pointer-events: none;
  background: radial-gradient(circle at 0 0, #3a3d44 0 2px, transparent 2.5px), radial-gradient(circle at 100% 0, #3a3d44 0 2px, transparent 2.5px),
    radial-gradient(circle at 0 100%, #3a3d44 0 2px, transparent 2.5px), radial-gradient(circle at 100% 100%, #3a3d44 0 2px, transparent 2.5px); }
.tablo svg { position: relative; z-index: 1; display: block; width: 100%; height: auto; overflow: visible; will-change: transform; }  /* свой слой: смена цифр не перерисовывает корпус с тенями */
.tablo .s, .mon__hz .s { fill: var(--seg, var(--led)); opacity: .09; transition: opacity .18s linear; }
.tablo .s.on, .mon__hz .s.on { opacity: 1; }
.tablo.blink .s { transition: none; }  /* часы щёлкают сразу, как LED — без 11 кадров перерисовки на смену */
.tablo .lit, .mon__hz .lit { filter: drop-shadow(0 0 6px color-mix(in oklab, var(--led) 80%, transparent)); }
.tablo .dot { fill: var(--seg); }
.tablo.blink .dot { animation: blink 1s steps(2, jump-none) infinite; }
@keyframes blink { 50% { opacity: .12; } }

/* ---------- Сцена: дорожка + закреплённый экран ---------- */
.sc { position: relative; height: 340vh; }               /* ПК: 240vh прокрутки, пик (экран во весь кадр) на 1,9 экрана */
.sc__pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--deep); }
.sc__pin > * { position: absolute; }
.sc__bg, .sc__glow, .sc__dark { inset: 0; }
.sc__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }  /* фото уже размыто заранее — без filter в браузере */
.sc__glow { background: radial-gradient(42% 46% at 56% 50%, rgba(255,43,28,.30), transparent 70%), linear-gradient(transparent 60%, var(--deep)); }
.sc__dark { background: radial-gradient(70% 70% at 50% 50%, #120a2e, #05060d 75%); opacity: 0; }

/* актёры: точка привязки — центр; scene.js ставит translate3d(x,y) translate(-50%,-50%) … */
.word, .tb, .mon { left: 0; top: 0; will-change: transform, opacity; }
.word { font-size: 15vw; color: var(--paper); }
.wa1, .wb1 { z-index: 1; } .wa2, .wb2 { z-index: 3; }      /* одно слово за табло, другое — перед ним */
.wc1 { z-index: 1; font-style: italic; font-size: 12vw; } .wc1 em { color: var(--act); font-style: inherit; }
.wc2 { z-index: 5; font-style: italic; font-size: 9vw; text-shadow: 0 6px 40px rgba(0,0,0,.6); }
.tb { z-index: 2; width: 40vw; }
.tb .tablo { display: block; width: 100%; }
.tb .tablo + .tablo { position: absolute; left: 50%; top: 50%; width: 205%; transform: translate(-50%, -50%) scale(.6); opacity: 0; }

/* ---------- Монитор BenQ: вид из site.css, размер — конечный кадр наезда ---------- */
.mon { z-index: 4; width: 130vw; }                       /* при s=1 экран закрывает весь кадр 1440×900 */
.mon__frame { position: relative; aspect-ratio: 16 / 9; padding: 1.2%; border-radius: 6px; background: linear-gradient(150deg, #22232a, #050507 55%);
  box-shadow: 0 0 0 1px #2c2d35, 0 30px 60px -20px rgba(0,0,0,.9), 20px 0 60px -20px rgba(139,92,255,.55); }  /* тени короче: слой 130vw растрируется в 2 раза быстрее */
.mon__screen { position: relative; height: 100%; overflow: hidden; border-radius: 2px;
  background: radial-gradient(50% 22% at 50% 47%, rgba(255,150,80,.75), transparent 70%), linear-gradient(180deg, #0c1230 0, #26214f 45%, #3a1d2a 47%, #0a0a14 100%); }
.mon__screen::before { content: ""; position: absolute; inset: 0;  /* сетка пола — плоская SVG в перспективе: без 3D-слоя и маски, растр один раз */
  background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 900" preserveAspectRatio="none"%3E%3Cdefs%3E%3ClinearGradient id="g" gradientUnits="userSpaceOnUse" x1="0" y1="414" x2="0" y2="640"%3E%3Cstop offset="0" stop-color="%23ff8c46" stop-opacity="0"/%3E%3Cstop offset="1" stop-color="%23ff8c46" stop-opacity=".55"/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d="M800 414L-1300 900M800 414L-1150 900M800 414L-1000 900M800 414L-850 900M800 414L-700 900M800 414L-550 900M800 414L-400 900M800 414L-250 900M800 414L-100 900M800 414L50 900M800 414L200 900M800 414L350 900M800 414L500 900M800 414L650 900M800 414L800 900M800 414L950 900M800 414L1100 900M800 414L1250 900M800 414L1400 900M800 414L1550 900M800 414L1700 900M800 414L1850 900M800 414L2000 900M800 414L2150 900M800 414L2300 900M800 414L2450 900M800 414L2600 900M800 414L2750 900M800 414L2900 900M0 900.0H1600M0 756.3H1600M0 678.1H1600M0 629.0H1600M0 595.3H1600M0 570.8H1600M0 552.1H1600M0 537.4H1600M0 525.5H1600M0 515.7H1600M0 507.5H1600M0 500.5H1600M0 494.5H1600M0 489.2H1600M0 484.6H1600M0 480.6H1600M0 477.0H1600M0 473.7H1600M0 470.8H1600M0 468.1H1600M0 465.7H1600M0 463.5H1600M0 461.5H1600M0 459.6H1600M0 457.9H1600M0 456.3H1600M0 454.8H1600M0 453.4H1600M0 452.1H1600M0 450.9H1600M0 449.7H1600M0 448.7H1600M0 447.7H1600M0 446.7H1600M0 445.8H1600M0 445.0H1600M0 444.1H1600M0 443.4H1600M0 442.7H1600M0 442.0H1600M0 441.3H1600M0 440.7H1600M0 440.1H1600M0 439.5H1600M0 438.9H1600M0 438.4H1600M0 437.9H1600M0 437.4H1600M0 437.0H1600M0 436.5H1600M0 436.1H1600M0 435.7H1600M0 435.3H1600M0 434.9H1600M0 434.5H1600M0 434.2H1600M0 433.8H1600M0 433.5H1600M0 433.2H1600M0 432.9H1600M0 432.5H1600M0 432.3H1600M0 432.0H1600M0 431.7H1600M0 431.4H1600M0 431.2H1600M0 430.9H1600M0 430.7H1600M0 430.4H1600M0 430.2H1600M0 430.0H1600M0 429.8H1600M0 429.6H1600M0 429.4H1600M0 429.1H1600M0 429.0H1600M0 428.8H1600M0 428.6H1600M0 428.4H1600M0 428.2H1600M0 428.0H1600M0 427.9H1600M0 427.7H1600M0 427.6H1600M0 427.4H1600M0 427.2H1600M0 427.1H1600M0 426.9H1600M0 426.8H1600M0 426.7H1600M0 426.5H1600M0 426.4H1600M0 426.3H1600M0 426.1H1600M0 426.0H1600M0 425.9H1600M0 425.8H1600M0 425.6H1600M0 425.5H1600M0 425.4H1600M0 425.3H1600M0 425.2H1600M0 425.1H1600M0 425.0H1600M0 424.9H1600M0 424.8H1600M0 424.7H1600M0 424.6H1600M0 424.5H1600M0 424.4H1600M0 424.3H1600M0 424.2H1600M0 424.1H1600M0 424.0H1600M0 423.9H1600M0 423.9H1600M0 423.8H1600M0 423.7H1600M0 423.6H1600M0 423.5H1600M0 423.5H1600M0 423.4H1600M0 423.3H1600M0 423.2H1600M0 423.2H1600M0 423.1H1600M0 423.0H1600M0 422.9H1600M0 422.9H1600M0 422.8H1600M0 422.7H1600M0 422.7H1600M0 422.6H1600M0 422.5H1600M0 422.5H1600M0 422.4H1600M0 422.4H1600M0 422.3H1600M0 422.2H1600M0 422.2H1600M0 422.1H1600M0 422.1H1600M0 422.0H1600M0 422.0H1600M0 421.9H1600M0 421.9H1600M0 421.8H1600M0 421.7H1600M0 421.7H1600M0 421.6H1600M0 421.6H1600M0 421.5H1600M0 421.5H1600M0 421.4H1600M0 421.4H1600M0 421.4H1600M0 421.3H1600M0 421.3H1600M0 421.2H1600M0 421.2H1600M0 421.1H1600M0 421.1H1600M0 421.0H1600M0 421.0H1600M0 421.0H1600M0 420.9H1600M0 420.9H1600M0 420.8H1600M0 420.8H1600M0 420.8H1600M0 420.7H1600M0 420.7H1600M0 420.6H1600M0 420.6H1600M0 420.6H1600M0 420.5H1600M0 420.5H1600M0 420.5H1600M0 420.4H1600M0 420.4H1600M0 420.3H1600M0 420.3H1600M0 420.3H1600M0 420.2H1600M0 420.2H1600M0 420.2H1600M0 420.1H1600M0 420.1H1600M0 420.1H1600M0 420.0H1600M0 420.0H1600" stroke="url%28%23g%29" stroke-width="2.4" fill="none"/%3E%3C/svg%3E') 0 0 / 100% 100% no-repeat; }
.mon__screen::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(transparent 0 2px, rgba(0,0,0,.18) 2px 3px); }
.cross { position: absolute; left: 50%; top: 50%; width: 7%; aspect-ratio: 1; margin: -3.5% 0 0 -3.5%; z-index: 1; will-change: transform; }
.cross::before, .cross::after { content: ""; position: absolute; background: #fff; box-shadow: 0 0 6px rgba(255,255,255,.7); }
.cross::before { left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: linear-gradient(90deg, #fff 0 38%, transparent 38% 62%, #fff 62%); }
.cross::after { top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: linear-gradient(#fff 0 38%, transparent 38% 62%, #fff 62%); }
.mon__hz { position: absolute; z-index: 1; right: 16%; top: 24%; width: 20%; will-change: transform; }  /* внутри видимой части экрана при s=1, ниже бейджа-часов в углу */
.mon__hz svg { display: block; width: 100%; height: auto; overflow: visible; }

/* ---------- Шторка (вариант C) ---------- */
.bar { left: 0; right: 0; height: 50.5%; z-index: 6; background: #030408; transform: scaleY(0); will-change: transform; }
.bar--t { top: 0; transform-origin: 50% 0; } .bar--b { bottom: 0; transform-origin: 50% 100%; }
html:not([data-v="c"]) .bar { display: none; }

/* ---------- Углы ---------- */
.cn { z-index: 7; color: var(--mute); opacity: 0; will-change: opacity; max-width: 34ch; }
.cn b { color: var(--paper); font-weight: 500; }
.cn.tl { left: var(--pad); top: 64px; } .cn.tr { right: var(--pad); top: 64px; text-align: right; }
.cn.bl { left: var(--pad); bottom: 28px; } .cn.br { right: var(--pad); bottom: 28px; text-align: right; }
.cn.q { text-transform: none; letter-spacing: .02em; font-size: 12px; }
.cn.q small { display: block; margin-top: 4px; color: var(--mute); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.live i { display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--vip); box-shadow: 0 0 10px var(--vip); vertical-align: 1px; }
.live b { color: var(--paper); font-weight: 500; } .live .c { animation: blink 1s steps(2, jump-none) infinite; }

/* ---------- Служебное пробы ---------- */
.pv { position: fixed; z-index: 40; top: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(5,8,15,.8); border: 1px solid #222838; }
.pv a { padding: 6px 12px; border-radius: 999px; text-decoration: none; color: var(--mute); white-space: nowrap; }
html[data-v="a"] .pv [data-v="a"], html[data-v="b"] .pv [data-v="b"], html[data-v="c"] .pv [data-v="c"] { background: var(--act); color: #fff; }
.after { min-height: 60vh; display: grid; place-items: center; padding: 48px var(--pad); color: var(--mute); text-align: center; }
.dock { display: none; }

/* ---------- Телефон: своя композиция ---------- */
@media (max-width: 760px) {
  .sc { height: 280vh; }                                 /* закрепление ×0.6 от ПК: 180svh прокрутки */
  .sc__glow { background: radial-gradient(70% 36% at 50% 47%, rgba(255,43,28,.32), transparent 70%), linear-gradient(transparent 62%, var(--deep)); }
  .tb { width: 78vw; }
  .word { font-size: 30vw; }
  .wa2 { font-size: 22vw; } .wb1 { font-size: 34vw; } .wb2 { font-size: 24vw; }
  .wc1 { font-size: 26vw; z-index: 5; }                  /* монитор не закрывает кадр целиком — слово стоит перед ним */
  .wc2 { font-size: 15vw; }
  .mon { width: 240vw; }                                 /* экран 936×527 при s=1: текстура в пределах памяти телефона */
  .mon__hz { right: 31%; top: 10%; width: 13%; }         /* видимая часть экрана 29–71 % ширины */
  .cross { animation: sway 5s ease-in-out infinite alternate; }
  .cn { font-size: 10px; } .cn.tl, .cn.tr { top: 56px; } .cn.bl { bottom: 84px; } .cn.br { bottom: 102px; text-align: left; left: var(--pad); right: auto; }  /* углы снизу — двумя строками, не встык */
  .cn.tr, .cn.q { display: none; }
  .cn.tl[data-t="c"] { max-width: 20ch; }                 /* две строки — не встык с бейджем 03:00 */
  .pv { top: 8px; } .pv a { padding: 5px 8px; font-size: 9px; }
  .dock { display: block; position: fixed; z-index: 30; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); padding: 16px; border-radius: 4px;
    background: var(--act); color: #fff; text-align: center; text-decoration: none; font: 700 15px/1.2 var(--text); }
}
@keyframes sway { from { transform: translate(-6%, 3%); } to { transform: translate(8%, -4%); } }

/* ---------- Без анимации: три кадра стопкой, без закрепления ---------- */
html.rm .sc { height: auto; }
html.rm .sc__pin { position: relative; height: 100vh; height: 100svh; }
html.rm .sc__pin + .sc__pin { border-top: 1px solid #1a2030; }
html.rm .cross, html.rm .live .c, html.rm .tablo.blink .dot { animation: none; }
html.rm .tablo .s { transition: none; }