/* kit.css: общая механика страниц кейсов: появление, плавание, листалка, рамки устройств, подписи.
   Цвета, шрифты и раскладка у каждого кейса свои (<slug>/case.css). Анимации только при html.k-move
   (скрипт в <head>): при «меньше движения» всё стоит и видно сразу, ?motion=1 включает движение. */

/* оболочка сайта даёт 20 px сверху над телом кейса; кейс начинается от верха страницы */
.common--portfolio-detail{padding-top:0!important}
.kc *,.kc *::before,.kc *::after{box-sizing:border-box}
.kc img{max-width:100%;height:auto;display:block}
.kc figure{margin:0}
.kc .nw{white-space:nowrap}

/* появление при прокрутке */
.js.k-move .kc .rv{opacity:0;transform:translate3d(0,24px,0);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--d,0) * 90ms);will-change:opacity,transform}
.js.k-move .kc .rv.is-in{opacity:1;transform:translate3d(0,0,0)}

/* мягкое плавание: целые пиксели на концах, слой с начала */
.kc .fl{will-change:transform}
.k-move .kc .fl{animation:k-fl var(--fdur,7s) ease-in-out var(--fdl,0s) infinite alternate}
@keyframes k-fl{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,var(--fy,-10px),0)}}
.kc [data-px]{will-change:transform}

/* листалка */
.kc .ks{position:relative}
.kc .ks__view{overflow:hidden;touch-action:pan-y;outline:none}
.kc .ks__view:focus-visible{box-shadow:0 0 0 3px var(--k-focus,#ff7a00)}
.kc .ks__track{display:flex;align-items:flex-start;transition:transform .5s cubic-bezier(.2,.7,.2,1);will-change:transform;user-select:none;-webkit-user-select:none}
.kc .ks.is-drag .ks__track,.k-still .kc .ks__track{transition:none}
.kc .ks__slide{flex:0 0 var(--sw,100%);max-width:var(--sw,100%);padding:0 var(--sg,0px)}
.kc .ks__bar{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:18px}
.kc .ks__btn{flex:0 0 48px;width:48px;height:48px;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer;background:var(--k-btn,#fff);color:var(--k-btn-ink,#111);box-shadow:0 6px 18px rgba(0,0,0,.18);transition:transform .2s}
.kc .ks__btn:hover{transform:translate3d(0,-2px,0)}
.kc .ks__btn svg{width:22px;height:22px}
.kc .ks__dots{display:flex;flex-wrap:wrap;justify-content:center;max-width:calc(100% - 120px)}
.kc .ks__dot{width:44px;height:44px;border:0;background:none;padding:0;cursor:pointer;display:grid;place-items:center}
.kc .ks__dot::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--k-dot,rgba(0,0,0,.25));transition:background .2s,transform .2s}
.kc .ks__dot[aria-current="true"]::before{background:var(--k-dot-on,#111);transform:scale(1.25)}
.kc .ks__count{min-width:76px;text-align:center;font-size:17px;font-weight:600;color:var(--k-dot-on,#111);font-variant-numeric:tabular-nums}

/* подписи под кадрами */
.kc .cap{display:block;margin:12px auto 0;max-width:620px;font-size:14px;line-height:1.45;font-weight:500;text-align:center;color:var(--k-cap,#6b7280)}

/* телефон: экран 390×844, кадр целиком (contain, прижат кверху), рамка рисуется стилями */
.kc .dv-phone{--pw:260px;position:relative;width:var(--pw);max-width:100%;padding:calc(var(--pw) * .035);border-radius:calc(var(--pw) * .15);background:#101311;box-shadow:0 0 0 1px rgba(255,255,255,.08) inset,0 22px 50px rgba(0,0,0,.28);margin:0 auto}
.kc .dv-phone__scr{position:relative;aspect-ratio:390/844;border-radius:calc(var(--pw) * .12);overflow:hidden;background:var(--k-scr,#F6F6F2)}
.kc .dv-phone__scr img{width:100%;height:100%;object-fit:contain;object-position:50% 0}
/* длинный экран (выше 844): без рамки телефона, целиком по высоте */
.kc .dv-long{border-radius:22px;overflow:hidden;background:var(--k-scr,#F6F6F2);box-shadow:0 18px 44px rgba(0,0,0,.18);max-width:300px;margin:0 auto}
.kc .dv-long img{width:100%;height:auto}

/* монитор и планшет: экран 16:9, кадр целиком (contain) */
.kc .dv-mon{position:relative;max-width:980px;margin:0 auto;padding-bottom:9%}
.kc .dv-mon__body{position:relative;padding:1.6%;border-radius:18px;background:linear-gradient(#2a2d2b,#121413);box-shadow:0 24px 60px rgba(0,0,0,.45)}
.kc .dv-mon__scr{aspect-ratio:16/9;background:#000;border-radius:6px;overflow:hidden}
.kc .dv-mon__scr img{width:100%;height:100%;object-fit:contain}
.kc .dv-mon::before{content:"";position:absolute;left:44%;right:44%;bottom:2.4%;height:8%;background:linear-gradient(90deg,#9ea3a6,#d9dcdd 45%,#8e9396);border-radius:0 0 6px 6px}
.kc .dv-mon::after{content:"";position:absolute;left:34%;right:34%;bottom:0;height:2.8%;border-radius:8px 8px 4px 4px;background:linear-gradient(#cfd2d4,#8f9497)}
.kc .dv-tab{position:relative;padding:2.4%;border-radius:clamp(16px,3.2vw,34px);background:#151716;box-shadow:0 0 0 2px #2e322f inset,0 24px 56px rgba(0,0,0,.4);max-width:900px;margin:0 auto}
.kc .dv-tab__scr{aspect-ratio:16/9;background:#000;border-radius:clamp(6px,1vw,12px);overflow:hidden}
.kc .dv-tab__scr img{width:100%;height:100%;object-fit:contain}

@media (prefers-reduced-motion:reduce){.k-still .kc *{scroll-behavior:auto}}