/* scene.css — стиль info-kinetic (№ 30 «Кинетическая типографика», префикс u30-). Только раскладка и хореография:
   цвета, шрифты, радиусы, кривые и длительности — токены и классы набора site_kit/scenes/_kit/ (tokens.css,
   components.css). Числа сцены (время, кегли строк, прямоугольники плиток, окно браузера) — переменные корня
   (root_style из style.py) и style у элементов. Без классов — финальный кадр: триптих плиток + плашка источника;
   is-armed — первый экран статьи; панели — слои во весь кадр, в финале обрезанные clip-path до своей плитки. */

/* ── первый экран статьи: окно браузера набора (только в начале) ── */
.nx-scene--info-kinetic .u30-web { left: var(--u30-wx); top: var(--u30-wy); width: var(--u30-ww); height: var(--u30-wh); z-index: 1;
  visibility: hidden; transform-origin: 50% 58%; }
.nx-scene--info-kinetic .u30-web .nxs-browser__view { --nxs-unit: calc(var(--u30-ww) / var(--u30-pw)); }
.nx-scene--info-kinetic .u30-shot { 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)); }

/* ── панели (.nxs-panel--accent / --ink / --mint): во весь кадр, в финале — плитки триптиха ── */
.nx-scene--info-kinetic .nxs-stage .u30-pan { position: absolute; inset: 0; margin: 0; padding: 0; border-radius: 0;
  clip-path: inset(var(--u30-ct) var(--u30-cr) var(--u30-cb) var(--u30-cl) round var(--nxs-r-lg)); }
/* --u30-key — главное число/слово, --u30-hl — основа тонких линий; на чернилах главное мятное */
.nx-scene--info-kinetic .u30-pan--accent { --u30-key: var(--nxs-on-accent); --u30-hl: var(--nxs-on-accent); }
.nx-scene--info-kinetic .u30-pan--ink { --u30-key: var(--nxs-strip-accent); --u30-hl: var(--nxs-strip-ink); }
.nx-scene--info-kinetic .u30-pan--mint { --u30-key: var(--nxs-ink); --u30-hl: var(--nxs-ink); }
/* чип «перевод» на цветной панели — читаемые варианты из токенов (на мятной — обычный .nxs-chip--tr) */
.nx-scene--info-kinetic .u30-pan--accent .nxs-chip--tr { background: var(--nxs-mint); color: var(--nxs-accent-2); border-color: transparent; }
.nx-scene--info-kinetic .u30-pan--ink .nxs-chip--tr { background: color-mix(in srgb, var(--nxs-strip-accent) 12%, transparent);
  color: var(--nxs-strip-accent); border-color: color-mix(in srgb, var(--nxs-strip-accent) 40%, transparent); }

/* кинетика: три строки-маски (метка / главное / подстрока); EN и RU лежат в одной маске друг на друге */
.nx-scene--info-kinetic .u30-kin { position: absolute; inset: 0; visibility: hidden; opacity: 0; }
.nx-scene--info-kinetic .u30-lines { position: absolute; left: 7cqw; right: 7cqw; top: 0; bottom: 10cqw; display: flex;
  flex-direction: column; justify-content: center; }
.nx-scene--info-kinetic .u30-lines .u30-m { position: relative; flex: none; height: var(--u30-h); margin: 0; overflow: hidden; }
.nx-scene--info-kinetic .u30-lines .u30-l { position: absolute; inset: 0; display: flex; align-items: flex-end; white-space: nowrap; }
.nx-scene--info-kinetic .u30-lines .u30-wrap .u30-l { white-space: normal; }
.nx-scene--info-kinetic .u30-lines .u30-lab { margin-bottom: 1cqw; font-size: var(--u30-fs); font-weight: 600; line-height: 1.3; }
.nx-scene--info-kinetic .u30-lines .u30-main { line-height: var(--nxs-lh-tight); color: var(--u30-key); }
.nx-scene--info-kinetic .u30-lines .u30-main .u30-l { font-size: var(--u30-fs); padding-right: .06em; }
.nx-scene--info-kinetic .u30-lines .u30-sub { margin-top: 1.2cqw; font-size: var(--u30-fs); font-weight: 600; line-height: 1.3; }
.nx-scene--info-kinetic .u30-lines .u30-sub .u30-l { align-items: flex-start; }
.nx-scene--info-kinetic .u30-lines .u30-up { text-transform: uppercase; }
.nx-scene--info-kinetic .u30-lines .u30-en { transform: translateY(-105%); }   /* статично — как в конце: оригинал ушёл вверх */
.nx-scene--info-kinetic .u30-kin .u30-foot { position: absolute; left: 7cqw; right: 7cqw; bottom: 3.9cqw; margin: 0; display: flex;
  align-items: center; gap: 1.4cqw; font-size: var(--nxs-fs-meta); line-height: 1; }
.nx-scene--info-kinetic .u30-foot > .nxs-mono { opacity: .8; }
.nx-scene--info-kinetic .u30-foot > .u30-no { margin-left: auto; }

/* плитка триптиха: метка, главное, подпись, линия, сравнение, дословная фраза; поля — как T_PAD_* в style.py */
.nx-scene--info-kinetic .u30-tile { position: absolute; left: var(--u30-cl); top: var(--u30-ct); bottom: var(--u30-cb); width: var(--u30-tw);
  padding: 2.4cqw 2.3cqw 2.2cqw; display: flex; flex-direction: column; }
.nx-scene--info-kinetic .u30-tile .u30-t-lab { min-height: calc(var(--u30-lab-n) * 1.3 * var(--nxs-fs-kicker)); color: inherit; opacity: .8;
  white-space: normal; }
.nx-scene--info-kinetic .u30-tile .u30-t-num { margin-top: 1cqw; font-size: var(--u30-tfs); font-weight: 800; line-height: 1.08;
  letter-spacing: var(--nxs-ls-display); white-space: nowrap; color: var(--u30-key); }
.nx-scene--info-kinetic .u30-tile .u30-t-cap { margin-top: 1.1cqw; font-size: var(--nxs-fs-lead); font-weight: 600; line-height: 1.3; text-wrap: pretty; }
/* линия и низ плитки — на общей высоте триптиха (--u30-rule-y считает style.py по самому высокому низу) */
.nx-scene--info-kinetic .u30-tile .u30-t-foot { position: absolute; left: 2.3cqw; right: 2.3cqw; top: var(--u30-rule-y); margin: 0; padding-top: 1.3cqw;
  border-top: var(--nxs-hair) solid color-mix(in srgb, var(--u30-hl) 35%, transparent); }
.nx-scene--info-kinetic .u30-tile .u30-t-cmp { margin: 0 0 1cqw; font-size: var(--nxs-fs-body); font-weight: 500; line-height: 1.35; text-wrap: pretty; }
.nx-scene--info-kinetic .u30-tile .u30-t-en { font-size: var(--nxs-fs-meta); line-height: 1.4; opacity: .75; overflow-wrap: anywhere; }

/* шапка финала: плашка источника «домен · заголовок» и чип «перевод» */
.nx-scene--info-kinetic .u30-head { position: absolute; z-index: 5; left: var(--nxs-safe); right: var(--nxs-safe); top: var(--u30-hy);
  display: flex; align-items: center; gap: .9cqw; }
.nx-scene--info-kinetic .u30-head .nxs-src { flex: 0 1 auto; min-width: 0; }
.nx-scene--info-kinetic .u30-head .nxs-src > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* ── хореография: 0–1,2 с первый экран (наезд) → панели въезжают справа (--u30-s) → EN вылетает снизу, уходит
   вверх, на его место въезжает RU (--at, --u30-out из style.py) → кинетика гаснет → панели сжимаются в плитки ── */
/* заливка both у всех: законченная анимация остаётся в document.getAnimations() — перемотка назад (запись, проверки)
   возвращает и окно, и кинетику; скрытие — последним ключевым кадром, конец = статичный вид */
.nx-scene--info-kinetic:is(.is-armed, .is-playing) .u30-web { animation: u30-web var(--u30-web-t) var(--nxs-ease-io) both; }
.nx-scene--info-kinetic:is(.is-armed, .is-playing) .u30-pan {
  animation: u30-wipe var(--nxs-t-in) var(--nxs-ease-io) var(--u30-s) both,
             u30-shrink var(--nxs-t-in) var(--nxs-ease-io) var(--u30-shrink) forwards; }
.nx-scene--info-kinetic:is(.is-armed, .is-playing) .u30-kin { animation: u30-kin var(--nxs-t-fast) var(--nxs-ease) var(--u30-kin-out) both; }
.nx-scene--info-kinetic:is(.is-armed, .is-playing) .u30-lines .u30-ru { animation: u30-in var(--nxs-t-in) var(--nxs-ease) var(--at) both; }
.nx-scene--info-kinetic:is(.is-armed, .is-playing) .u30-lines .u30-en {
  animation: u30-in var(--nxs-t-in) var(--nxs-ease) var(--at) both, u30-out var(--nxs-t-fast) var(--nxs-ease-io) var(--u30-out) forwards; }
/* число, у которого перевод отличается только десятичным знаком: EN набегает счётчиком набора, RU встаёт заменой
   на том же месте — проявляется поверх (те же глифы, «.» → «,»), и только потом EN гаснет под ним: без двойного числа */
.nx-scene--info-kinetic:is(.is-armed, .is-playing) .u30-lines .u30-en.u30-num {
  animation: u30-in var(--nxs-t-in) var(--nxs-ease) var(--at) both, u30-fade var(--nxs-t-fast) var(--nxs-ease) var(--u30-out) forwards; }
.nx-scene--info-kinetic:is(.is-armed, .is-playing) .u30-lines .u30-ru.u30-swap { animation: nxs-fade var(--nxs-t-fast) var(--nxs-ease) var(--at) both; }

@keyframes u30-web { 0% { visibility: visible; transform: none; } 99.9% { visibility: visible; transform: scale(1.05); }
  100% { visibility: hidden; transform: scale(1.05); } }
@keyframes u30-wipe { from { clip-path: inset(0 0 0 100% round 0cqw); } to { clip-path: inset(0 0 0 0 round 0cqw); } }
/* «from» явно: неявный начальный кадр взял бы заливку въезда ниже по стеку анимаций */
@keyframes u30-shrink { from { clip-path: inset(0 0 0 0 round 0cqw); }
  to { clip-path: inset(var(--u30-ct) var(--u30-cr) var(--u30-cb) var(--u30-cl) round var(--nxs-r-lg)); } }
@keyframes u30-kin { 0% { visibility: visible; opacity: 1; } 99.9% { visibility: visible; } 100% { visibility: hidden; opacity: 0; } }
@keyframes u30-in { from { transform: translateY(105%); } to { transform: none; } }
@keyframes u30-out { from { transform: none; } to { transform: translateY(-105%); } }
@keyframes u30-fade { to { opacity: 0; } }