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

@font-face{font-family:'KG Montserrat';font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/montserrat-cyrillic-wght-normal.woff2) format('woff2');
unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'KG Montserrat';font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/montserrat-latin-wght-normal.woff2) format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

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

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

/* узор-орнамент: полосы по диагонали и по горизонтали (плитка 1200×1000) */
.kg-band{height:calc(1000*var(--u));pointer-events:none;background:url(img/tile.webp) 0 0/calc(1200*var(--u)) calc(1000*var(--u)) repeat-x;
background-position:calc((var(--ph,0) + var(--bx,0))*var(--u)) 0;transform:rotate(var(--rot,0deg))}
.kg-band--r{background-image:url(img/tile-r.webp)}

/* хохломской орнамент */
.kg-orn{pointer-events:none;will-change:transform}

/* заголовки Vezitsa — готовые векторы */
.kg-ttl{pointer-events:none}
.kg-ttl img{width:100%;height:100%}

/* ---------- 01 первый экран ---------- */
.kg-tag{text-align:center;white-space:nowrap;font:300 calc(70*var(--u))/calc(80*var(--u)) 'KG Montserrat',system-ui,sans-serif;z-index:3}
.kg-logo{z-index:3;transform-origin:50% 45%}
.kg-h1{text-align:center;font:700 calc(87*var(--u))/calc(106*var(--u)) 'KG Montserrat',system-ui,sans-serif;letter-spacing:0;z-index:3;margin:0}
.kg-h1 .kg-l{display:block}
.kg .kg-w{display:inline-block;white-space:nowrap}
.kg .kg-c{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.kg .kg-c__i{display:inline-block;will-change:transform}

/* ---------- 02 типографика и палитра ---------- */
.kg-big{text-transform:uppercase;white-space:nowrap;font:200 calc(129*var(--u))/calc(157*var(--u)) 'KG Montserrat',system-ui,sans-serif;pointer-events:none}
.kg-sp{white-space:nowrap;font-family:'KG Montserrat',system-ui,sans-serif;font-size:calc(var(--fs)*var(--u));line-height:calc(var(--lh)*var(--u));font-weight:var(--wt,800)}
.kg-div{background:#fff;transform-origin:50% 0}
.kg-sw{display:flex;align-items:center;justify-content:center;border-radius:calc(50*var(--u));background:var(--c);color:#fff;cursor:copy;
font:500 calc(40*var(--u))/calc(49*var(--u)) 'KG Montserrat',system-ui,sans-serif;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.kg-sw--dk{color:#000}
.kg-sw:hover{transform:translateY(calc(-8*var(--u))) scale(1.04);box-shadow:0 calc(14*var(--u)) calc(30*var(--u)) rgba(0,0,0,.35)}
.kg-sw:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* ---------- 01-02 большая страница ---------- */
.kg-pg{border-radius:calc(100*var(--u));overflow:hidden;background:#fff;transform:translateZ(0)}
.kg-pg__s{position:absolute;left:0;top:calc(var(--y)*var(--u));width:100%;height:calc(var(--h)*var(--u))}

/* ---------- 03 другие страницы ---------- */
.kg-scr{border-radius:calc(60*var(--u));box-shadow:0 0 calc(16*var(--u)) rgba(255,255,255,.57);background:#fff}
.kg-scr__i{position:absolute;inset:0;border-radius:inherit;overflow:hidden;transform:translateZ(0)}
.kg-scr__i img{transform-origin:50% 40%}
.kg-ic{will-change:transform}

/* копирование цвета */
.kg-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 'KG Montserrat',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}
.kg-toast.is-on{opacity:1;transform:translate(-50%,0)}

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


/* ---------- < 1000 px: каждая секция — своё окно сцены (--sw — ширина видимой части, --cx — её центр) ---------- */
@media (max-width:999px){
.kg-st{width:100%}
.kg-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))}
.kg-band{display:none}
/* 01 первый экран */
.kg-b--hero{--sw:1000;--cx:960;--h:1210!important}
.kg-b--hero .kg-orn{--x:-1100!important;--y:-110!important}
.kg-b--hero .kg-tag{--y:40!important}
.kg-b--hero .kg-tag:not(.kg-tag--r){--x:480!important}
.kg-b--hero .kg-tag--r{--x:1125!important}
.kg-b--hero .kg-logo{--y:140!important}
.kg-b--hero .kg-h1{--x:480!important;--y:760!important;--w:960!important;font-size:calc(66*var(--u));line-height:calc(82*var(--u))}
.kg-b--hero .kg-h1 .kg-l{display:inline}
/* 02 главная страница — целиком, без обрезки */
.kg-b--main{--sw:1920;--cx:960}
/* 03 типографика и палитра */
.kg-b--typo{--sw:1000;--cx:500;--h:1990!important}
.kg-b--typo .kg-band--h{display:block;--y:330!important}
.kg-b--typo .kg-ttl--t{--x:20!important;--y:40!important;--w:940!important;--h:156!important}
.kg-b--typo .kg-big{--x:20!important;--y:260!important;font-size:calc(116*var(--u));line-height:calc(141*var(--u))}
.kg-b--typo .kg-big:nth-of-type(2){--y:1010!important}
.kg-b--typo .kg-sp{top:calc(var(--my)*var(--u))!important}
.kg-b--typo .kg-sp:not(.kg-sp--v){left:calc(20*var(--u))!important}
.kg-b--typo .kg-sp{font-size:calc(var(--fs)*var(--u)*.92)}
.kg-b--typo .kg-sp--v{left:calc(616*var(--u))!important}
.kg-b--typo .kg-div{left:calc(599*var(--u))!important;top:calc(450*var(--u))!important}
.kg-b--typo .kg-sw{left:calc(var(--mx)*var(--u))!important;top:calc(var(--my)*var(--u))!important}
.kg-b--typo .kg-ttl--o{--x:20!important;--y:1790!important;--w:940!important;--h:118!important}
/* 04 другие страницы — одной колонкой */
.kg-b--pages{--sw:1000;--cx:500;--h:9650!important}
.kg-b--pages .kg-scr,.kg-b--pages .kg-ic{left:calc(var(--mx)*var(--u))!important;top:calc(var(--my)*var(--u))!important}
/* 05 финал */
.kg-b--end{--sw:1800;--cx:960;--h:800!important}
.kg-b--end .kg-ttl--e{--y:440!important}
}

/* ---------- состояния до анимации (только при включённом JS) ---------- */
.is-js [data-kg-pop]{opacity:0;transform:scale(.8)}
.is-js [data-kg-tag]{opacity:0}

@media (prefers-reduced-motion:reduce){
.is-js [data-kg-pop],.is-js [data-kg-tag]{opacity:1;transform:none}}