/* Кейс «Заслон 2.0» — оформление. Подключается только на странице кейса. Префикс zs-. Сцена макета — 1920 */

.zs{
--bg:#1e1e1e;
--u:calc(min(var(--cw,100vw),1920px)/1920);
position:relative;background:var(--bg);color:#fff;
font-family:var(--font,'Inter'),system-ui,sans-serif;
-webkit-font-smoothing:antialiased;overflow:hidden;isolation:isolate}
.zs :where(p,h2,ul,li){margin:0;padding:0}
.zs :where(button){font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:inherit}
.zs :where(img){display:block;width:100%;height:100%;max-width:none}

.zs-st{position:relative;width:calc(1920*var(--u));margin:0 auto}
.zs-b{position:relative;height:calc(var(--h)*var(--u));isolation:isolate;overflow-x:visible;overflow-y:clip}
.zs-b::before{content:'';position:absolute;top:0;bottom:0;left:-100vmax;right:-100vmax;background:var(--bg);z-index:-1}
.zs-i{position:absolute;left:calc(var(--x)*var(--u));top:calc(var(--y)*var(--u))}
.zs-i[style*="--w"]{width:calc(var(--w)*var(--u))}
.zs-i[style*="--h"]{height:calc(var(--h)*var(--u))}

/* декор: обрезается по краям сцены (как в макете) */
.zs-cl{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;pointer-events:none}
.zs-cl .zs-gh{pointer-events:none}
.zs-wv{position:absolute;left:0;top:calc(var(--ty)*var(--u));width:calc(1920*var(--u));height:calc(371*var(--u));pointer-events:none}
.zs-wv--m{top:0;transform-origin:0 0;transform:matrix(var(--m,1,0,0,1),calc(var(--tx,0)*var(--u)),calc(var(--ty)*var(--u)))}
.zs-wv img{will-change:transform}
.zs-gh{opacity:.03;will-change:transform}

/* первый экран */
.zs-photo{will-change:transform}
.zs-logo{transform-origin:50% 50%}
.zs-ttl{margin:0;pointer-events:none}
.zs-ttl img{width:100%;height:100%}
.zs-tag{z-index:3}
.zs-h1,.zs-lbl{z-index:3}

/* страницы */
.zs-fr{background:var(--bg)}
.zs-fr--pg{z-index:2}
.zs-fr__in{position:absolute;inset:0;overflow:hidden;will-change:transform}
.zs-s{position:absolute;left:0;width:100%;top:calc(var(--y)/var(--h)*100%);height:calc(var(--sh)/var(--h)*100% + .5px)}
.zs-fr--m{box-shadow:0 calc(30*var(--u)) calc(60*var(--u)) rgba(0,0,0,.35)}
.zs-z1{z-index:1}.zs-z2{z-index:2}.zs-z3{z-index:3}
.zs-fr{z-index:2}
.zs-fr.zs-z1{z-index:1}.zs-fr.zs-z3{z-index:3}
.zs-hex{pointer-events:none}
.zs-hex img{will-change:transform}

/* типографика / меню */
.zs-plate,.zs-menu{pointer-events:none}
.zs-sw{z-index:3;transition:backdrop-filter .3s,background .3s;border-radius:calc(8*var(--u));cursor:copy}
.zs-sw:hover{backdrop-filter:brightness(1.22);background:rgba(255,255,255,.05)}
.zs-sw:focus-visible{outline:2px solid #fff;outline-offset:3px}
.zs-toast{position:fixed;left:50%;bottom:28px;z-index:50;padding:12px 20px;border-radius:12px;background:#212121;color:#fff;font:500 14px/1.3 var(--font,'Inter'),system-ui,sans-serif;
box-shadow:0 8px 30px rgba(0,0,0,.35);transform:translate(-50%,24px);opacity:0;pointer-events:none;transition:opacity .3s,transform .3s}
.zs-toast.is-on{opacity:1;transform:translate(-50%,0)}

/* шире сцены края фото гасим */
@media (min-width:1921px){
.zs-edge{-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}}

/* ---------- < 1000 px: каждая секция — своё окно сцены; «другие страницы» — колонкой ---------- */
@media (max-width:999px){
.zs-st{width:100%}
.zs-b{--u:calc(min(var(--cw,100vw),640px)/var(--sw,1920));width:calc(1920*var(--u));margin-left:calc(var(--cw,100vw)/2 - var(--cx,960)*var(--u))}
.zs-gh{display:none}
/* 01 первый экран */
.zs-b--hero{--sw:1650;--cx:960;--h:1160!important}
.zs-b--hero .zs-logo{--x:490!important;--y:20!important;--w:940!important;--h:679!important}
.zs-b--hero .zs-h1{--y:760!important}
.zs-b--hero .zs-lbl{--x:272!important;--y:930!important}
/* 02 главная страница */
.zs-b--main{--sw:1360;--cx:960}
/* 03 типографика */
.zs-b--typo{--sw:1920;--cx:960}
/* 04 меню */
.zs-b--menu{--sw:1800;--cx:960;--h:1130!important}
.zs-b--menu .zs-lbl{--x:70!important}
.zs-b--menu .zs-menu{--y:200!important}
/* 05 другие страницы — колонкой */
.zs-b--pages{--sw:1920;--cx:960;width:100%;margin-left:0;height:auto!important;display:flex;flex-direction:column;align-items:center;gap:calc(var(--cw,100vw)*.12);padding:calc(var(--cw,100vw)*.06) 0 calc(var(--cw,100vw)*.16);--u:calc(min(var(--cw,100vw),640px)/1920)}
.zs-b--pages .zs-cl{display:none}
.zs-b--pages .zs-hex{display:none}
.zs-b--pages .zs-ttl{position:relative;left:auto;top:auto;width:calc(min(var(--cw,100vw)*.9,600px));height:auto}
.zs-b--pages .zs-ttl img{height:auto}
.zs-b--pages .zs-fr{position:relative;left:auto;top:auto;height:auto;aspect-ratio:var(--w)/var(--h);width:calc(min(var(--cw,100vw)*.92,620px))}
.zs-b--pages .zs-fr--m{width:calc(min(var(--cw,100vw)*.62,340px))}
.zs-b--pages .zs-fr--d{box-shadow:0 10px 30px rgba(0,0,0,.35)}
/* 06 финал */
.zs-b--end{--sw:1920;--cx:960}
.zs-sw{display:none}
}

/* ---------- состояния до анимации (только при включённом JS) ---------- */
.is-js [data-zs-tag]{opacity:0}
@media (prefers-reduced-motion:reduce){
.is-js [data-zs-tag]{opacity:1}}