/*! SitePilot demo-kit «Приборная панель» (Глеб, 07.11.2026, впервые в avtoservis-v2).
   Подключать: <link rel="stylesheet" href="/demo/_kit/kit-dash.css"> и <script src="/demo/_kit/kit-dash.js" defer></script>
   Переменные те же: --bg --surface --ink --muted --line --accent --accent-ink --btn-radius --font-head --font-text (+ --font-mono по желанию).
   Описание: /demo/_kit/README.md, раздел «Kit Dash». Отдельный файл, чтобы не затирать kit.css / kit-2026.css. */

/* 1. Текст кнопки перекатывается как на табло: <a class="k-roll"><span data-t="Записаться">Записаться</span></a>
   Кнопка сама задаёт фон/цвет; --kr-f — цвет текста (по умолчанию currentColor) */
.k-roll{position:relative;overflow:hidden}
.k-roll>span[data-t]{display:inline-block;position:relative;line-height:1.2;color:transparent!important}
.k-roll>span[data-t]::before,.k-roll>span[data-t]::after{content:attr(data-t);position:absolute;left:0;top:0;white-space:nowrap;color:var(--kr-f,var(--k-roll-c,#fff));transition:transform .5s cubic-bezier(.2,.7,0,1)}
.k-roll>span[data-t]::after{transform:translateY(200%)}
.k-roll:hover>span[data-t]::before,.k-roll:focus-visible>span[data-t]::before{transform:translateY(-200%)}
.k-roll:hover>span[data-t]::after,.k-roll:focus-visible>span[data-t]::after{transform:none}

/* 2. Табло с перелистыванием букв (split-flap): <span class="k-flap" data-flap="ГОТОВО 15:40" data-w="12"></span>
   JS: kitFlap(el, 'новый текст'). Плитки: .k-flap i */
.k-flap{display:inline-flex;gap:2px;font:500 14px/1 var(--font-mono,ui-monospace,monospace);text-transform:uppercase}
.k-flap i{display:inline-block;width:1.32em;padding:5px 0;text-align:center;font-style:normal;background:var(--k-flap-bg,#16191C);color:var(--k-flap-c,#E7E8E3);position:relative}
.k-flap i::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(0,0,0,.55)}
.k-flap i.f{animation:kFlip .09s linear}
@keyframes kFlip{50%{transform:scaleY(.2)}}

/* 3. Одометр: <span class="k-odo" data-odo="12340"></span>, JS: kitOdo(el, 15600). Цифры рисуются псевдоэлементом: аудит не видит «обрезанный текст» */
.k-odo{display:inline-flex;font-variant-numeric:tabular-nums;white-space:nowrap}
.k-odo .od{display:inline-block;height:1.1em;overflow:hidden;line-height:1.1;vertical-align:bottom}
.k-odo .od-s{display:block;transition:transform .7s cubic-bezier(.2,.7,0,1)}
.k-odo .od-s::before{content:"0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9";white-space:pre;display:block;line-height:1.1}
.k-odo .od-sp{display:inline-block;width:.3em}

/* 4. Заголовок «растягивается» по оси ширины переменного шрифта (Martian Grotesk, Roboto Flex и др.): data-stretch (при появлении), data-stretch-in (сразу).
   Конечная ширина — font-stretch из CSS демо. */
[data-stretch],[data-stretch-in]{transition:font-stretch 1.3s cubic-bezier(.2,.7,0,1),letter-spacing 1.3s cubic-bezier(.2,.7,0,1),opacity .8s cubic-bezier(.2,.7,0,1)}
.kd [data-stretch]:not(.is-in){font-stretch:108%!important;opacity:.25}
.kd [data-stretch-in]:not(.is-in){font-stretch:100%!important;letter-spacing:.02em;opacity:0}

/* 5. Печать: <div class="k-stamp"><b>Цена зафиксирована</b><span>подпись</span></div>, JS: kitStamp(el) — «удар» печати */
.k-stamp{display:inline-block;padding:10px 12px;border:2.5px solid var(--accent);color:var(--accent);text-align:center;transform:rotate(-7deg);opacity:0;border-radius:4px;mix-blend-mode:multiply;pointer-events:none}
.k-stamp b{display:block;font:700 14px/1.1 var(--font-head);text-transform:uppercase}
.k-stamp span{display:block;font:400 13px/1.3 var(--font-mono,inherit);margin-top:5px}
.k-stamp.on{animation:kStamp .42s cubic-bezier(.3,1.4,.5,1) forwards}
@keyframes kStamp{0%{opacity:0;transform:rotate(-12deg) scale(1.7)}60%{opacity:.95}100%{opacity:.88;transform:rotate(-7deg) scale(1)}}

/* 6. Лента вбок при вертикальной прокрутке: <section data-hscroll><div class="k-hs-pin">…<div class="k-hs-track">кадры</div><i class="k-hs-bar"></i></div></section>
   До 1000 px — обычный свайп со scroll-snap. Высота секции считается сама. */
.k-hs-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.k-hs-track{display:flex;will-change:transform}
.k-hs-bar{display:block;height:1px;background:color-mix(in srgb,currentColor 20%,transparent);position:relative}
.k-hs-bar::after{content:"";position:absolute;inset:0;background:currentColor;transform-origin:0 50%;transform:scaleX(var(--p,0))}
@media (max-width:1000px){.k-hs-pin{position:static;height:auto}.k-hs-track{overflow-x:auto;scroll-snap-type:x mandatory;transform:none!important}.k-hs-track>*{scroll-snap-align:start}.k-hs-bar{display:none}}

/* 7. Полосы-гармошка: <div class="k-strips"><article class="k-strip is-on">…</article>…</div>
   Активная полоса раскрывается (наведение, фокус, клик), остальные узкие с вертикальным заголовком .k-strip-v. До 900 px — стопкой. */
.k-strips{display:flex;gap:var(--gut,12px);min-height:var(--k-strips-h,560px)}
.k-strip{position:relative;flex:1 1 0;min-width:0;overflow:hidden;transition:flex-grow .8s cubic-bezier(.2,.7,0,1);cursor:pointer}
.k-strip.is-on{flex-grow:3.4;cursor:default}
.k-strip-v{position:absolute;left:18px;bottom:18px;writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;transition:opacity .4s}
.k-strip.is-on .k-strip-v{opacity:0}
.k-strip-body{opacity:0;transition:opacity .5s .25s}
.k-strip.is-on .k-strip-body{opacity:1}
@media (max-width:900px){.k-strips{flex-direction:column;min-height:0}.k-strip{cursor:default}.k-strip-v{display:none}.k-strip-body{opacity:1}}

/* 8. Набор текста в диалоге: <p class="k-typing"><i></i><i></i><i></i></p> */
.k-typing{display:inline-flex;gap:4px;padding:12px 14px}
.k-typing i{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.3;animation:kType 1s infinite}
.k-typing i:nth-child(2){animation-delay:.15s}.k-typing i:nth-child(3){animation-delay:.3s}
@keyframes kType{30%{opacity:1;transform:translateY(-3px)}}

@media (prefers-reduced-motion:reduce){
  .k-roll>span[data-t]::before,.k-roll>span[data-t]::after,.k-odo .od-s,.k-strip,[data-stretch],[data-stretch-in]{transition:none}
  .kd [data-stretch]:not(.is-in),.kd [data-stretch-in]:not(.is-in){font-stretch:inherit!important;opacity:1;letter-spacing:inherit}
  .k-stamp.on{animation:none;opacity:.88}.k-flap i.f,.k-typing i{animation:none}
}