/* scene.css — стиль info-counter (№ 26 «Гигантский счётчик», префикс u26-), тема «чернила» на .nxs-stage.
   Только раскладка и хореография: цвета, шрифты, рамки, тени и кривые — из site_kit/scenes/_kit/tokens.css и
   components.css. Данные сцены — переменные корня (root_style из style.py: камера, длительность), --at/--dur у
   элементов и путь камеры — @keyframes из build() (css сцены, имя с id корня — в --kf у .u26-cam).
   Статичный вид = финальный кадр: окна браузера нет. */

.nx-scene--info-counter { --u26-top: 4.7cqw; --u26-gap: .7cqw;   /* кикер — в одной строке с плашкой источника (центр 5,58 cqw) */
  /* подъём цифры: во время счёта её середина (0,53 em у цифр Golos 800) — в центре кадра, потом — на месте */
  --u26-lift: calc(31.25cqw - var(--u26-top) - 1.3 * var(--nxs-fs-kicker) - var(--u26-gap) - .53 * var(--nxs-fs-giant)); }

/* ── окно браузера почти во весь кадр; мир камеры — снятая страница в «пикселях страницы» (1440 по ширине) ── */
.nx-scene--info-counter .u26-win { left: 3cqw; top: 3cqw; width: 94cqw; height: 56.5cqw; z-index: 3; visibility: hidden; }
.nx-scene--info-counter .u26-cam { --nxs-unit: calc(94cqw / 1440); --nxs-vx: 47; --nxs-vy: 25.95;
  --nxs-cx: var(--u26-cx); --nxs-cy: var(--u26-cy); --nxs-cz: var(--u26-cz);
  width: calc(1440 * var(--nxs-unit)); height: calc(var(--u26-doc) * var(--nxs-unit)); }
.nx-scene--info-counter .u26-img, .nx-scene--info-counter .u26-mk { position: absolute; left: calc(var(--x) * var(--nxs-unit)); top: calc(var(--y) * var(--nxs-unit));
  width: calc(var(--w) * var(--nxs-unit)); height: calc(var(--h) * var(--nxs-unit)); }
/* маркер: вырезка снимка page-marked (news_scene.py закрасил её цветом --nxs-marker); протяжка — .nxs-mark-band */
.nx-scene--info-counter .u26-mk { background-repeat: no-repeat;
  background-size: calc(var(--mw) * var(--nxs-unit)) calc(var(--mh) * var(--nxs-unit));
  background-position: calc((var(--mx) - var(--x)) * var(--nxs-unit)) calc((var(--my) - var(--y)) * var(--nxs-unit)); }

/* ── финальный кадр: плашка источника, кикер + цифра во весь кадр, подпись, сравнение, линия, фраза и перевод, миниатюра ── */
.nx-scene--info-counter .u26-src { position: absolute; left: var(--nxs-safe); top: var(--nxs-safe); }
.nx-scene--info-counter .u26-num { position: absolute; left: 0; right: 0; top: var(--u26-top); display: flex; flex-direction: column;
  align-items: center; gap: var(--u26-gap); }
.nx-scene--info-counter .u26-kick { margin: 0; }
.nx-scene--info-counter .u26-giant { font-size: var(--nxs-fs-giant); }
.nx-scene--info-counter .u26-label { position: absolute; left: var(--nxs-safe); right: var(--nxs-safe); top: 25.2cqw; text-align: center;
  font-size: var(--nxs-fs-title); font-weight: 600; line-height: var(--nxs-lh-tight); letter-spacing: var(--nxs-ls-title); color: var(--nxs-ink); }
.nx-scene--info-counter .u26-cmp { position: absolute; left: var(--nxs-safe); right: var(--nxs-safe); top: 30.7cqw; text-align: center;
  font-size: var(--nxs-fs-lead); font-weight: 500; line-height: 1.3; color: var(--nxs-ink-2); }
.nx-scene--info-counter .u26-cmp b { font-weight: 700; color: var(--nxs-ink); }
.nx-scene--info-counter .u26-rule { position: absolute; left: var(--nxs-safe); right: var(--nxs-safe); top: 36.4cqw; margin: 0; transform-origin: 0 50%; }
.nx-scene--info-counter .u26-q { position: absolute; left: var(--nxs-safe); top: 39.2cqw; width: 65.7cqw; }
/* оригинал: моно, по строке на span (перенос по знакам делает style.py) — ширина span = N знаков, печать шагами */
.nx-scene--info-counter .u26-en { font-size: var(--nxs-fs-meta); font-weight: 500; line-height: 1.4; color: var(--nxs-ink-3); }
.nx-scene--info-counter .u26-en > span { display: block; width: max-content; white-space: pre; }
.nx-scene--info-counter .u26-ru { margin-top: var(--nxs-sp-3); font-size: var(--nxs-fs-lead); font-weight: 600; line-height: 1.32;
  color: var(--nxs-ink); text-wrap: pretty; }
.nx-scene--info-counter .u26-ru .nxs-chip { margin-right: .5em; vertical-align: .2em; }
.nx-scene--info-counter .u26-thumb { position: absolute; right: var(--nxs-safe); top: 39.2cqw; width: 22cqw; display: flex;
  flex-direction: column; align-items: flex-start; gap: var(--nxs-sp-3); }
.nx-scene--info-counter .u26-thumb img { width: 100%; height: auto; aspect-ratio: var(--ar); object-fit: cover; object-position: 50% 0;
  border-radius: var(--nxs-r-sm); border: var(--nxs-hair) solid var(--nxs-line); }

/* ── хореография: окно и доезд 0–2,4 с (маркер 0,5 с) → «нырок» 2,4–3,4 с, окно гаснет → цифра проявляется 3,0 с,
   счёт 3,25–5,25 с (ключевой момент) → подъём 5,45 с → подпись, сравнение, линия, печать оригинала, перевод,
   миниатюра — по --at из style.py ── */
.nx-scene--info-counter:is(.is-armed, .is-playing) .u26-win {
  animation: u26-on var(--u26-cam-d) linear both, u26-dive-out var(--u26-dive-d) linear var(--u26-dive-at) forwards; }
.nx-scene--info-counter:is(.is-armed, .is-playing) .u26-cam { animation: var(--kf) var(--u26-cam-d) linear both; }
.nx-scene--info-counter:is(.is-armed, .is-playing) .u26-num { animation: u26-lift var(--nxs-t-in) var(--nxs-ease-io) var(--at) both; }
.nx-scene--info-counter:is(.is-armed, .is-playing) .u26-num__in { animation: u26-num-in .7s var(--nxs-ease) var(--at) both; }
.nx-scene--info-counter:is(.is-armed, .is-playing) .u26-rule { animation: u26-rule var(--nxs-t-in) var(--nxs-ease-io) var(--at) both; }
/* печать: клип набора nxs-band шагами по знакам строки (--n) */
.nx-scene--info-counter:is(.is-armed, .is-playing) .u26-en > span { animation: nxs-band var(--dur) steps(var(--n), end) var(--at) both; }
/* видимость окна: видно всё время пути камеры, в самом конце — скрыто (как в финальном кадре); заливка both — чтобы
   анимация оставалась «в силе» и перемотка назад (запись, проверки) её находила */
@keyframes u26-on { from { visibility: visible; } to { visibility: hidden; } }
@keyframes u26-dive-out {
  0% { opacity: 1; filter: blur(0); }
  25% { filter: blur(0); }
  45% { opacity: 1; }
  90% { opacity: 0; }
  100% { opacity: 0; filter: blur(.9cqw); } }
@keyframes u26-num-in { from { opacity: 0; transform: scale(1.45); filter: blur(1.2cqw); } }
@keyframes u26-lift { from { transform: translateY(var(--u26-lift)); } }
@keyframes u26-rule { from { transform: scaleX(0); } }