/* Макет, версия 2 (после разбора Codex): спокойное движение.
   Классы на <html>:
     m-viz   — постоянные правки вида, от движения не зависят (ставит скрипт);
     m-on    — движение разрешено;
     m-intro — идёт вступление первого экрана (ставится в <head> до первой отрисовки, снимается после);
     m-still — движение выключено (настройка системы или кнопка): гасится всё, включая анимации боевой страницы.
   Правило: читаемый текст и кнопки никогда не прячутся. */

/* ---------- постоянный вид ---------- */
.m-tilt{position:relative;width:100%;height:100%;z-index:2}
.m-tilt > picture{width:100%;height:100%;display:block;position:relative;z-index:2;
  -webkit-mask-image:radial-gradient(closest-side,#000 70%,transparent 99%);
  mask-image:radial-gradient(closest-side,#000 70%,transparent 99%)}
.m-tilt > picture > img{width:100%;height:100%;object-fit:contain;display:block}
.m-glow{position:absolute;inset:8%;border-radius:50%;pointer-events:none;z-index:0;opacity:.6;
  background:radial-gradient(circle,rgba(228,198,88,.3),rgba(140,80,220,.12) 45%,transparent 70%)}

/* первый экран помещается в окно: кнопки и цифры видны без прокрутки на 1440×900 */
@media(min-width:981px){
  .m-viz .hero{min-height:0;padding-top:128px;padding-bottom:64px;position:relative}
  .m-viz .hero-meta{margin-top:36px;padding-top:22px}
  .m-viz .hero-ctas{margin-top:30px}
}

/* стрелка к следующему разделу — обычная ссылка */
.m-hint{display:none}
@media(min-width:981px){
  .m-viz .m-hint{display:block;position:absolute;left:50%;bottom:14px;width:34px;height:34px;margin-left:-17px;opacity:.7;
    transition:opacity .3s}
  .m-viz .m-hint::before{content:"";position:absolute;left:8px;top:4px;width:16px;height:16px;
    border-right:1px solid var(--gold);border-bottom:1px solid var(--gold);transform:rotate(45deg)}
  .m-viz .m-hint:hover,.m-viz .m-hint:focus-visible{opacity:1}
  .m-viz.m-scrolled .m-hint{opacity:0;pointer-events:none}
}

/* полоска прогресса чтения */
.m-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:200;pointer-events:none;
  background:linear-gradient(90deg,var(--gold-muted),var(--gold-bright));transform-origin:0 50%;transform:scaleX(var(--sp,0))}

/* нить «Четырёх шагов»: текст всегда читаем, меняется только номер */
.m-viz .steps{position:relative}
.m-viz .steps::before,.m-viz .m-thread{content:"";display:block;position:absolute;left:27px;top:27px;bottom:27px;width:1px;margin-left:-.5px}
.m-viz .steps::before{background:var(--border)}
.m-viz .m-thread{background:linear-gradient(180deg,var(--gold-bright),var(--gold));transform-origin:50% 0;transform:scaleY(var(--tp,0))}
.m-viz .step .n{z-index:1;background:var(--bg-deep);color:var(--gold-muted);border-color:var(--border)}
.m-viz .step.m-lit .n{color:var(--gold);border-color:var(--gold);box-shadow:0 0 16px rgba(228,198,88,.28)}
.m-on .step .n{transition:color .3s,border-color .3s,box-shadow .3s}

/* ---------- вступление первого экрана (один раз, до 0,7 с) ---------- */
.m-intro .title{animation:m-fade-up .42s cubic-bezier(.2,.7,.2,1) both}
.m-intro .tag-row{animation:m-fade-up .42s cubic-bezier(.2,.7,.2,1) both}
.m-intro .shield-wrap img,.m-intro .shield-wrap .g-hero svg{animation:m-shield .6s cubic-bezier(.2,.7,.2,1) both}
.m-intro .hud{animation:m-fade .35s ease-out .35s both}
@keyframes m-fade-up{from{transform:translateY(6px)}}   /* читаемый текст не прячем: только сдвиг */
@keyframes m-fade{from{opacity:0}}
@keyframes m-shield{from{opacity:0;transform:scale(.98)}}

/* щит: постоянного плавания нет; на компьютере — слабый наклон за курсором */
.m-viz .m-tilt > picture{animation:none}
.m-on .shield-wrap{perspective:1100px}
.m-on .m-tilt{will-change:transform}

/* ---------- появление при прокрутке: только заголовки разделов и крупные иллюстрации ---------- */
.m-on .m-rv.m-in{animation:m-rv .36s cubic-bezier(.2,.7,.2,1) both}
@keyframes m-rv{from{opacity:.6;transform:translateY(10px)}}
.m-on .m-rv:not(.m-in){opacity:.6}

/* схема: узлы и подписи видны сразу, прорисовываются только линии, весь показ до 1 с.
   Линии прячутся только у схемы, помеченной m-rv (она была ниже экрана); если схема сразу на экране — всё видно. */
.m-on .routing-vis.m-rv:not(.m-in){opacity:1}            /* саму схему не прячем */
.m-on .routing-vis.m-rv.m-in{animation:none}
.m-on .routing-vis.m-rv:not(.m-in) .m-line{opacity:0}
.m-on .routing-vis.m-rv.m-in .m-line{animation:m-fade .45s ease-out both;animation-delay:var(--ld,0ms)}
.m-on .routing-vis.m-rv.m-in .m-line.m-draw{stroke-dasharray:1;stroke-dashoffset:1;animation:m-draw .55s ease-in-out both}
@keyframes m-draw{from{stroke-dashoffset:1;opacity:1}to{stroke-dashoffset:0;opacity:1}}

/* ---------- движение выключено ---------- */
.m-still{scroll-behavior:auto!important}
.m-still *,.m-still *::before,.m-still *::after{animation:none!important;transition:none!important}
.m-still .m-tilt{transform:none!important}

/* ---------- панель макета (в прод не идёт) ---------- */
.m-panel{position:fixed;right:14px;bottom:14px;z-index:999;display:flex;gap:8px;align-items:center;
  font:500 11px/1 'Inter',system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;
  background:rgba(20,8,32,.92);border:1px solid var(--border);padding:8px 10px;border-radius:4px;color:var(--text)}
.m-panel button{font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer;color:var(--gold);
  background:transparent;border:1px solid var(--border-strong);padding:7px 10px;border-radius:3px}
.m-panel button:hover{background:var(--gold-soft)}
.m-panel button:focus-visible{outline:2px solid var(--gold-bright);outline-offset:2px}
@media(max-width:760px){
  .m-panel{right:auto;left:8px;bottom:auto;top:64px;padding:5px 6px;gap:5px;font-size:9px}
  .m-panel span{display:none}
  .m-panel button{padding:5px 6px}
}

/* системная настройка «уменьшить движение» соблюдается и без скриптов */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .routing-vis svg circle:has(animateMotion){display:none}
}
.m-still .routing-vis svg circle:has(animateMotion){display:none}