/* Кейс «Караоке Баттл» (ТНТ) — оформление. Подключается только на странице кейса. Префикс kb-. Сцена макета — 1600 (из 2560 × 0.625) */

@font-face{font-family:'Rubik KB';font-style:normal;font-weight:300 900;font-display:swap;
src:url(fonts/rubik-cyrillic.woff2) format('woff2'),url(https://fonts.gstatic.com/s/rubik/v31/iJWKBXyIfDnIV7nFrXyw023e1Ik.woff2) format('woff2');
unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Rubik KB';font-style:normal;font-weight:300 900;font-display:swap;
src:url(fonts/rubik-latin.woff2) format('woff2'),url(https://fonts.gstatic.com/s/rubik/v31/iJWKBXyIfDnIV7nBrXyw023e.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}
@font-face{font-family:'Unbounded KB';font-style:normal;font-weight:200 900;font-display:swap;
src:url(fonts/unbounded-cyrillic.woff2) format('woff2'),url(https://fonts.gstatic.com/s/unbounded/v12/Yq6W-LOTXCb04q32xlpwv8ZfvRIkSYZH.woff2) format('woff2');
unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Unbounded KB';font-style:normal;font-weight:200 900;font-display:swap;
src:url(fonts/unbounded-latin.woff2) format('woff2'),url(https://fonts.gstatic.com/s/unbounded/v12/Yq6W-LOTXCb04q32xlpwu8ZfvRIkSQ.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}
@font-face{font-family:'Caveat KB';font-style:normal;font-weight:400;font-display:swap;
src:url(fonts/caveat-cyrillic.woff2) format('woff2'),url(https://fonts.gstatic.com/s/caveat/v23/WnznHAc5bAfYB2QRah7pcpNvOx-pjfJ9eIGpYT5Kmgq3s84t.woff2) format('woff2');
unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Caveat KB';font-style:normal;font-weight:400;font-display:swap;
src:url(fonts/caveat-latin.woff2) format('woff2'),url(https://fonts.gstatic.com/s/caveat/v23/WnznHAc5bAfYB2QRah7pcpNvOx-pjfJ9eIWpYT5Kmgq3sw.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}

.kb{
--rd:#FE0000; --bl:#005B9A; --gd:#EABB75; --tp:#B00902; --lg:#757575;
--u:calc(min(var(--cw,100vw),1600px)/1600);
position:relative;background:#F7F7F7;color:#1a1a1a;
font-family:'Rubik KB','Rubik',var(--font,'Inter'),system-ui,sans-serif;font-weight:400;
-webkit-font-smoothing:antialiased;overflow:hidden;isolation:isolate}
.kb :where(p,ul,li,h2){margin:0;padding:0}
.kb :where(button){font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:inherit}
.kb :where(img){display:block;width:100%;height:100%;max-width:none}

.kb-b{position:relative;height:calc(var(--h)*var(--u));isolation:isolate;overflow-x:visible;overflow-y:clip}
.kb-b::before{content:'';position:absolute;top:0;bottom:0;left:-100vmax;right:-100vmax;background:#F7F7F7;z-index:-1}
.kb-st{position:relative;width:calc(1600*var(--u));height:100%;margin-left:calc((100% - 1600*var(--u))/2)}
.kb-cd{position:absolute;left:calc(var(--x)*var(--u));top:calc(var(--y)*var(--u));width:calc(var(--w)*var(--u));height:calc(var(--h)*var(--u));
background:var(--cb,#fff);border-radius:calc(9.375*var(--u));overflow:hidden;isolation:isolate;transform:translateZ(0)}
.kb-i{position:absolute;left:calc(var(--x)*var(--u));top:calc(var(--y)*var(--u))}
.kb-i[style*="--w"]{width:calc(var(--w)*var(--u))}
.kb-i[style*="--h"]{height:calc(var(--h)*var(--u))}

/* подписи над экранами */
.kb-lb{position:absolute;left:0;right:0;top:calc(var(--y)*var(--u));text-align:center;font-weight:300;
font-size:max(calc(18.75*var(--u)),13px);line-height:calc(22.5*var(--u));color:var(--lg);white-space:nowrap;z-index:2}

/* ---------- 01 заставка ---------- */
.kb-ttl{z-index:1}
.kb-ttl__s{display:block;width:100%;height:100%;fill:#E5261E;overflow:visible}
.kb-logo{z-index:1}
.kb-tp{position:absolute;left:calc(var(--x)*var(--u));top:calc(var(--y)*var(--u));width:calc(var(--w)*var(--u));height:calc(59.375*var(--u));
transform-origin:0 0;transform:rotate(var(--r));background:var(--tp);border-radius:calc(5.625*var(--u));overflow:hidden;z-index:3;pointer-events:none}
.kb-tp__t{display:flex;align-items:center;width:max-content;height:100%;will-change:transform}
.kb-tp__t span{flex:none;padding-right:calc(25*var(--u));font-weight:900;font-size:calc(49.375*var(--u));line-height:calc(59.375*var(--u));color:#fff;white-space:nowrap}
.kb-note{z-index:4}
.kb-nt{position:absolute;left:calc(var(--x)*var(--u));top:calc(var(--y)*var(--u));z-index:4;font-family:'Caveat KB','Caveat',cursive;
font-size:calc(36.25*var(--u));line-height:calc(21.9*var(--u));color:#4a4a4a;white-space:nowrap}

/* ---------- 02 сцена с ноутбуком ---------- */
.kb-fx img,.kb-lap img{will-change:transform}

/* ---------- 03 фото ---------- */
.kb-ph{will-change:transform}
.kb-ln{position:absolute;left:calc(var(--x)*var(--u));top:calc(var(--y)*var(--u));width:calc(var(--w)*var(--u));height:calc(var(--h)*var(--u));overflow:hidden}
.kb-ln img{will-change:transform}

/* ---------- 04 логотипы ---------- */
.kb-tl img{will-change:transform}

/* ---------- 05–08 экраны ---------- */
.kb-sc{position:absolute;left:calc(var(--x)*var(--u));top:calc(var(--y)*var(--u));width:calc(var(--w)*var(--u));height:calc(var(--h)*var(--u));
border-radius:calc(9.375*var(--u));overflow:hidden;background:#fff;transform:translateZ(0)}
.kb-sc__b{position:absolute;left:0;top:0;width:100%;height:100%}
.kb-pc img,.kb-jr img,.kb-rw img{will-change:transform}

/* ---------- 09 фото + полосы ---------- */
.kb-mp,.kb-ms{will-change:transform}
.kb-mp{-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}

/* ---------- 10 шрифт ---------- */
.kb-fr{position:absolute;left:calc(var(--x)*var(--u));top:calc(var(--y)*var(--u));font-size:calc(var(--fz,161.5)*var(--u));line-height:1;
font-weight:var(--wg,400);color:#1a1a1a;white-space:nowrap}
.kb-sp{position:absolute;right:calc(80*var(--u));top:calc(var(--y)*var(--u));text-align:right;font-weight:300;
font-size:calc(18.75*var(--u));line-height:calc(28.75*var(--u));color:var(--lg)}
.kb-fs{position:absolute;right:calc(80*var(--u));top:calc(var(--y)*var(--u));font-size:calc(118.75*var(--u));line-height:calc(121*var(--u));color:var(--rd);white-space:nowrap}
.kb-fs--k{color:#1a1a1a}
.kb .kb-c{display:inline-block;overflow:hidden;vertical-align:top}
.kb .kb-c__i{display:inline-block;will-change:transform}

/* ---------- 11 цвета ---------- */
.kb-cb{position:absolute;left:calc(var(--x)*var(--u));top:calc(var(--y)*var(--u));width:calc(var(--w)*var(--u));height:calc(var(--h)*var(--u));
background:var(--c);color:var(--t);will-change:clip-path}
.kb-cb span{position:absolute;left:calc(25*var(--u));bottom:calc(25*var(--u));font-weight:300;font-size:calc(18.75*var(--u));line-height:1;
transition:transform .35s cubic-bezier(.2,.8,.2,1),letter-spacing .35s}
.kb-cb::after{content:'Копировать';position:absolute;left:calc(25*var(--u));bottom:calc(52*var(--u));font-weight:300;font-size:calc(13*var(--u));line-height:1;opacity:0;transform:translateY(calc(6*var(--u)));
transition:opacity .3s,transform .3s}
.kb-cb:is(:hover,:focus-visible) span{transform:translateY(calc(-4*var(--u)));letter-spacing:.04em}
.kb-cb:is(:hover,:focus-visible)::after{opacity:.7;transform:none}
.kb-cb:focus-visible{outline:2px solid #1a1a1a;outline-offset:-4px}
.kb-tt{position:fixed;left:50%;bottom:28px;z-index:60;transform:translate(-50%,24px);padding:12px 20px;border-radius:12px;background:#1a1a1a;color:#fff;
font-size:15px;line-height:20px;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;white-space:nowrap}
.kb-tt.is-on{opacity:1;transform:translate(-50%,0)}

/* ---------- 12 спасибо ---------- */
.kb-th{position:absolute;left:calc(var(--x)*var(--u));top:calc(var(--y)*var(--u));width:calc(var(--w)*var(--u));height:calc(var(--h)*var(--u));overflow:hidden;opacity:var(--o,1);
font-family:'Unbounded KB','Unbounded',var(--font,'Inter'),sans-serif;font-weight:700;font-size:calc(74.125*var(--u));line-height:calc(91.9*var(--u));color:#E5261E;white-space:nowrap}
.kb-th span{display:block;will-change:transform}

/* ---------- скрытые стартовые состояния — только при включённом JS ---------- */
.kb.is-js [data-kb-in]{opacity:0;transform:translateY(calc(26*var(--u)))}
.kb.is-js [data-kb-lt]{opacity:0}
.kb.is-js [data-kb-tp]{clip-path:inset(0 100% 0 0)}
.kb.is-js [data-kb-note]{clip-path:inset(0 0 0 100%)}
.kb.is-js [data-kb-logo],.kb.is-js [data-kb-tl]{opacity:0}
.kb.is-js [data-kb-rw]{opacity:0}
.kb.is-js [data-kb-pc],.kb.is-js [data-kb-jr]{opacity:0}
.kb.is-js [data-kb-cb]{clip-path:inset(100% 0 0 0)}
.kb.is-js [data-kb-sc]{opacity:0}

/* ---------- узкие экраны: сцены экранов шире, остальное — масштаб всей сцены ---------- */
@media (max-width:999px){
.kb-b--scr{--u:calc(var(--cw,100vw)/1600*1.3)}
.kb-lb{font-size:13px}
.kb-tt{bottom:16px}
}
@media (prefers-reduced-motion:reduce){
.kb-cb span,.kb-cb::after,.kb-tt{transition:none}
}