/* rokuzmin.ru · оформление объёмной сцены: холст, постер до загрузки, подписи, подсказки, панель управления,
   подпись под сценой, текстовый вид. Движок — js/rz-3d.js; сцены — js/rz-scenes.js.
   Правило касания: пока не включён режим «Двигать», вертикальный жест отдаётся странице (touch-action: pan-y),
   иначе на телефоне сцена во весь экран запирает прокрутку. */

.rz3d { position: relative; margin: 0; min-height: 320px; isolation: isolate; container-type: inline-size; }
.rz3d-stage { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; background: var(--s-bg); touch-action: pan-y;
  user-select: none; -webkit-user-select: none; cursor: grab; outline: none; }
.rz3d-stage:focus-visible { box-shadow: inset 0 0 0 2px var(--border-focus); }
.rz3d-stage.is-drag { cursor: grabbing; }
.rz3d[data-edit] .rz3d-stage { touch-action: none; }
.rz3d-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* постер: виден, пока объём собирается, и остаётся, если WebGL нет; шары ожидания — признак ожидания (ambient-motion) */
.rz3d-poster { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; color: var(--text-secondary);
  background: radial-gradient(60% 55% at 50% 60%, color-mix(in srgb, var(--s-glass) 22%, transparent), transparent 70%),
              repeating-linear-gradient(0deg, transparent 0 39px, color-mix(in srgb, var(--s-grid) 55%, transparent) 39px 40px),
              repeating-linear-gradient(90deg, transparent 0 39px, color-mix(in srgb, var(--s-grid) 55%, transparent) 39px 40px), var(--s-bg);
  transition: opacity .5s var(--motion-ease-fade); }
.rz3d-poster__t { font: 500 13px var(--font-mono); }
.rz3d[data-ready] .rz3d-poster { opacity: 0; pointer-events: none; }
.rz3d[data-rz3d-fallback] .rz3d-poster .am-orbs, html[data-rz3d-off] .rz3d-poster .am-orbs { display: none; }
.rz3d[data-rz3d-fallback] .rz3d-poster__t::after, html[data-rz3d-off] .rz3d-poster__t::after { content: " Объём недоступен на этом устройстве — ниже то же текстом."; }
.rz3d-poster .am-orbs { display: inline-flex; gap: 6px; }
.rz3d-poster .am-orbs > i { width: 9px; height: 9px; border-radius: 50%; background: var(--s-flow-up); animation: rz-orb 1.2s ease-in-out infinite; }
.rz3d-poster .am-orbs > i:nth-child(2) { animation-delay: .15s; } .rz3d-poster .am-orbs > i:nth-child(3) { animation-delay: .3s; }
@keyframes rz-orb { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1); } }

/* подписи на сцене: основные стоят всегда, второстепенные прячутся при наложении (движок) */
.rz3d-labels { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.rz3d-dl { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 6px; max-width: 260px; padding: 3px 9px 3px 7px;
  border-radius: 999px; border: 1px solid color-mix(in srgb, var(--s-label-ink) 16%, transparent); background: color-mix(in srgb, var(--s-label-bg) 92%, transparent);
  color: var(--s-label-ink); font: 500 12.5px/1.35 var(--font-text); white-space: nowrap; pointer-events: auto; cursor: pointer; will-change: transform;
  box-shadow: 0 2px 10px -4px color-mix(in srgb, var(--bg-veil) 40%, transparent); transition: opacity .2s var(--motion-ease), background-color .15s var(--motion-ease); }
.rz3d-dl > i { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--s-flow-down); box-shadow: 0 0 0 3px color-mix(in srgb, var(--s-flow-down) 25%, transparent); }
.rz3d-dl:hover, .rz3d-dl.is-hot { background: var(--s-label-ink); color: var(--s-label-bg); }
.rz3d-dl:hover > i, .rz3d-dl.is-hot > i { background: var(--s-flow-up); }
.rz3d-dl.is-off { opacity: 0; pointer-events: none; visibility: hidden !important; }
.rz3d-dl.is-name { cursor: default; padding: 3px 9px; background: color-mix(in srgb, var(--s-label-bg) 80%, transparent); font-size: 12px; }
.rz3d-dl.is-name b { font-weight: 700; }
.rz3d-dl.is-name span { color: var(--s-label-sub); margin-left: 2px; }
.rz3d-dl.is-name small { margin-left: 6px; padding: 1px 6px; border-radius: 999px; background: var(--state-warning-bg); color: var(--state-warning); font-size: 11px; }
.rz3d-dl.is-name i[class^="ruki-"] { font-style: normal; font-weight: 700; margin: 0 1px; }
.rz3d-dl .ruki-r { color: var(--ruki-r); } .rz3d-dl .ruki-u { color: var(--ruki-u); } .rz3d-dl .ruki-k { color: var(--ruki-k); } .rz3d-dl .ruki-i { color: var(--ruki-i); }
.rz3d-dl.is-level { border-radius: 6px; font-family: var(--font-mono); }
/* пункты перечня «Автоматизация производственных систем»: всплывают на своей остановке и улетают в плашку
   (js/rz.js); сама подпись двигается каждый кадр через transform, поэтому всплывают её части */
.rz3d-dl.is-chain { max-width: min(420px, calc(100vw - 16px)); padding: 5px 12px 5px 9px; font-size: 13.5px; }
.rz3d-dl.is-chain:not(.is-off) > span, .rz3d-dl.is-chain:not(.is-off) > i { animation: rz-emerge .6s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes rz-emerge { from { opacity: 0; translate: 0 14px; scale: .55; } }
.rz3d-dl.is-picked { opacity: 0 !important; pointer-events: none; }
/* пункт, закрытый ползунком в плашке страницы: подписи на сцене нет, ждёт маяк у предмета (js/rz.js, js/rz-3d.js);
   is-wait прячет любую подпись до её часа — и сообщение о сбое в ЦОД, пока сбоя нет */
.rz3d-dl.is-slot { cursor: default; pointer-events: none; }
.rz3d-dl.is-wait { visibility: hidden !important; }
/* сообщение мониторинга о сбое в ЦОД: над пультом, красное, с мигающим огоньком (js/rz-scenes.js); родитель в
   селекторе — чтобы перебить общий вид подписей ночной сцены */
.rz3d-labels .rz3d-dl.is-alarm { max-width: 260px; padding: 7px 12px 7px 10px; border-radius: 10px; white-space: normal; cursor: default; pointer-events: none;
  background: var(--s-led-err); border-color: color-mix(in srgb, var(--text-on-dark) 45%, transparent); color: var(--text-on-dark);
  font: 600 12.5px/1.35 var(--font-text); box-shadow: 0 0 24px -4px var(--s-led-err); animation: rz-alarm 1s ease-in-out infinite; }
.rz3d-labels .rz3d-dl.is-alarm > i { width: 9px; height: 9px; background: var(--text-on-dark); box-shadow: 0 0 8px var(--text-on-dark); animation: rz-blink .5s steps(2, jump-none) infinite; }
@keyframes rz-alarm { 50% { box-shadow: 0 0 34px -2px var(--s-led-err); } }
/* подсказка в ЦОД «Можно передвинуть» над объёмной стрелкой (js/rz-scenes.js): тоном стрелки, мягко дышит */
.rz3d-labels .rz3d-dl.is-hint { padding: 5px 12px 5px 10px; cursor: default; pointer-events: none; font: 600 13px/1.3 var(--font-text);
  border-color: var(--s-flow-up); background: color-mix(in srgb, var(--s-flow-up) 24%, var(--s-label-bg)); color: var(--s-label-ink);
  box-shadow: 0 0 18px -4px var(--s-flow-up); animation: rz-hint-glow 1.8s ease-in-out infinite; }
.rz3d-labels .rz3d-dl.is-hint > i { background: var(--s-flow-up); box-shadow: 0 0 0 3px color-mix(in srgb, var(--s-flow-up) 30%, transparent); }
@keyframes rz-hint-glow { 50% { box-shadow: 0 0 28px -2px var(--s-flow-up); } }
@keyframes rz-blink { 50% { opacity: .15; } }

/* подсказка по подписи: заголовок и текст пункта */
.rz3d-tip { position: absolute; left: 0; top: 0; z-index: 4; max-width: min(320px, calc(100% - 16px)); padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--border-divider); background: var(--bg-drawer); color: var(--text-primary); box-shadow: var(--elev-3); font-size: 14px; line-height: 1.45; pointer-events: none; }
.rz3d-tip[hidden] { display: none; }
.rz3d-tip b { display: block; margin-bottom: 4px; font: 700 15px/1.25 var(--font-heading); }
.rz3d-hover { position: absolute; left: 0; top: 0; z-index: 3; padding: 5px 9px; border-radius: 8px; background: var(--bg-drawer); color: var(--text-primary);
  box-shadow: var(--elev-2); font-size: 12.5px; pointer-events: none; white-space: nowrap; }
.rz3d-hover[hidden] { display: none; }

/* панель управления: значки в строку поверх сцены, справа внизу */
.rz3d-bar { position: absolute; right: 12px; bottom: 12px; z-index: 5; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; padding: 4px; border-radius: 12px;
  background: color-mix(in srgb, var(--bg-card) 88%, transparent); border: 1px solid var(--border-divider); box-shadow: var(--elev-2);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.rz3d-b { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 34px; height: 34px; padding: 0 8px; border: 0; border-radius: 8px;
  background: transparent; color: var(--text-primary); font: 500 13px var(--font-text); cursor: pointer; }
.rz3d-b:hover:not(:disabled) { background: var(--action-secondary); }
.rz3d-b:disabled { opacity: .35; cursor: default; }
.rz3d-b[aria-pressed="true"] { background: var(--action-primary); color: var(--action-primary-text); }
.rz3d-b .rz-ic { width: 18px; height: 18px; }
.rz3d-b .rz-ic--play { display: none; }
.rz3d-b[aria-pressed="true"] .rz-ic--play { display: block; } .rz3d-b[aria-pressed="true"] .rz-ic--pause { display: none; }
/* «Двигать» нужен на касании: мышью предметы берутся и так */
.rz3d-b--mode { display: none; }
/* пока в ЦОД стоит стрелка «Можно передвинуть», «Двигать» дышит её тоном: пальцем предметы берутся только в этом режиме */
.rz3d[data-hint]:not([data-edit]) .rz3d-b--mode { box-shadow: 0 0 0 2px var(--s-flow-up); animation: rz-hint-glow 1.8s ease-in-out infinite; }
@media (pointer: coarse) { .rz3d-b--mode { display: inline-flex; } .rz3d-b[data-rz3d-act="rotl"], .rz3d-b[data-rz3d-act="rotr"] { display: none; } .rz3d[data-selected] .rz3d-b[data-rz3d-act="rotl"], .rz3d[data-selected] .rz3d-b[data-rz3d-act="rotr"] { display: inline-flex; } }
@media (max-width: 560px) { .rz3d-b[data-rz3d-act="in"], .rz3d-b[data-rz3d-act="out"], .rz3d-b[data-rz3d-act="full"] { display: none; } .rz3d-b--text span { display: none; } }

/* подпись под сценой: название и как обращаться; на касании — своя подсказка */
.rz3d-cap { position: absolute; left: 14px; bottom: 16px; z-index: 5; max-width: calc(100% - 420px); font-size: 12.5px; line-height: 1.4; color: var(--text-secondary); pointer-events: none; }
@container (max-width: 760px) { .rz3d-cap { display: none; } }
.rz3d-cap b { display: block; color: var(--text-primary); font: 700 14px var(--font-heading); }
.rz3d-help--touch { display: none; }
@media (pointer: coarse) { .rz3d-help--touch { display: inline; } .rz3d-help--mouse { display: none; } }
@media (max-width: 760px) { .rz3d-cap { display: none; } }

/* текстовый вид: для программ чтения с экрана — всегда; глазами — по кнопке «Текстом» или когда объём недоступен */
.rz3d-alt { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rz3d-alt.is-open, .rz3d[data-rz3d-fallback] .rz3d-alt, html[data-rz3d-off] .rz3d-alt {
  position: absolute !important; right: 12px; top: 12px; z-index: 6; width: min(380px, calc(100% - 24px)); height: auto; max-height: calc(100% - 76px); overflow: auto; clip: auto;
  white-space: normal; padding: 16px 18px; border-radius: 14px; background: var(--bg-drawer); color: var(--text-primary); box-shadow: var(--elev-4); font-size: 14px; }
.rz3d-alt__h { margin: 0 0 8px; font: 800 16px var(--font-heading); }
.rz3d-alt ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.rz3d-alt li b { display: block; font-weight: 700; }
.rz3d-alt li { color: var(--text-secondary); }
.rz3d-alt li b { color: var(--text-primary); }

/* во весь экран: и штатно, и запасным классом там, где штатного нет */
.rz3d:fullscreen, .rz3d[data-full] { width: 100vw; height: 100vh; border-radius: 0; }
.rz3d[data-full] { position: fixed; inset: 0; z-index: 80; }

/* стиль подписей по стилю варианта */
body[data-rz-style="glow"] .rz3d-dl { border-color: color-mix(in srgb, var(--s-flow-up) 45%, transparent); box-shadow: 0 0 14px -4px color-mix(in srgb, var(--s-flow-up) 60%, transparent); }
body[data-rz-style="flat"] .rz3d-dl { border-radius: 2px; border: 1.5px solid var(--s-label-ink); box-shadow: 3px 3px 0 var(--s-label-ink); font-weight: 600; }
body[data-rz-style="flat"] .rz3d-dl > i { border-radius: 0; }
body[data-rz-style="clay"] .rz3d-dl { font-family: var(--font-heading); font-weight: 600; letter-spacing: -.005em; }

@media (prefers-reduced-motion: reduce) { .rz3d-poster .am-orbs > i { animation: none; opacity: .7; } .rz3d-poster, .rz3d-dl { transition: none; } .rz3d-dl.is-chain > span, .rz3d-dl.is-chain > i { animation: none !important; }
  .rz3d-labels .rz3d-dl.is-alarm, .rz3d-labels .rz3d-dl.is-alarm > i, .rz3d-labels .rz3d-dl.is-hint, .rz3d[data-hint]:not([data-edit]) .rz3d-b--mode { animation: none; } }