/* ==========================================================================
   ТРИУМФ — storony.css (28–29.09.2026): второй экран «Сильные стороны каждого»
   Переход «стекание» из первого экрана (obekt) → акт с двумя фигурами и двумя
   колонками → финал-выбор. Поверх core/parts/ruki/obekt.css; obekt.css не трогаем:
   всё, что меняет первый экран, живёт ТОЛЬКО под html.st-js .st-wrap.
   Правило владельца «SEO не поломать»: базовые стили — обычный поток, весь текст
   виден; липкая сцена и скрытие до скраба — только под html.st-js (класс ставит
   storony.js на компьютере ≥ 861 px, не в statika и не при reduce-motion).
   29.09: строки идут по времени (storony.js) и НИКОГДА не гаснут — ни при обратной
   прокрутке, ни в финале. Механика «порог → время → стоянка» (29.09, вечер): обёртка
   200vh = сцена + дорожка, весь показ идёт по времени от первого жеста; раскладка акта
   по замечаниям владельца — заголовок ниже шапки (68 px), центр опущен и распределён
   флексом, кнопки на «линии пола» --st-pol у низа экрана, вопрос финала над кнопками
   или на их линии (класс st-vopros-liniya ставит JS по замеру).
   Эффекты появления фигур: вихрь пыльцы (холст .st-vihr), лужа света, масштаб
   1,06 → 1; на компьютере вспышки нет (потепление ≤ 8 %), кольцо тонкое.
   Телефон (≤ 860): аватар и текст рядом — система (аватар слева), ниже юрист
   (аватар справа); кнопка на всю ширину под блоком.
   Цвета: холод 149,181,218 / тепло 218,184,139 — только как свет; красный
   #a32f36 — знак, ядро и планка маркера «только».
   ========================================================================== */

/* ================= БАЗА: поток, всё видно (без JS, телефон, statika) ================= */
.st-wrap{ position:relative; }
.st-sticky{ position:relative; }
.st-akt{ position:relative; overflow:hidden; background:var(--bg); padding:var(--s6) 0 var(--s6); --holod:149,181,218; --teplo:218,184,139; }   /* overflow: свет фигуры 170 % шире коробки — без обрезки раздвигал страницу на телефоне до 437 px */
.st-h2{ margin:0 var(--gutter); text-align:center; font-family:var(--font-display); font-size:var(--t-h2); font-weight:700; letter-spacing:-.03em; line-height:1.05; }
.st-chast, .st-yadro, .st-blik{ display:none; }                    /* декор — только в сцене с JS */
.st-blok{ position:relative; --c:var(--holod); --c-hex:#95b5da; }  /* цвет стороны — на блоке: наследуют фигура, колонка и кнопка (на компьютере блок display:contents, наследование живёт) */
.st-blok--human{ --c:var(--teplo); --c-hex:#dab88b; }
.st-fig{ position:relative; isolation:isolate; height:60vh; aspect-ratio:9 / 16; margin:var(--s5) auto 0; max-width:88vw; }
.st-svet{ position:absolute; left:50%; bottom:-10%; width:170%; height:120%; transform:translateX(-50%); pointer-events:none; background:radial-gradient(50% 50% at 50% 60%, rgba(var(--c),.16), rgba(var(--c),.05) 45%, transparent 72%); }
/* верхняя маска 4 % — одна и та же на холсте клипа и на стоп-кадре: макушка (с 4,5–5,8 % высоты кадра) не режется и не скачет на кроссфейде (рецензия № 9) */
.st-kadr{ position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:contain; object-position:center bottom; display:block; z-index:1; -webkit-mask:linear-gradient(to bottom, transparent 0, #000 4%); mask:linear-gradient(to bottom, transparent 0, #000 4%); }
.st-holst{ position:absolute; inset:0; width:100%; height:100%; max-width:none; display:block; z-index:2; opacity:0; transition:opacity .5s cubic-bezier(.65,0,.35,1); -webkit-mask:linear-gradient(to bottom, transparent 0, #000 4%); mask:linear-gradient(to bottom, transparent 0, #000 4%); }
.st-src{ position:absolute; inset:0; width:100%; height:100%; max-width:none; opacity:0; pointer-events:none; }
/* эффекты появления (элементы создаёт storony.js; без JS и в statika их нет) */
.st-vihr{ position:absolute; left:-48%; top:-10%; width:196%; height:120%; max-width:none; display:block; z-index:3; pointer-events:none; }   /* canvas — replaced: размер задаём явно, не через left/right */
.st-vspyshka{ position:absolute; inset:0; opacity:0; pointer-events:none; z-index:-1; background:radial-gradient(ellipse 70% 60% at 50% 70%, rgba(var(--c),.18), rgba(var(--c),.05) 55%, transparent 75%); }
.st-vspyshka--ai{ --c:var(--holod); } .st-vspyshka--human{ --c:var(--teplo); }
.st-vspyshka.is-on{ animation:st-vspyshka .9s cubic-bezier(.19,1,.22,1) both; }
.st-volna{ position:absolute; left:50%; top:52%; width:90%; aspect-ratio:1 / 1; margin:-45% 0 0 -45%; border-radius:50%; opacity:0; pointer-events:none; transform:scale(.06); will-change:transform, opacity; background:radial-gradient(circle, transparent 46%, rgba(var(--c),.22) 48.5%, rgba(var(--c),.22) 50.5%, transparent 53%); }
.st-volna.is-on{ animation:st-volna 1.4s cubic-bezier(.19,1,.22,1) both; }
.st-luzha{ position:absolute; left:50%; bottom:-2%; width:130%; height:14%; transform:translateX(-50%); border-radius:50%; opacity:0; pointer-events:none; background:radial-gradient(ellipse at 50% 50%, rgba(var(--c),.34), rgba(var(--c),.10) 45%, transparent 70%); }
.st-fig.is-klip .st-luzha, .st-fig.is-gotov .st-luzha{ animation:st-luzha 4.6s ease-out 1.8s both; }   /* загорается на 60 % клипа, держится 3 с, остаётся на 40 % */
.st-fig.is-klip{ animation:st-sborka 3.1s cubic-bezier(.19,1,.22,1) both; transform-origin:50% 100%; }
.st-kol{ position:relative; padding:var(--s4) var(--gutter) 0; }
.st-kiker{ margin:0 0 var(--s2); font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:rgba(var(--c),.85); }
.st-stroka{ position:relative; margin-top:var(--s2); }
.st-t{ position:relative; margin:0; font-family:var(--font-display); font-size:clamp(13px, .7rem + .35vw, 16px); font-weight:600; letter-spacing:-.01em; line-height:1.15; color:var(--fg); }
.st-s{ position:relative; margin:4px 0 0; font-size:clamp(12px, .7rem + .15vw, 14px); line-height:1.4; color:var(--fg-muted); }
.st-tolko{ display:block; margin-bottom:3px; font-family:var(--mono); font-size:10px; font-weight:400; letter-spacing:.2em; text-transform:uppercase; color:#c8474f; }
.st-planka{ position:absolute; top:0; left:0; width:3px; height:1.6vh; min-height:12px; background:#a32f36; }
.st-stroka.m-tolko{ padding-left:14px; }
.st-stroka.m-tolko .st-planka{ top:14px; }                         /* под mono-подписью «только …» */
.st-blok > .st-knopka{ margin:var(--s3) var(--gutter) 0; }        /* кнопка — сестра колонки в блоке (телефон: на всю ширину под блоком) */
.st-vopros{ margin:var(--s6) var(--gutter) 0; text-align:center; font-family:var(--mono); font-size:var(--t-xs); letter-spacing:.2em; text-transform:uppercase; color:var(--fg); }

/* телефон / поток: клип появления (класс ставит storony.js), касание фигуры повторяет клип */
.st-fig.is-klip .st-holst{ opacity:1; }
.st-fig.is-gotov .st-holst{ opacity:0; }
.st-fig.is-klip .st-kadr{ opacity:0; }
.st-fig .st-kadr{ transition:opacity .5s cubic-bezier(.65,0,.35,1); }
html.st-mob .st-fig{ cursor:pointer; }
/* юрист без клипа (рот, 29.09): и на телефоне стоп-кадр проявляется снизу вверх; касание повторяет проявление */
html.st-mob .st-fig--human.no-klip .st-kadr{ -webkit-mask:linear-gradient(to top, #000 0, #000 calc(var(--pr, 0) * 130%), transparent calc(var(--pr, 0) * 130% + 22%)); mask:linear-gradient(to top, #000 0, #000 calc(var(--pr, 0) * 130%), transparent calc(var(--pr, 0) * 130% + 22%)); animation:st-proyav 1.8s cubic-bezier(.19,1,.22,1) both; opacity:1; }
html.st-mob.st-bez-property .st-fig--human.no-klip .st-kadr{ -webkit-mask:none; mask:none; }

/* ================= ТЕЛЕФОН (≤ 860, владелец 29.09 (А)): аватар и текст рядом; сначала система, ниже юрист ================= */
@media (max-width: 860px){
  .st-akt{ padding:var(--s5) 0; }
  .st-h2{ font-size:clamp(1.25rem, 1rem + 1.6vw, 1.7rem); }
  .st-blok{ isolation:isolate; display:grid; grid-template-columns:42vw minmax(0, 1fr); column-gap:14px; align-items:end; margin:var(--s4) var(--gutter) 0; }
  .st-blok--human{ grid-template-columns:minmax(0, 1fr) 42vw; }
  .st-fig{ grid-row:1; grid-column:1; width:42vw; height:auto; margin:0; max-width:none; }
  .st-blok--human .st-fig{ grid-column:2; }
  .st-kol{ grid-row:1; grid-column:2; padding:0 0 var(--s2); }
  .st-blok--human .st-kol{ grid-column:1; text-align:right; }
  .st-blok--human .st-stroka.m-tolko{ padding-left:0; padding-right:14px; }
  .st-blok--human .st-planka{ left:auto; right:0; }
  .st-kiker{ margin-bottom:var(--s1); font-size:10px; }
  .st-stroka{ margin-top:10px; }
  .st-t{ font-size:clamp(14px, .8rem + .6vw, 16px); }
  .st-s{ font-size:clamp(12px, .7rem + .3vw, 13px); line-height:1.35; margin-top:3px; }
  .st-tolko{ font-size:9px; }
  .st-blok > .st-knopka{ grid-column:1 / -1; grid-row:2; width:100%; margin:var(--s3) 0 0; }
  .st-vopros{ margin-top:var(--s5); }
}

/* ================= СЦЕНА: только html.st-js, шире 860 ================= */
@media (min-width: 861px){
  html.st-js .st-wrap{ height:200vh; }                                /* 100vh сцены + 100vh дорожки (показ идёт по времени, дорожка гасит лишний ход) */
  /* раскладка акта: --st-pol — «линия пола» (низ кнопок и ступни фигур); --st-h2-top — заголовок ниже фиксированной шапки
     (.nav 68 px, shell.css) с зазором ≥ 28 px; --st-kiker — кикеры не выше 21vh и не ближе 40 px к заголовку; --st-niz — низ
     строки 5 (над кнопками место для вопроса: 14 + 20 + 20); --st-kn-h — высота кнопки, JS перезаписывает замером */
  html.st-js .st-sticky{ position:sticky; top:0; height:100vh; overflow:hidden; --st-t:0;
    --st-pol:max(24px, 5vh); --st-kn-h:52px; --h2-fs:clamp(1.1rem, .9rem + .9vw, 1.7rem);
    --st-h2-top:calc(68px + max(28px, 3.5vh));
    --st-kiker:max(21vh, calc(var(--st-h2-top) + 1.05 * var(--h2-fs) + 40px));
    --st-niz:calc(100vh - var(--st-pol) - var(--st-kn-h) - 54px); }
  html.st-js .st-sticky.st-vopros-liniya{ --st-niz:calc(100vh - var(--st-pol) - var(--st-kn-h) - max(28px, 3.5vh)); }   /* вопрос на линии кнопок — строкам ниже */

  /* --- первый экран под скрабом (переопределяем только здесь, obekt.css не трогаем) --- */
  html.st-js .st-wrap .stage--obekt{ --st-t:inherit; }
  html.st-js .st-wrap .stage--obekt .ruki-in, html.st-js .st-wrap .stage--obekt .ruki-side{ opacity:calc(1 - var(--st-t) * 2.5); }
  html.st-js .st-wrap .stage--obekt.is-in .ruki-obekt{ opacity:calc(1 - var(--st-t) * 2.5); }
  html.st-js .st-wrap .stage--obekt .ruki-hand{ opacity:calc(1 - var(--st-t) * 1.5); filter:none; }
  html.st-js .st-wrap .stage--obekt .ruki-hand--ai{ transform:translate3d(calc(var(--sx) - 42vw * var(--st-t)), calc(-43.6% + var(--py) * 14px - 44vh * var(--st-t)), 0); }
  html.st-js .st-wrap .stage--obekt .ruki-hand--human{ transform:translate3d(calc(var(--sx) + 42vw * var(--st-t)), calc(-42.7% + var(--py) * 14px - 44vh * var(--st-t)), 0); }
  /* метки кончиков пальцев и ладоней ([data-tip], [data-palm]) остаются на месте, пока руки уезжают: иначе зазор между
     пальцами растёт и ядро первого экрана (obekt.js Obekt.layout) каждый кадр перевыделяет свой холст — замер 29.09:
     1,4 с из 2,7 с перехода, 19–30 к/с. Ядро к этому моменту уже погашено (opacity по --st-t), на экране ничего не видно. */
  html.st-js .st-wrap .stage--obekt .ruki-hand--ai [data-tip], html.st-js .st-wrap .stage--obekt .ruki-hand--ai [data-palm]{ translate:calc(42vw * var(--st-t)) calc(44vh * var(--st-t)); }
  html.st-js .st-wrap .stage--obekt .ruki-hand--human [data-tip], html.st-js .st-wrap .stage--obekt .ruki-hand--human [data-palm]{ translate:calc(-42vw * var(--st-t)) calc(44vh * var(--st-t)); }
  html.st-js .st-sticky.st-bez-yadra .stage--obekt .ruki-obekt{ display:none; }   /* погашенное ядро — вне отрисовки (JS: T ≥ 0,42) */
  /* режиссура портала первого экрана (obekt.css: сцена 45 %, чужая рука 15 %) — те же состояния с множителем скраба (рецензия № 2) */
  html.st-js .st-wrap .stage--obekt.is-portal .ruki-in{ opacity:calc(.45 * (1 - var(--st-t) * 2.5)); }
  html.st-js .st-wrap .stage--obekt.is-portal[data-hover="ai"] .ruki-hand--human, html.st-js .st-wrap .stage--obekt.is-portal[data-hover="human"] .ruki-hand--ai{ opacity:calc(.15 * (1 - var(--st-t) * 1.5)); }
  /* пока идёт скраб — без переходов (иначе прозрачность отстаёт от колеса на секунду) и без курсора на сцене;
     дыхание рук и покачивание не обнуляем, а ставим на паузу в текущей фазе — без скачка (рецензия № 8) */
  body.st-perehod .stage--obekt{ pointer-events:none; }
  body.st-perehod .stage--obekt .ruki-in, body.st-perehod .stage--obekt .ruki-side, body.st-perehod .stage--obekt .ruki-obekt, body.st-perehod .stage--obekt .ruki-hand, body.st-perehod .stage--obekt .ruki-label{ transition:none !important; }
  body.st-perehod .stage--obekt .ruki-hand, body.st-perehod .stage--obekt .ruki-hand .bob{ animation-play-state:paused !important; }
  /* в пине первый экран снят с экрана целиком (display:none): IntersectionObserver obekt.js видит «не на экране» и сам
     останавливает петли рук и ядро (klipsVisible/obSync), при выходе из пина — возобновляет. Замер 28.09 на Iris Xe: с
     visibility:hidden пин давал 49 к/с (руки и ядро работали под слоем), без первого экрана — 60,7. Поле уходит вместе с ним.
     Геометрию на выходе из пина пересчитывает синтетический resize из storony.js (рецензия № 1). */
  html.st-js body.st-pin .stage--obekt{ display:none; }
  /* портал от кнопки акта в пине: obekt.js рисует своего андроида поверх фигуры акта (два андроида в одном углу, рецензия № 7) —
     слои персонажа портала в пине скрыты, вспышка и волна остаются: это и есть отклик нажатия */
  html.st-js body.st-pin .portal-fig, html.st-js body.st-pin .portal-klip{ opacity:0 !important; }

  /* --- акт: слой поверх первого экрана --- */
  html.st-js .st-akt{ position:absolute; inset:0; z-index:8; padding:0; background:transparent; pointer-events:none; }
  html.st-js .st-blok{ display:contents; }
  html.st-js .st-chast{ display:block; position:absolute; top:0; bottom:0; width:50%; max-width:none; z-index:2; pointer-events:none; }
  html.st-js .st-chast--ai{ left:0; } html.st-js .st-chast--human{ right:0; }
  html.st-js .st-fig{ position:absolute; bottom:calc(var(--st-pol) - min(70vh, 38vw) * .022); height:min(70vh, 38vw); margin:0; max-width:none; z-index:4; opacity:0; transition:opacity 1.2s cubic-bezier(.65,0,.35,1); pointer-events:none; }
  html.st-js .st-fig--ai{ left:4vw; } html.st-js .st-fig--human{ right:4vw; }
  html.st-js .st-sticky.is-figs .st-fig{ opacity:1; transition-duration:.5s; }
  html.st-js .st-svet{ opacity:0; transition:opacity 2.4s cubic-bezier(.65,0,.35,1); }
  html.st-js .st-sticky.is-figs .st-svet{ opacity:1; }
  html.st-js .st-fig.is-puls .st-svet{ animation:st-puls 2s cubic-bezier(.37,0,.63,1); }
  html.st-js .st-fig--human.is-puls .st-svet{ animation-duration:2.2s; }
  html.st-js .st-fig.is-puls-dolgo .st-svet{ animation:st-puls 2.6s cubic-bezier(.37,0,.63,1); }
  html.st-js .st-blik{ display:block; position:absolute; inset:0; z-index:2; opacity:0; pointer-events:none; -webkit-mask:var(--fm) center bottom / contain no-repeat; mask:var(--fm) center bottom / contain no-repeat; }
  html.st-js .st-fig--ai .st-blik{ background:linear-gradient(100deg, transparent 35%, rgba(220,233,247,.55) 50%, transparent 65%); background-size:300% 100%; }
  html.st-js .st-fig--human .st-blik{ background:linear-gradient(to left, rgba(243,226,198,.28), transparent 45%); }
  html.st-js .st-fig.is-puls-dolgo .st-blik{ animation:st-blik-fig 2.6s ease-in-out; }
  html.st-js .st-kadr{ opacity:0; }
  html.st-js .st-fig.is-gotov .st-kadr{ opacity:1; }
  html.st-js .st-fig.no-klip .st-kadr{ -webkit-mask:linear-gradient(to top, #000 0, #000 calc(var(--pr, 0) * 130%), transparent calc(var(--pr, 0) * 130% + 22%)); mask:linear-gradient(to top, #000 0, #000 calc(var(--pr, 0) * 130%), transparent calc(var(--pr, 0) * 130% + 22%)); animation:st-proyav 1.8s cubic-bezier(.19,1,.22,1) both; opacity:1; }
  html.st-js.st-bez-property .st-fig.no-klip .st-kadr{ -webkit-mask:none; mask:none; }
  html.st-js.st-v-skryt .st-src{ display:none !important; }
  /* компьютер: вспышки нет — едва заметное потепление света стороны на своей половине (≤ 8 %, 1,2 с), волна тонкая и тусклая */
  html.st-js .st-vspyshka{ top:0; bottom:0; width:50%; z-index:1; background:radial-gradient(ellipse 60% 70% at 30% 80%, rgba(var(--c),.08), rgba(var(--c),.02) 55%, transparent 75%); }
  html.st-js .st-vspyshka--ai{ left:0; } html.st-js .st-vspyshka--human{ right:0; background:radial-gradient(ellipse 60% 70% at 70% 80%, rgba(var(--c),.08), rgba(var(--c),.02) 55%, transparent 75%); }
  html.st-js .st-vspyshka.is-on{ animation-duration:1.2s; }
  html.st-js .st-volna{ background:radial-gradient(circle, transparent 47.5%, rgba(var(--c),.14) 49.2%, rgba(var(--c),.14) 50.3%, transparent 52%); }
  /* ядро акта: неподвижный ореол на линии кикеров (на 18vh наезжало на опущенный заголовок) — 40 % на время акта, 100 % с
     красным бликом в финале; только пока фигуры на экране (финал больше не снимается) */
  html.st-js .st-yadro{ display:block; position:absolute; left:50vw; top:calc(var(--st-kiker) + 7px); width:min(4vw, 7vh); height:min(4vw, 7vh); transform:translate(-50%, -50%); z-index:5; pointer-events:none; border-radius:50%;
    background:radial-gradient(circle, rgba(255,250,240,.95) 0, rgba(255,240,224,.55) 18%, rgba(163,47,54,.28) 38%, rgba(163,47,54,.06) 62%, transparent 72%);
    opacity:0; transition:opacity 1.4s cubic-bezier(.65,0,.35,1); }
  html.st-js .st-yadro::after{ content:""; position:absolute; inset:-120%; border-radius:50%; background:radial-gradient(circle, rgba(255,246,236,.18), rgba(163,47,54,.08) 40%, transparent 70%); }
  html.st-js .st-sticky.is-figs.is-pin .st-yadro{ opacity:.4; }
  html.st-js .st-sticky.is-figs.is-final .st-yadro{ opacity:1; animation:st-yadro-blik 1.4s cubic-bezier(.19,1,.22,1); }
  /* заголовок акта ниже шапки, колонки у фигур: ИИ 30–48vw, человек 52–70vw; центр 48–52 пуст.
     Заголовок и кикеры — с первой строкой (is-stroki) или в пине; колонки, заголовок и кнопки видны только пока акт на
     экране (is-figs, --st-t ≥ 0,45): при возврате в первый экран акт уходит вместе с фигурами, состояние строк остаётся. */
  html.st-js .st-h2{ position:absolute; left:0; right:0; top:var(--st-h2-top); margin:0; transform:translateY(8px); font-size:var(--h2-fs); z-index:5; opacity:0; transition:opacity 1s .2s, transform 1.2s .2s; }
  html.st-js .st-sticky.is-figs.is-pin .st-h2, html.st-js .st-sticky.is-figs.is-stroki .st-h2{ opacity:1; transform:none; }
  /* колонка — флекс по высоте экрана: строка 1 через 40 px под кикером, строка 5 — на --st-niz, между ними поровну */
  html.st-js .st-kol{ position:absolute; top:0; height:100vh; box-sizing:border-box; width:18vw; padding:calc(var(--st-kiker) + 40px) 0 calc(100vh - var(--st-niz)); display:flex; flex-direction:column; justify-content:space-between; z-index:5; pointer-events:none; opacity:0; transition:opacity .8s; }
  html.st-js .st-sticky.st-tesno .st-kol{ padding-top:calc(var(--st-kiker) + 32px); }   /* строка 5 не влезла (JS, замер после шрифтов) */
  html.st-js .st-sticky.st-tesno .st-s{ font-size:calc(clamp(12px, .7rem + .15vw, 14px) - .5px); }
  html.st-js .st-sticky.is-figs .st-kol{ opacity:1; }
  html.st-js .st-kol--ai{ left:30vw; text-align:left; }
  html.st-js .st-kol--human{ left:52vw; text-align:right; }
  html.st-js .st-kiker{ position:absolute; top:var(--st-kiker); left:0; right:0; margin:0; opacity:0; transform:translateY(8px); transition:opacity 1s .3s, transform 1.2s .3s; }
  html.st-js .st-sticky.is-pin .st-kiker, html.st-js .st-sticky.is-stroki .st-kiker{ opacity:1; transform:none; }
  html.st-js .st-stroka{ position:relative; top:auto; left:auto; right:auto; margin:0; opacity:0; }
  html.st-js .st-stroka.is-on{ opacity:1; }                        /* появилась — стоит всегда (владелец 29.09) */
  html.st-js .st-stroka::before{ content:""; position:absolute; top:-3vh; bottom:-3vh; width:34vw; z-index:-1; pointer-events:none; opacity:0; background:radial-gradient(60% 55% at 50% 50%, rgba(var(--c),.13), transparent 70%); }
  html.st-js .st-kol--ai .st-stroka::before{ left:-8vw; } html.st-js .st-kol--human .st-stroka::before{ right:-8vw; }
  html.st-js .st-stroka.is-on::before{ animation:st-svet 2.2s ease-out both; }
  html.st-js .st-t{ color:var(--c-hex); }
  html.st-js .st-t, html.st-js .st-s{ --m:-20; -webkit-mask:linear-gradient(var(--dir, 90deg), #000 calc(var(--m) * 1%), transparent calc(var(--m) * 1% + 22%)); mask:linear-gradient(var(--dir, 90deg), #000 calc(var(--m) * 1%), transparent calc(var(--m) * 1% + 22%)); }
  html.st-js .st-kol--human .st-t, html.st-js .st-kol--human .st-s{ --dir:270deg; }
  html.st-js .st-stroka.is-on .st-t{ animation:st-maska 1.6s cubic-bezier(.65,0,.35,1) both, st-cvet 2.4s ease-out both; }
  html.st-js .st-stroka.is-on .st-s{ animation:st-maska 1.6s cubic-bezier(.65,0,.35,1) .3s both; }
  /* is-bylo (storony.js через 2,9 с после появления): анимации отыграли — маски и слои снимаем, конечное состояние закрепляем (рецензия № 18) */
  html.st-js .st-stroka.is-bylo .st-t, html.st-js .st-stroka.is-bylo .st-s{ animation:none; --m:120; -webkit-mask:none; mask:none; }
  html.st-js .st-stroka.is-bylo .st-t{ color:var(--fg); }
  html.st-js.st-bez-property .st-t, html.st-js.st-bez-property .st-s{ -webkit-mask:none; mask:none; }
  html.st-js .st-stroka::after{ content:""; position:absolute; left:0; right:0; bottom:-6px; height:1px; pointer-events:none; opacity:0; background:linear-gradient(var(--dir, 90deg), transparent, rgba(var(--c),.75) 45%, transparent); }
  html.st-js .st-stroka.is-on:not(.is-bylo)::after{ animation:st-blik 1.2s ease-out both; }
  html.st-js .st-kol--ai .st-stroka::after{ transform-origin:left; } html.st-js .st-kol--human .st-stroka::after{ transform-origin:right; }
  /* маркер «только»: планка знака дорисовывается 0,8 с после проявления, mono-подпись над заголовком */
  html.st-js .st-kol--human .st-stroka.m-tolko{ padding-left:0; padding-right:14px; }
  html.st-js .st-kol--human .st-planka{ left:auto; right:0; }
  html.st-js .st-planka{ transform:scaleY(0); transform-origin:top; }
  html.st-js .st-tolko{ position:static; margin:0 0 4px; line-height:1; opacity:0; }
  html.st-js .st-stroka.m-tolko{ margin-top:-14px; }
  html.st-js .st-stroka.m-tolko .st-planka{ top:14px; }
  html.st-js .st-stroka.is-on .st-planka{ animation:st-planka .8s cubic-bezier(.65,0,.35,1) 1.6s both; }
  html.st-js .st-stroka.is-on .st-tolko{ animation:st-tolko .8s ease-out 1.9s both; }
  /* доигрывание при уходе акта (is-b ставит storony.js): каждая анимация 0,8 с, не быстрее (темп владельца) */
  html.st-js .st-stroka.is-b.is-on .st-t{ animation-duration:.8s, 1.6s; }
  html.st-js .st-stroka.is-b.is-on .st-s{ animation-duration:.8s; animation-delay:0s; }
  html.st-js .st-stroka.is-b.is-on .st-planka, html.st-js .st-stroka.is-b.is-on .st-tolko{ animation-duration:.8s; animation-delay:.6s; }
  html.st-js .st-stroka.is-bylo .st-planka{ animation:none; transform:none; } html.st-js .st-stroka.is-bylo .st-tolko{ animation:none; opacity:1; }
  /* кнопки действия под колонками (владелец: «выделить») — белая заливка как «Начать анализ», при появлении свечение цветом стороны 1,2 с.
     Обе — по нижней границе, на «линии пола» --st-pol (владелец 29.09: «кнопки … по нижней границе»).
     До появления — visibility:hidden (не в порядке табуляции, рецензия № 5); появившись, стоят всегда (пока акт на экране) */
  html.st-js .st-knopka{ position:absolute; top:auto; bottom:var(--st-pol); margin:0; z-index:7; opacity:0; visibility:hidden; transform:translateY(12px); transition:opacity .8s, transform .8s cubic-bezier(.19,1,.22,1), visibility 0s .8s; pointer-events:none; }
  html.st-js .st-blok--ai .st-knopka{ left:30vw; } html.st-js .st-blok--human .st-knopka{ right:30vw; }
  html.st-js .st-sticky.is-figs .st-knopka.is-on{ opacity:1; visibility:visible; transition-delay:0s, 0s, 0s; pointer-events:auto; }
  html.st-js .st-sticky.is-figs .st-knopka.is-on:not(.is-bylo){ animation:st-knopka-svet 1.2s ease-out .2s both; }
  html.st-js .st-sticky.is-figs .st-knopka.is-on:not(:active){ transform:none; }
  html.st-js .st-sticky.is-figs .st-knopka.is-on:active{ transform:translateY(1px); }   /* отклик нажатия .btn:active (рецензия № 23) */
  /* финал (пункт очереди по времени, 1,2 с после кнопки юриста): колонки СТОЯТ, ядро 100 % с красным бликом; вопрос — по центру
     над кнопками, а при широком просвете между ними (JS: ≥ ширина вопроса + 48 px) — на их линии. Только при is-figs:
     финал не снимается, без этого вопрос висел бы над первым экраном после возврата */
  html.st-js .st-vopros{ position:absolute; left:0; right:0; top:auto; bottom:calc(var(--st-pol) + var(--st-kn-h) + 14px); margin:0; transform:none; opacity:0; z-index:6; pointer-events:none; transition:opacity 1s .6s; }
  html.st-js .st-sticky.st-vopros-liniya .st-vopros{ bottom:calc(var(--st-pol) + var(--st-kn-h) / 2); transform:translateY(50%); }
  html.st-js .st-sticky.is-figs.is-final .st-vopros{ opacity:1; }
}
/* невысокие окна (≤ 800 px, в т. ч. 1366×768 и 1920×800): шрифт строк меньше (раскладку держат переменные сцены) */
@media (min-width: 861px) and (max-height: 799px){
  html.st-js .st-t{ font-size:clamp(12px, .65rem + .3vw, 14px); } html.st-js .st-s{ font-size:clamp(11.5px, .66rem + .18vw, 13.5px); line-height:1.35; }
  html.st-js .st-sticky.st-tesno .st-s{ font-size:calc(clamp(11.5px, .66rem + .18vw, 13.5px) - .5px); }
}

@keyframes st-puls{ 0%{ filter:brightness(1); } 30%{ filter:brightness(2); } 100%{ filter:brightness(1); } }
@keyframes st-blik-fig{ 0%{ opacity:0; background-position:120% 0; } 40%{ opacity:1; } 100%{ opacity:0; background-position:-120% 0; } }
@property --pr{ syntax:"<number>"; inherits:false; initial-value:0; }
@property --m{ syntax:"<number>"; inherits:false; initial-value:-20; }
@keyframes st-proyav{ from{ --pr:0; opacity:0; } 35%{ opacity:1; } to{ --pr:1; opacity:1; } }
@keyframes st-yadro-blik{ 0%{ filter:brightness(1); } 25%{ filter:brightness(2.4) drop-shadow(0 0 1.2vw rgba(163,47,54,.9)); } 100%{ filter:brightness(1); } }
@keyframes st-svet{ 0%{ opacity:0; } 35%{ opacity:1; } 100%{ opacity:.35; } }
@keyframes st-maska{ from{ --m:-20; } to{ --m:120; } }
@keyframes st-cvet{ from{ color:var(--c-hex); } 60%{ color:var(--c-hex); } to{ color:var(--fg); } }
@keyframes st-blik{ 0%{ opacity:0; transform:scaleX(.2); } 40%{ opacity:1; } 100%{ opacity:0; transform:scaleX(1); } }
@keyframes st-planka{ to{ transform:scaleY(1); } }
@keyframes st-tolko{ to{ opacity:1; } }
@keyframes st-knopka-svet{ 0%{ box-shadow:0 0 0 rgba(var(--c),0); } 30%{ box-shadow:0 0 34px rgba(var(--c),.6), 0 0 8px rgba(var(--c),.4); } 100%{ box-shadow:0 0 0 rgba(var(--c),0); } }
@keyframes st-vspyshka{ 0%{ opacity:0; } 18%{ opacity:1; } 100%{ opacity:0; } }
@keyframes st-volna{ 0%{ transform:scale(.06); opacity:1; } 100%{ transform:scale(4); opacity:0; } }
@keyframes st-luzha{ 0%{ opacity:0; } 15%{ opacity:1; } 80%{ opacity:1; } 100%{ opacity:.4; } }
@keyframes st-sborka{ from{ transform:scale(1.06); } to{ transform:scale(1); } }

/* reduce-motion: storony.js не ставит st-js (страница в потоке); страховка, если класс всё же есть */
@media (prefers-reduced-motion: reduce){
  html.st-js .st-stroka, html.st-js .st-kiker, html.st-js .st-h2, html.st-js .st-kol, html.st-js .st-fig, html.st-js .st-svet, html.st-js .st-kadr, html.st-js .st-knopka, html.st-js .st-vopros{ opacity:1 !important; visibility:visible !important; transition:none !important; animation:none !important; transform:none !important; }
  html.st-js .st-t, html.st-js .st-s{ -webkit-mask:none !important; mask:none !important; animation:none !important; color:var(--fg); }
  html.st-js .st-stroka::before, html.st-js .st-stroka::after, html.st-js .st-blik{ display:none; } html.st-js .st-planka{ transform:none; } html.st-js .st-tolko{ opacity:1; }
  .st-vspyshka, .st-volna, .st-luzha, .st-vihr{ display:none !important; } .st-fig.is-klip{ animation:none !important; }
}