/* rokuzmin.ru · «Диспетчерская»: один мир предприятия закреплён во весь экран, прокрутка ведёт камеру по
   остановкам, текст идёт поверх сцены стеклянными плашками. Сцена ночная в обеих темах (узел data-theme="dark"),
   плашки — в теме страницы. Вторая плашка — перечень «Автоматизация производственных систем»: один раздел, пункты в
   нём открываются ползунками, и камера летит к предмету каждого. Созвучие — двузвучие Иттена: синий (данные) и
   оранжевый (производство). */

.v1 .rz-header { position: fixed; left: 0; right: 0; background: color-mix(in srgb, var(--bg-header) 70%, transparent); border-bottom-color: color-mix(in srgb, var(--border-divider) 60%, transparent); }
.v1 .rz-main { padding-top: 0; }
.v1-flight { position: relative; }
.v1-stage { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 560px; border-radius: 0; --rz-shift-x: .2; --rz-shift-y: -.02;
  --rz3d-inset-top: var(--rz-header-h); }
.v1-steps { position: relative; z-index: 3; margin-top: -100vh; margin-top: -100svh; pointer-events: none; }
.v1-step { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: calc(var(--rz-header-h) + 32px) var(--rz-gutter) 96px; }
.v1-card { pointer-events: auto; width: min(100%, 480px); padding: 28px 28px 26px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--border-divider) 80%, transparent);
  background: color-mix(in srgb, var(--bg-card) 86%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); box-shadow: var(--elev-4); }
.v1-card--wide { width: min(100%, 980px); }
.v1-card--hero { width: min(100%, 580px); }
.v1-card--hero .rz-portrait { --rz-ph: 108px; float: right; margin: 0 0 8px 18px; }
.v1-card .rz-h2 { font-size: clamp(22px, 2.2vw, 30px); }
.v1-card .rz-text, .v1-card .rz-points, .v1-card .rz-domain__link { font-size: 15px; }
.v1-card--hero .rz-h1 { font-size: clamp(40px, 4.6vw, 64px); }
.v1-card--hero .rz-lead { font-size: 17px; }
.v1-stage .rz3d-cap { display: none; }
.v1-card .rz-text { max-width: none; }
.v1-card .rz-lead { max-width: none; }
/* контакты — своей карточкой, без второй стеклянной рамки вокруг */
.v1-card--contact { width: min(100%, 640px); padding: 0; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.v1-card--contact .rz-contact { box-shadow: var(--elev-4); }
/* точки разделов справа: видны, пока идёт полёт (признак ставит js/rz.js) */
.v1-dots { position: fixed; right: 16px; top: 50%; z-index: 30; display: grid; gap: 10px; transform: translateY(-50%); opacity: 0; pointer-events: none; transition: opacity .3s var(--motion-ease); }
.v1-dots[data-in] { opacity: 1; pointer-events: auto; }
.v1-dots a { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--text-on-dark) 70%, transparent); background: transparent; }
.v1-dots a[aria-current="true"] { background: var(--s-flow-down); border-color: var(--s-flow-down); box-shadow: 0 0 10px var(--s-flow-down); }

/* ── Перечень «Автоматизация производственных систем» ──
   Плашка — обычный раздел: прокрутка листает её одним шагом. Рукой она не прокручивается: колесо и палец над ней
   листают страницу — иначе, когда перечень хоть на строку выше плашки, она забирала прокрутку себе и страница
   вставала. Нужную строку в видимую часть выводит js/rz.js */
.v1-card--chain { position: relative; width: min(100%, 500px); max-height: calc(100vh - var(--rz-header-h) - 48px);
  max-height: calc(100svh - var(--rz-header-h) - 48px); overflow: hidden; }
.rz-chain { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 14px; }
.rz-chain__lvl { display: grid; gap: 6px; }
.rz-chain__h { display: flex; align-items: center; gap: 10px; margin: 0; font: 700 15.5px/1.2 var(--font-heading); }
.rz-chain__h b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: var(--action-secondary); color: var(--text-secondary); font: 700 12px var(--font-mono);
  transition: background-color .3s var(--motion-ease), color .3s var(--motion-ease); }
.rz-chain__lvl[data-now] .rz-chain__h b { background: var(--action-primary); color: var(--action-primary-text); }
.rz-chain__items { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.rz-chain__item { display: grid; grid-template-columns: 2.7em 1fr; gap: 4px; padding: 2px 6px; border-radius: 6px; font-size: 14.5px; line-height: 1.4; }
.rz-chain__n { font: 500 12.5px/1.65 var(--font-mono); color: var(--rz-accent-ink); }
.rz-chain__t { justify-self: start; color: var(--text-primary); transition: color .35s var(--motion-ease); }
/* Сборка: каждый пункт закрыт ползунком (js/rz.js). Шторка лежит поверх текста — по всем его строкам и не короче
   170 точек, чтобы было за что тянуть; по ней бежит блик: здесь что-то появится. Ручку тянут вправо — шторка
   открывает текст слева от ручки (--p от 0 до 1); пункт открыт — шторки нет, строка вспыхивает. Ползунки — в
   синих тонах: ручка — основной цвет действия, шторка — его светлый оттенок */
.is-collecting .rz-chain__t { position: relative; }
.is-collecting .rz-chain__item:not([data-in]) .rz-chain__n { color: var(--text-muted); }
.rz-chain__cover { position: absolute; z-index: 1; left: -6px; top: -2px; bottom: -2px; width: max(calc(100% + 12px), 170px); cursor: grab; touch-action: pan-y;
  border-radius: 8px; outline: none; -webkit-user-select: none; user-select: none; }
.rz-chain__cover:focus-visible { box-shadow: 0 0 0 2px var(--border-focus); }
.rz-chain__cover:active { cursor: grabbing; }
.rz-chain__fill { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; background: color-mix(in srgb, var(--action-primary) 10%, var(--action-secondary));
  border: 1px dashed color-mix(in srgb, var(--action-primary) 45%, transparent); clip-path: inset(0 0 0 calc(var(--p, 0) * 100%)); }
.rz-chain__fill::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--bg-card) 75%, transparent), transparent);
  transform: translateX(-110%); animation: rz-sheen 2.6s ease-in-out infinite; }
@keyframes rz-sheen { 55%, 100% { transform: translateX(260%); } }
.rz-chain__knob { position: absolute; top: 50%; left: clamp(0px, calc(var(--p, 0) * 100% - var(--kn, 26px) / 2), calc(100% - var(--kn, 26px)));
  width: var(--kn, 26px); height: var(--kn, 26px); margin-top: calc(var(--kn, 26px) / -2);   /* --kn — размер ручки: на узком экране от --fs */
  display: grid; place-items: center; border-radius: 50%; background: var(--action-primary); color: var(--action-primary-text);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--action-primary) 22%, transparent), 0 2px 8px -2px color-mix(in srgb, var(--action-primary) 70%, transparent); }
.rz-chain__knob svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.rz-chain__knob::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--action-primary); pointer-events: none; opacity: 0; }
.rz-chain__item.is-next .rz-chain__knob::after { animation: rz-knob 1.8s ease-out infinite; }   /* пульсирует ручка следующего закрытого пункта */
@keyframes rz-knob { from { opacity: .8; transform: scale(1); } to { opacity: 0; transform: scale(1.8); } }
.rz-chain__item.is-snap .rz-chain__fill { transition: clip-path .32s cubic-bezier(.3, .7, .2, 1); }
.rz-chain__item.is-snap .rz-chain__knob { transition: left .32s cubic-bezier(.3, .7, .2, 1); }
/* пункт открывается — ползунок доезжает сам: шторка уезжает медленнее, чтобы было видно, как */
.rz-chain__item.is-glide .rz-chain__fill { transition-duration: .65s; }
.rz-chain__item.is-glide .rz-chain__knob { transition-duration: .65s; }
.rz-chain__item.is-hint .rz-chain__knob { animation: rz-hint .7s cubic-bezier(.3, .7, .2, 1); }
@keyframes rz-hint { 40% { translate: 22px 0; } }
.is-collecting .rz-chain__item[data-in] { animation: rz-land .9s var(--motion-ease) both; }
/* Вертикальный ползунок в левом поле плашки (js/rz.js): полоса от первой строки до последней, ручка — у строки
   пункта, предмет которого показывает камера, пройденное закрашено. Ручку тянут, по полосе щёлкают — камера летит к
   предмету пункта; палец мимо ручки листает страницу. Синий, как ползунки пунктов */
.rz-chain__rail { position: absolute; left: 8px; width: 14px; z-index: 2; cursor: pointer; touch-action: pan-y; }
.rz-chain__rail::before { content: ""; position: absolute; left: 6px; top: 0; bottom: 0; width: 2px; border-radius: 1px; background: var(--border-default); opacity: .55; }
.rz-chain__rail-fill { position: absolute; left: 6px; top: 0; width: 2px; height: 0; border-radius: 1px; background: var(--action-primary); transition: height .45s cubic-bezier(.3, .7, .2, 1); }
.rz-chain__rail-thumb { position: absolute; left: 2px; top: -13px; width: 10px; height: 26px; border-radius: 5px; background: var(--action-primary); cursor: grab; touch-action: none; transition: transform .45s cubic-bezier(.3, .7, .2, 1);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--action-primary) 20%, transparent), 0 2px 8px -2px color-mix(in srgb, var(--action-primary) 70%, transparent); will-change: transform; }
.rz-chain__rail-thumb::before { content: ""; position: absolute; inset: -9px -11px; }
.is-railing .rz-chain__rail-thumb { cursor: grabbing; transition: none; }
.rz-chain__rail.is-idle .rz-chain__rail-thumb { opacity: .4; box-shadow: none; }
.is-railing .rz-chain__rail-fill { transition: none; }
/* пункт, предмет которого сейчас показывает камера: так видно, что прокрутка идёт по перечню и когда все открыты */
.rz-chain__item { transition: background-color .3s var(--motion-ease); }
.is-collecting .rz-chain__item.is-here { background: color-mix(in srgb, var(--action-primary) 11%, transparent); box-shadow: inset 3px 0 0 var(--action-primary); }
/* открытый пункт — кнопка к его предмету (js/rz.js, armRow): при наведении строка подсвечивается, текст подчёркнут */
.rz-chain__item.is-pick { cursor: pointer; }
.rz-chain__item.is-pick:not(.is-here):hover { background: color-mix(in srgb, var(--action-primary) 8%, transparent); }
.rz-chain__item.is-pick:hover .rz-chain__t { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--action-primary) 70%, transparent); text-underline-offset: 3px; }
.rz-chain__t[role="button"]:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; border-radius: 3px; }
@keyframes rz-land { from { background-color: color-mix(in srgb, var(--s-flow-up) 30%, transparent); } }

/* ── Узкий экран, до 1080 точек: сцена сверху, плашка внизу ──
   Плашка — 80 % ширины экрана у левого края: справа видна сцена; по высоте — от шапки до панели сцены (решение
   владельца 07.10.2026). Размер текста — переменная --fs: на телефоне от высоты экрана. Если содержимое всё равно
   выше плашки, js/rz.js (initFit) уменьшает --fs по полточки, не мельче 11; дальше плашка прокручивается, а перечень
   выводит нужную строку сам, как прежде */
@media (max-width: 1080px) {
  .v1-stage { --rz-shift-x: 0; --rz-shift-y: -.3; }
  .v1-step { align-items: flex-end; justify-content: flex-start; padding: calc(var(--rz-header-h) + 16px) 12px 76px; }
  .v1-card, .v1-card--wide, .v1-card--hero, .v1-card--chain, .v1-card--contact { width: 80vw; max-width: 80vw; }
  .v1-card { --fs: 15px; font-size: var(--fs); max-height: calc(100vh - var(--rz-header-h) - 92px); max-height: calc(100svh - var(--rz-header-h) - 92px);
    overflow: auto; padding: 16px; }
  .v1-card--contact { padding: 0; }
  .v1-dots { display: none; }
  .v1-card .rz-h2 { font-size: calc(var(--fs) * 1.55); margin-bottom: 10px; }
  .v1-card .rz-eyebrow { font-size: 11px; margin-bottom: 6px; }
  .v1-card .rz-text, .v1-card .rz-points, .v1-card .rz-domain__link { font-size: var(--fs); }
  .v1-card .rz-points { gap: 5px; }
  .v1-card--hero .rz-h1 { font-size: calc(var(--fs) * 2.5); }
  .v1-card--hero .rz-lead { font-size: calc(var(--fs) * 1.05); margin-top: 10px; }
  .v1-card--hero .rz-kicker { font-size: 11px; margin-bottom: 8px; }
  .v1-card--hero .rz-portrait { --rz-ph: 84px; }
  /* перечень — внизу, как прочие плашки: сцена остаётся сверху; рукой не прокручивается */
  .v1-card--chain { overflow: hidden; padding: 14px 14px 12px; }
  .v1-card--chain .rz-h2 { font-size: calc(var(--fs) * 1.4); }
  .rz-chain { gap: 4px; margin-top: 8px; }
  .rz-chain__rail { left: 3px; }
  .rz-chain__item { font-size: calc(var(--fs) * .95); line-height: 1.32; padding-top: 1px; padding-bottom: 1px; --kn: calc(var(--fs) * 1.5); }
  /* номер пункта, заголовок уровня с его плашкой и ручка ползунка — тоже от --fs. Прежде они были постоянного размера,
     и высоту строки держал номер — 21 точка при любом тексте: initFit уменьшал текст, а перечень короче не
     становился, и на телефоне в плашку не влезал уровень АСУТП (замечание владельца 07.10.2026) */
  .rz-chain__lvl { gap: 3px; }
  .rz-chain__h { gap: 8px; font-size: calc(var(--fs) * 1.05); }
  .rz-chain__h b { width: calc(var(--fs) * 1.5); height: calc(var(--fs) * 1.5); border-radius: 6px; font-size: calc(var(--fs) * .8); }
  .rz-chain__n { font-size: calc(var(--fs) * .8); line-height: 1.55; }
  .rz-chain__knob svg { width: calc(var(--kn) * .54); height: calc(var(--kn) * .54); }
  /* методика — лентой со сцеплением (скил snap-rail): карточки листаются вбок, следующая видна краем; шесть
     карточек столбцом или сеткой в плашку не помещаются */
  .v1-card .rz-methods { display: flex; gap: 10px; margin-top: 12px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory;
    padding-bottom: 6px; }
  .v1-card .rz-methods > li { flex: 0 0 min(86%, 300px); scroll-snap-align: start; }
}
/* телефон: текст от высоты экрана; снимок выступления — полосой, чтобы текст и награда помещались */
@media (max-width: 700px) {
  .v1-card { --fs: clamp(12px, 1.68svh, 14.5px); }
  .v1-card--hero .rz-portrait { --rz-ph: 64px; margin: 0 0 4px 12px; }
  .v1-card .rz-flip { min-height: 0; }
  .v1-card .rz-flip .uf-face { padding: 14px; }
  .v1-card .rz-flip__front span { font-size: calc(var(--fs) * 1.45); }
  .v1-card .rz-flip__back p { font-size: var(--fs); }
  .v1-card .rz-flip__back ol { font-size: calc(var(--fs) * .95); }
  .v1-card .rz-speaking { gap: 12px; margin-top: 10px; }
  .v1-card .rz-stagephoto img { aspect-ratio: auto; height: clamp(110px, 24svh, 240px); object-position: 50% 25%; }
  .v1-card .rz-award { padding: 12px; gap: 10px; }
  .v1-card .rz-award b { font-size: calc(var(--fs) * 1.15); }
  .v1-card .rz-award p { font-size: calc(var(--fs) * .95); }
}
@media (prefers-reduced-motion: reduce) { .is-collecting .rz-chain__item[data-in], .rz-chain__fill::after, .rz-chain__knob::after, .rz-chain__item.is-hint .rz-chain__knob { animation: none; }
  .rz-chain__item.is-snap .rz-chain__fill, .rz-chain__item.is-snap .rz-chain__knob, .rz-chain__rail-thumb, .rz-chain__rail-fill { transition: none; } }

/* ══ Облегчённый вид (html[data-lite]; решение — в голове страницы, rz_pages.LITE_BOOT) ══
   Размытие под шапкой, плашками и панелью сцены пересчитывается в каждом кадре: сцена под ними живая. Вместо него —
   подложка плотнее. Украшения стоят: бегущие блики, кромки, орбиты, морфинг, пятно по кромке кнопок, каретка печати.
   Смысловое движение остаётся: пульс ручки следующего пункта, тревога и подсказка в ЦОД, ожидание. Живой фон не
   рисуется — вместо холста тот же рисунок неподвижным слоем (--bg-poster) */
html[data-lite] .rz-header { -webkit-backdrop-filter: none; backdrop-filter: none; background: color-mix(in srgb, var(--bg-header) 97%, transparent); }
html[data-lite] .v1-card:not(.v1-card--contact) { -webkit-backdrop-filter: none; backdrop-filter: none; background: color-mix(in srgb, var(--bg-card) 96%, transparent); }
html[data-lite] .rz3d-bar { -webkit-backdrop-filter: none; backdrop-filter: none; background: color-mix(in srgb, var(--bg-card) 97%, transparent); }
html[data-lite] .rz-dlg::backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-lite] .gl-progress::after { animation: none; opacity: 0; }
html[data-lite] .gl-laser::after, html[data-lite] .gl-corners::before, html[data-lite] .gl-corners::after, html[data-lite] .am-morph, html[data-lite] .am-orbit > i,
html[data-lite] .rz-chain__fill::after, html[data-lite] .btn::after { animation: none !important; }
html[data-lite] .er-type[data-er-in] { animation: none; border-right-color: transparent; }   /* каретка не мигает и не стоит: строка просто допечатана */
html[data-lite] .am-orbit > i { transform: rotate(calc(var(--i, 0) * 120deg)) translateX(var(--am-orbit-r)); }
html[data-lite] .qb-canvas { display: none; }
html[data-lite] body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: var(--bg-poster); pointer-events: none; }