/* scene.css — стиль page-loupe (№ 21 «Лупа», префикс u21-, тема «бумага»). Только раскладка и хореография: цвета,
   шрифты, рамки, тени, кривые — из site_kit/scenes/_kit/tokens.css и components.css. Переезд камеры, путь линзы и
   субтитры — ключевые кадры конкретной сцены (css из style.py, имена и селекторы — с id сцены), финальная точка —
   переменные корня. */
@property --u21-lx { syntax: '<number>'; inherits: true; initial-value: 0; }     /* центр линзы, пиксели страницы */
@property --u21-ly { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --u21-lift { syntax: '<number>'; inherits: true; initial-value: 0; }   /* подъём линзы между остановками 0…1 */

/* страница во весь кадр: мир — снимок в «пикселях страницы» (1440 = ширина кадра при увеличении 1), камера набора */
.nx-scene--page-loupe .u21-cam { --nxs-unit: calc(100cqw / 1440); --nxs-cx: var(--u21-cx); --nxs-cy: var(--u21-cy); --nxs-cz: var(--u21-cz);
  width: calc(1440 * var(--nxs-unit)); height: calc(var(--u21-doc) * var(--nxs-unit)); }
.nx-scene--page-loupe .u21-img, .nx-scene--page-loupe .u21-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)); }
/* маркер: вырезка снимка, закрашенная news_scene.py цветом --nxs-marker; протяжка — .nxs-mark-band набора */
.nx-scene--page-loupe .u21-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)); }

/* линза набора: центр — точка страницы (--u21-lx/ly) в финальном плане камеры; внутри — та же страница крупнее */
.nx-scene--page-loupe .u21-rig { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.nx-scene--page-loupe .u21-lens { left: calc(50cqw + (var(--u21-lx) - var(--u21-cx)) * var(--u21-k) * 1cqw - var(--d) / 2);
  top: calc(31.25cqw + (var(--u21-ly) - var(--u21-cy)) * var(--u21-k) * 1cqw - var(--d) / 2);
  transform: scale(calc(1 + var(--u21-lift) * .035)); }
.nx-scene--page-loupe .u21-mag { --nxs-unit: calc(var(--u21-ls) * 1cqw); --nxs-vx: var(--u21-vr); --nxs-vy: var(--u21-vr);
  --nxs-cx: var(--u21-lx); --nxs-cy: var(--u21-ly); --nxs-cz: 1;
  width: calc(1440 * var(--nxs-unit)); height: calc(var(--u21-doc) * var(--nxs-unit)); }

/* источник — плашка набора слева сверху; плитка с ценой — справа от линзы, стрелкой к ней */
.nx-scene--page-loupe .u21-src { position: absolute; left: var(--nxs-sp-5); top: var(--nxs-sp-5); z-index: 3; max-width: 46cqw; }
.nx-scene--page-loupe .u21-src span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* will-change у плитки — постоянный слой: без него финал ≠ конец игры 0,40 при пороге 0,5 (сцена enigma-astra, 25.09) */
.nx-scene--page-loupe .u21-tag { position: absolute; z-index: 3; right: var(--nxs-sp-5); box-shadow: var(--nxs-shadow); will-change: transform; }
.nx-scene--page-loupe .u21-tag-arrow { position: absolute; left: -.8cqw; top: calc(var(--ay) - .8cqw); width: 1.6cqw; height: 1.6cqw;
  background: var(--nxs-accent-bg); border: solid var(--nxs-accent-line); border-width: 0 0 var(--nxs-hair) var(--nxs-hair);
  border-radius: 0 0 0 .2cqw; transform: rotate(45deg); }
.nx-scene--page-loupe .u21-tag .nxs-tile__val { font-size: var(--nxs-fs-title); }

/* субтитры: эфирная плашка набора по центру внизу, строки сменяют друг друга на одном месте */
.nx-scene--page-loupe .u21-subs { position: absolute; left: 0; right: 0; bottom: var(--nxs-sp-5); z-index: 4; width: fit-content; margin: 0 auto; }
.nx-scene--page-loupe .u21-lines { display: grid; }
.nx-scene--page-loupe .u21-sub { grid-area: 1 / 1; max-width: 74cqw; text-wrap: balance; opacity: 0; }
.nx-scene--page-loupe .u21-sub--fin { opacity: 1; }

/* ── хореография: камера, линза и субтитры — ключевые кадры сцены из style.py (с её id); плашка, плитка, маркер — по --at ── */
.nx-scene--page-loupe:is(.is-armed, .is-playing) .u21-subs { animation: nxs-rise var(--nxs-t-in) var(--nxs-ease) var(--at, 0s) both; }
.nx-scene--page-loupe:is(.is-armed, .is-playing) .u21-tag { animation: u21-tag var(--nxs-t-in) var(--nxs-ease) var(--at, 0s) both; }
@keyframes u21-tag { from { opacity: 0; transform: translateX(-1.4cqw) scale(.96); } }