/* Живой мир (Морис 26.10: «оживление всего»): первый экран, переключатель миров, иконки, картинки в блоках. Один свет — цвет мира. */

/* 1 · первый экран: холст огней, туман, проход света, параллакс */
.m-hero .sc{translate:calc(var(--px,0)*-14px) calc(var(--py,0)*-10px + var(--sy,0)*70px)}
.zh-cv{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.m-hero .sc:after{z-index:1}
.zh-fog,.zh-sw{position:absolute;inset:0;pointer-events:none;z-index:0}
.zh-fog{background:radial-gradient(40% 22% at 30% 88%,rgba(var(--c),.10),transparent 70%),radial-gradient(45% 20% at 80% 92%,rgba(220,230,255,.07),transparent 70%),radial-gradient(35% 18% at 60% 70%,rgba(var(--c),.06),transparent 70%);
  background-size:160% 100%;animation:zhFog 38s ease-in-out infinite alternate;translate:calc(var(--px,0)*-30px) calc(var(--py,0)*-12px);mix-blend-mode:screen}
@keyframes zhFog{0%{background-position:0 0,100% 0,50% 0}100%{background-position:60% -3%,30% 2%,0 -2%}}
.zh-sw{overflow:hidden}.zh-sw:before{content:"";position:absolute;top:-20%;bottom:-20%;width:28%;left:-40%;
  background:linear-gradient(100deg,transparent,rgba(var(--c),.07) 40%,rgba(255,255,255,.08) 50%,rgba(var(--c),.07) 60%,transparent);animation:zhSw 11s cubic-bezier(.45,0,.2,1) infinite;mix-blend-mode:screen}
@keyframes zhSw{0%,30%{left:-40%}75%,100%{left:130%}}
.m-hero .ht{z-index:2;translate:calc(var(--px,0)*6px) calc(var(--py,0)*4px + var(--sy,0)*-30px)}

/* 2 · переключатель миров в шапке (правила шапки ui.css сильные — поэтому html body .ui-top) */
html body .ui-top .zh-mir{position:relative}
html body .ui-top .zh-mb{display:inline-flex;align-items:center;gap:10px;padding:6px 12px;border:0;border-radius:999px;background:none;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer;transition:background .3s}
html body .ui-top .zh-mb:hover,html body .ui-top .zh-mb[aria-expanded=true]{background:rgba(var(--c),.12)}
html body .ui-top .zh-ar{display:inline-block;transition:transform .3s;color:rgb(var(--c));letter-spacing:0}
html body .ui-top .zh-mb[aria-expanded=true] .zh-ar{transform:rotate(180deg)}
html body .ui-top .zh-mp{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%);display:grid;grid-template-columns:repeat(4,120px);gap:6px;padding:14px;border-radius:20px;z-index:80;
  background:rgba(8,10,18,.96);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px rgba(var(--c),.4),0 24px 60px -20px #000;animation:zhIn .35s cubic-bezier(.16,1,.3,1);white-space:normal;letter-spacing:0;text-transform:none}
html body .ui-top .zh-mp[hidden]{display:none}
@keyframes zhIn{from{opacity:0;margin-top:-8px}}
html body .ui-top .zh-mp a{display:grid;justify-items:center;align-content:start;gap:6px;padding:10px 6px 12px;border-radius:14px;color:#c9d2e2;font:500 13px/1.25 O,system-ui,sans-serif;letter-spacing:0;text-transform:none;text-align:center;text-decoration:none;transition:background .25s,color .25s}
html body .ui-top .zh-mp a:hover,html body .ui-top .zh-mp a:focus-visible{background:rgba(var(--wc),.12);color:#fff;outline:0}
html body .ui-top .zh-mp a[aria-current]{background:rgba(var(--wc),.16);color:#fff;box-shadow:inset 0 0 0 1px rgba(var(--wc),.5)}
html body .ui-top .zh-mp a small{font:400 12px O,system-ui,sans-serif;color:#7d8da2}
html body .ui-top .zh-mp .zh-all{align-content:center;box-shadow:inset 0 0 0 1px rgba(242,184,75,.3)}
@media(max-width:1180px){html body .ui-top .mid.zh-mir{display:inline-flex}html body .ui-top .zh-mir:before,html body .ui-top .zh-mir:after,html body .ui-top .zh-v{display:none}}
@media(max-width:760px){html body .ui-top .zh-mp{position:fixed;top:68px;left:8px;right:8px;transform:none;grid-template-columns:repeat(3,1fr)}html body .ui-top .zh-mb{padding:6px 8px;gap:6px}}

/* 3 · живые иконки: дыхание и свет при наведении */
@keyframes zhBr{0%,100%{box-shadow:inset 0 0 0 1.5px rgba(var(--c),.6),0 0 0 rgba(var(--c),0)}50%{box-shadow:inset 0 0 0 1.5px rgba(var(--c),.95),0 0 22px rgba(var(--c),.45)}}
@keyframes zhDot{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.35);opacity:1}}
.mk-chain .nd{animation:zhBr 3.6s ease-in-out infinite}.mk-chain article:nth-child(2n) .nd{animation-delay:-1.2s}.mk-chain article:nth-child(3n) .nd{animation-delay:-2.4s}
.mk-chain article{cursor:pointer}.mk-chain article:hover .nd{background:rgba(var(--c),.25);box-shadow:0 0 26px rgba(var(--c),.7)}
.mk-fm li:before,.mk-sily li:before,.vy .vdot{animation:zhDot 2.8s ease-in-out infinite}
.mk-fm li:nth-child(2):before,.mk-sily li:nth-child(2):before{animation-delay:-.7s}.mk-fm li:nth-child(3):before,.mk-sily li:nth-child(3):before{animation-delay:-1.4s}.mk-fm li:nth-child(4):before,.mk-sily li:nth-child(4):before{animation-delay:-2.1s}
.mk-crew .ph{animation:zhBr 4.2s ease-in-out infinite}.mk-crew article:nth-child(2) .ph{animation-delay:-1s}.mk-crew article:nth-child(3) .ph{animation-delay:-2s}.mk-crew article:nth-child(4) .ph{animation-delay:-3s}
.mk-play i{position:relative}.mk-play i:after{content:"";position:absolute;inset:-1px;border-radius:50%;box-shadow:0 0 0 0 rgba(var(--c),.55);animation:zhRing 2.4s ease-out infinite}
@keyframes zhRing{0%{box-shadow:0 0 0 0 rgba(var(--c),.5)}100%{box-shadow:0 0 0 14px rgba(var(--c),0)}}
.sg i,.m-st i,.mk-path i,.mk-chain i{transition:color .3s,text-shadow .3s}
.sg article:hover i,.m-st article:hover i,.mk-path article:hover i{text-shadow:0 0 12px rgba(var(--c),.9)}
.mk-fm article,.mk-path article,.mk-crew article,.mk-proof article,.mk-sily article,.rc article,.mk-faq details{transition:box-shadow .35s,transform .35s}
.mk-fm article:hover,.mk-path article:hover,.mk-crew article:hover,.mk-proof article:hover,.mk-sily article:hover,.rc article:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px rgba(var(--c),.6),0 0 40px -16px rgba(var(--c),.7)}
.mk-chips span{transition:box-shadow .3s,color .3s}.mk-chips span:hover{color:#fff;box-shadow:inset 0 0 0 1px rgba(var(--c),.7)}
.mk-reels .pl{animation:zhDot 2s ease-in-out infinite}

/* 4 · живые картинки внутри блоков: экран «Боли» мерцает и дышит, кадры медленно плывут */
@keyframes zhKb{0%,100%{transform:scale(1.02) translate3d(0,0,0)}50%{transform:scale(1.08) translate3d(-1.2%,-.8%,0)}}
@keyframes zhFl{0%,100%{opacity:.25}8%{opacity:.6}10%{opacity:.3}46%{opacity:.5}50%{opacity:.2}78%{opacity:.55}}
.pain .ps{animation:zhKb 26s ease-in-out infinite}
.pain .ps:before{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(30% 40% at 72% 45%,rgba(var(--c),.22),transparent 70%);mix-blend-mode:screen;animation:zhFl 6s steps(1,end) infinite,zhGl 7s ease-in-out infinite}
@keyframes zhGl{0%,100%{filter:brightness(1)}50%{filter:brightness(1.4)}}
.pain .ps:after{z-index:2}
.mk-proof .md,.mk-sily .md,.mk-gl a,.nc i{overflow:hidden}
.mk-proof .md img,.mk-sily .md img,.mk-covers img,.mk-gl img{animation:zhKb 22s ease-in-out infinite;transition:filter .4s}
.mk-proof article:nth-child(2n) .md img,.mk-sily article:nth-child(2) .md img{animation-delay:-8s}.mk-proof article:nth-child(3n) .md img{animation-delay:-15s}
.mk-proof article:hover .md img,.mk-sily article:hover .md img,.mk-gl a:hover img{filter:brightness(1.12) saturate(1.1)}
/* снимки экранов не «дышат» — иначе срезаются края (Морис 26.10) */
.nc i{animation:zhKb 24s ease-in-out infinite}
.mk-open,.glass{position:relative}
.mk-open:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgba(var(--c),.08) 50%,transparent 65%) -200% 0/300% 100% no-repeat;animation:zhSh 9s ease-in-out infinite}
@keyframes zhSh{0%,40%{background-position:200% 0}100%{background-position:-100% 0}}
.rk canvas,.fk canvas{filter:drop-shadow(0 0 18px rgba(var(--c),.35))}

/* телефон: легче — без тумана, без прохода света в блоках */
@media(max-width:760px){.zh-fog{animation:none}.mk-open:after{display:none}.m-hero .sc{translate:0 calc(var(--sy,0)*40px)}.m-hero .ht{translate:none}}
@media(prefers-reduced-motion:reduce){.zh-fog,.zh-sw:before,.mk-chain .nd,.mk-fm li:before,.mk-sily li:before,.vy .vdot,.mk-crew .ph,.mk-play i:after,.mk-reels .pl,.pain .ps,.pain .ps:before,
  .mk-proof .md img,.mk-sily .md img,.mk-covers img,.mk-gl img,.mk-open img,.mk-shot img,.nc i,.mk-open:after{animation:none}.m-hero .sc,.m-hero .ht,.zh-fog{translate:none}}
/* Кузница: плитка «Фильм» рядом с цифрами; телефон — своя картинка сцены */
.mk-film{position:relative;margin:0;aspect-ratio:16/9;border-radius:12px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(var(--c),.4)}
.mk-film video{width:100%;height:100%;object-fit:cover;display:block}.mk-film .pl{position:absolute;top:8px;left:8px;padding:2px 8px;border-radius:999px;font:500 11px M,monospace;color:#04161c;background:var(--md);animation:zhDot 2s ease-in-out infinite}
@media(max-width:760px){.m-hero .sc{background-image:var(--imm,var(--im))}}
.mk-case2{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);gap:12px;margin-top:12px}
.mk-case2 figure{margin:0}.mk-case2 img{display:block;width:100%;height:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;animation:zhKb 22s ease-in-out infinite}.mk-case2 figure:last-child img{animation-delay:-9s}
.mk-case2>*{min-width:0;overflow:hidden;border-radius:12px}.mk-case2 .mk-film{aspect-ratio:auto;height:100%}
@media(max-width:760px){.mk-case2{grid-template-columns:1fr 1fr}.mk-case2 .mk-film{grid-column:1/-1;aspect-ratio:16/9}}
/* видео-петля сцены: лежит поверх картинки-постера внутри .sc / .ps, проявляется, когда пошла; кадрирование — как у картинки */
.zh-loop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 50%;opacity:0;transition:opacity 1.2s ease}
.zh-loop.on{opacity:1}
.pain .ps .zh-loop{object-position:75% 50%}
@media(max-width:760px){.m-hero .sc .zh-loop{height:62%;object-position:62% 0}.pain .ps .zh-loop{height:340px;object-position:70% 0}}
@media(prefers-reduced-motion:reduce){.zh-loop{display:none}}
/* телефон: шапка в одну строку — переключатель короче, EN прячется (есть в подвале и на карте) */
@media(max-width:760px){html body .ui-top .zh-mb{font-size:11px;letter-spacing:.14em;padding:6px 6px}html body .ui-top .rt .lang{display:none}html body .ui-top .mid.zh-mir{gap:0;min-width:0}}
@media(max-width:400px){html body .ui-top .brand i{display:none}html body .ui-top .zh-mb .dot{display:none}}
@media(max-width:980px){html body header.ui-top{grid-template-columns:auto 1fr auto}html body .ui-top .mid.zh-mir{justify-self:center}}

/* знак Atlant Stellar в шапке: связка 262×30, поле вокруг на высоту букв (12 px); телефон — значок */
html body .ui-top .as-br{display:flex;align-items:center;padding:12px 12px 12px 0;margin:-12px 0;text-decoration:none}
html body .ui-top .as-lg{display:block;width:262px;height:auto;aspect-ratio:262/17;object-fit:contain}
html body .ui-top .as-ic{display:none;width:auto;height:28px}
@media(max-width:760px){html body .ui-top .as-lg{display:none}html body .ui-top .as-ic{display:block}html body .ui-top .as-br{padding:12px}}

/* подсветка знака Atlant Stellar (Бренд-студия, krug3/podsvetka/proba.html, Морис 26.10: «ярче»); цвет мира при наведении — из --c шапки */
.ui-top .as-br{position:relative;isolation:isolate;
  --as-s:1.7;                       /* сила: «ярче» — выбор Мориса 26.10 */
  --as-n:220,230,255;               /* холодный белый */
  --as-a:107,147,255;               /* сапфир */
  --as-b:167,124,255;               /* аметист */
  --as-x:7px; --as-w:15px; --as-h:17px; --as-d:46px}   /* центр и размер кристалла в шапке 262×17 */
.ui-top .as-br::before,.ui-top .as-br::after{content:"";position:absolute;top:50%;left:var(--as-x);pointer-events:none;
  transform:translate(-50%,-50%);transition:opacity .45s ease,background .45s ease}
.ui-top .as-br::before{width:var(--as-d);height:var(--as-d);border-radius:50%;z-index:-1;
  background:radial-gradient(closest-side,
    rgba(var(--as-n),calc(.34*var(--as-s))) 0,
    rgba(var(--as-a),calc(.20*var(--as-s))) 38%,
    rgba(var(--as-b),calc(.09*var(--as-s))) 66%,
    transparent 100%)}
.ui-top .as-br::after{width:var(--as-w);height:var(--as-h);z-index:1;mix-blend-mode:screen;
  clip-path:polygon(50% 0,100% 26%,100% 74%,50% 100%,0 74%,0 26%);
  background:radial-gradient(circle at 50% 46%,
    rgba(240,245,255,calc(.42*var(--as-s))) 0,
    rgba(107,147,255,calc(.20*var(--as-s))) 42%,
    transparent 78%)}
/* наведение и фокус: сияние в цвете мира (--c задан у шапки на странице мира) */
.ui-top .as-br:hover,.ui-top .as-br:focus-visible,.ui-top .as-br.is-hover{
  --as-n:var(--c,220,230,255);--as-a:var(--c,107,147,255);--as-b:var(--c,167,124,255);--as-s:1.9}
.ui-top .as-br.tiho{--as-s:.7}
.ui-top .as-br.yarche{--as-s:1.7}
.ui-top .as-br.tiho:hover,.ui-top .as-br.tiho.is-hover{--as-s:1}
.ui-top .as-br.yarche:hover,.ui-top .as-br.yarche.is-hover{--as-s:2}
/* телефон: виден только кристалл 24×28 (padding 12px) */
@media(max-width:760px){
  .ui-top .as-br{--as-x:24px;--as-w:22px;--as-h:27px;--as-d:64px}
}
@media(prefers-reduced-motion:reduce){.ui-top .as-br::before,.ui-top .as-br::after{transition:none}}

/* пролёт камеры (prolet.js): первый экран прилипает на один экран прокрутки, камера летит к ноутбуку, текст уходит */
.zh-pr{position:relative;height:200vh}
.zh-pr>.m-hero{position:sticky;top:0;height:100vh;height:100svh;min-height:0}
.zh-pr .m-hero .sc{translate:calc(var(--px,0)*-14px) calc(var(--py,0)*-10px)}
.zh-pr .ht{opacity:calc(1 - var(--pr,0)*1.8);translate:0 calc(var(--pr,0)*-40px)}
.zh-pr .zh-cv,.zh-pr .zh-fog,.zh-pr .zh-sw{opacity:calc(1 - var(--pr,0)*3)}
.zh-gl,.zh-prv{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity .25s}
video.zh-prv{object-fit:cover;object-position:70% 50%}
.zh-gl.on,.zh-prv.on{opacity:1}
@media(max-width:760px){.zh-pr{height:180svh}.zh-gl,.zh-prv{height:62%}video.zh-prv{object-position:62% 0}.zh-pr .m-hero .sc{translate:none}}
@media(prefers-reduced-motion:reduce){.zh-pr{height:auto}.zh-pr>.m-hero{position:relative;height:auto;min-height:100vh}}
.zh-pr .m-hero .sc:after{opacity:calc(1 - var(--pr,0)*1.4)}
/* Брак живого прохода 26.10 (Хранитель: «пустой низ, просвет шапки, полоса» — робот пропустил).
   1) Телефон: видео пролёта занимает верхние 62 %, а текст первого экрана гас — к концу пролёта низ экрана был пустым.
      На телефоне текст и кнопка остаются под видео (они и так не перекрывают картинку), низ не пустеет.
   2) Телефон: полупрозрачная шапка (ui.css .96) на деле пропускала текст страницы — плотный фон. ui.css общий с живым сайтом — правим здесь. */
@media(max-width:760px){.zh-pr .ht{opacity:1;translate:none}.zh-pr .m-hero .sc:after{opacity:1}}
@media(max-width:800px){html body header.ui-top,html body header.ui-top.ui-scr{background:#04050a}}
/* 27.10: картинки «Что дальше» (кристаллы соседних миров, 65–85 КБ каждая) — только при подходе к блоку, не с первым экраном */
.nx:not(.vid) .nc i{background-image:none}

/* Морис 22:42: линия внизу блоков ровная, без анимации */
.pv:after,html body header.ui-top:before{animation:none!important;opacity:0!important}
