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

/* ===== 1. Строки заголовка выезжают из-под маски =====
   <h1 class="k-lines"><span class="k-l"><span>Строка 1</span></span><span class="k-l"><span>Строка 2</span></span></h1>
   С data-reveal ждёт прокрутки (нужен kit.js), без него играет сразу. */
.k-lines .k-l{display:block;overflow:hidden;padding:.2em 0 .22em;margin:-.2em 0 -.22em}
.k-lines .k-l:first-child{margin-top:0}
.k-lines .k-l:last-child{margin-bottom:0}
.k-lines .k-l>span{display:block}
.kit .k-lines .k-l>span{transform:translateY(108%);animation:k26Line 1.1s cubic-bezier(.2,.7,0,1) forwards}
.kit .k-lines .k-l:nth-child(2)>span{animation-delay:.09s}.kit .k-lines .k-l:nth-child(3)>span{animation-delay:.18s}.kit .k-lines .k-l:nth-child(4)>span{animation-delay:.27s}
.kit .k-lines[data-reveal]:not(.is-in) .k-l>span{animation-play-state:paused}
.kit .k-lines[data-reveal]{opacity:1!important;transform:none!important;filter:none!important}
@keyframes k26Line{to{transform:none}}

/* ===== 2. Прямоугольная кнопка: заливка цветом акцента поднимается снизу, стрелка уезжает и возвращается =====
   <a class="k-rect" href="#"><span>Текст</span><i class="k-arr"></i></a>; .ghost — контур. Радиус из --btn-radius (0 по умолчанию). */
.k-rect{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:space-between;gap:28px;min-height:52px;padding:0 20px 0 22px;border:1px solid var(--ink);border-radius:var(--btn-radius,0);background:var(--ink);color:var(--bg);font:500 15px/1 var(--font-text,inherit);letter-spacing:.01em;text-decoration:none;cursor:pointer;transition:color .45s cubic-bezier(.2,.7,0,1)}
.k-rect::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--accent);transform:translateY(101%);transition:transform .55s cubic-bezier(.2,.7,0,1)}
.k-rect:hover::before,.k-rect:focus-visible::before{transform:none}
.k-rect:hover,.k-rect:focus-visible{color:var(--accent-ink);border-color:var(--accent)}
.k-rect.ghost{background:transparent;color:var(--ink)}
.k-arr{position:relative;display:inline-block;width:18px;height:12px;overflow:hidden;flex:none}
.k-arr::before,.k-arr::after{content:"";position:absolute;inset:0;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'%3E%3Cpath d='M0 6h16M11 1l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'%3E%3Cpath d='M0 6h16M11 1l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .5s cubic-bezier(.2,.7,0,1)}
.k-arr::after{transform:translateX(-120%)}
a:hover>.k-arr::before,button:hover>.k-arr::before,a:focus-visible>.k-arr::before{transform:translateX(120%)}
a:hover>.k-arr::after,button:hover>.k-arr::after,a:focus-visible>.k-arr::after{transform:none}

/* ===== 3. Ссылка с линией: линия уходит вправо и прорисовывается заново. class="k-ul" ===== */
.k-ul{color:inherit;text-decoration:none;background:linear-gradient(currentColor,currentColor) 100% 100%/100% 1px no-repeat;padding-bottom:3px;transition:background-size .5s cubic-bezier(.2,.7,0,1)}
.k-ul:hover,.k-ul:focus-visible{background-size:0 1px;animation:k26Ul .9s cubic-bezier(.2,.7,0,1) .25s forwards}
@keyframes k26Ul{from{background-position:0 100%;background-size:0 1px}to{background-position:0 100%;background-size:100% 1px}}

/* ===== 4. Указатель (index): строки + одна большая картинка рядом =====
   <div data-index><a data-src="a.webp" data-cap="подпись" data-alt="alt">…</a>…<figure data-index-view><img><figcaption></figcaption></figure></div> */
[data-index] [data-src]{transition:opacity .4s}
[data-index]:hover [data-src]:not(:hover):not(.is-on){opacity:.42}
[data-index-view]{overflow:hidden}
[data-index-view] img{transition:opacity .5s,transform 1.1s cubic-bezier(.2,.7,0,1)}
[data-index-view].is-swap img{opacity:0;transform:scale(1.04)}

/* ===== 5. Липкие кадры по шагам =====
   <section data-scrub> [data-scrub-view] с img[data-for="1"]…; шаги [data-step="1"][data-time="0:10"]; таймкод [data-scrub-n]; полоса [data-scrub-bar] */
[data-scrub-view] img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity .8s,transform 1.4s cubic-bezier(.2,.7,0,1)}
[data-scrub-view] img.is-on{opacity:1;transform:none}
[data-scrub-bar]{transform-origin:left;transform:scaleX(var(--p,0))}
[data-scrub] [data-step]{transition:opacity .6s}
.kit [data-scrub] [data-step]:not(.is-on){opacity:.5}

/* ===== 6. Ролик из кадров (вместо видео) =====
   <figure class="k-reel" data-reel data-interval="2600"><div class="k-reel-fr"><img data-cap="подпись" src>… (кадры 2+ можно с data-src — загрузятся перед показом)</div>
   <div class="k-reel-ui"><button class="k-reel-pp" type="button" aria-label="Пауза"></button><ol class="k-reel-bar"></ol><span class="k-reel-cap"></span></div></figure> */
.k-reel{position:relative;margin:0}
.k-reel-fr{position:relative;overflow:hidden;aspect-ratio:16/9;background:#1a1816}
.k-reel-fr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1s ease}
.k-reel-fr img.is-on{opacity:1}
.kit .k-reel.is-play .k-reel-fr img.is-on{animation:k26Ken var(--k-reel-t,2600ms) linear both}
.k-reel-fr img:nth-child(odd){--kx:-1.5%}.k-reel-fr img:nth-child(even){--kx:1.5%}
@keyframes k26Ken{from{transform:scale(1.02) translateX(0)}to{transform:scale(1.09) translateX(var(--kx,1%))}}
.k-reel-ui{display:flex;align-items:center;gap:16px;padding-top:12px}
.k-reel-pp{flex:none;width:40px;height:40px;border:1px solid var(--ink);border-radius:var(--btn-radius,0);background:transparent;color:var(--ink);cursor:pointer;position:relative;transition:background .3s,color .3s}
.k-reel-pp::before{content:"";position:absolute;inset:0;margin:auto;width:10px;height:12px;border-left:3px solid currentColor;border-right:3px solid currentColor}
.k-reel:not(.is-play) .k-reel-pp::before{width:0;height:0;border:0;border-left:11px solid currentColor;border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:15px}
.k-reel-pp:hover,.k-reel-pp:focus-visible{background:var(--ink);color:var(--bg)}
.k-reel-bar{flex:1;display:flex;gap:4px;list-style:none;margin:0;padding:0}
.k-reel-bar li{flex:1;height:2px;background:color-mix(in srgb,var(--ink) 18%,transparent);position:relative;overflow:hidden;cursor:pointer}
.k-reel-bar li::after{content:"";position:absolute;inset:0;background:var(--ink);transform:scaleX(0);transform-origin:left}
.k-reel-bar li.is-done::after{transform:none}
.k-reel.is-play .k-reel-bar li.is-on::after{animation:k26Bar var(--k-reel-t,2600ms) linear forwards}
.k-reel:not(.is-play) .k-reel-bar li.is-on::after{transform:none}
@keyframes k26Bar{to{transform:none}}
.k-reel-cap{flex:0 1 auto;min-width:0;font-size:13px;color:var(--muted);text-align:right}
@media (max-width:560px){.k-reel-ui{flex-wrap:wrap}.k-reel-cap{flex-basis:100%;text-align:left}}

/* ===== 7. Сторис 9:16 =====
   <button class="k-st-card" type="button" data-story='{"t":"Заголовок","f":[["img.webp","подпись"],…]}'><img><span>Заголовок</span></button>; окно создаётся само */
.k-st-card{position:relative;display:block;width:100%;aspect-ratio:9/16;padding:0;border:0;overflow:hidden;background:#1a1816;color:#fff;cursor:pointer;border-radius:var(--radius,0);text-align:left;font:inherit}
.k-st-card img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,0,1)}
.k-st-card:hover img,.k-st-card:focus-visible img{transform:scale(1.05)}
.k-st-card span{position:absolute;left:0;right:0;bottom:0;padding:48px 14px 14px;font-size:14px;line-height:1.3;background:linear-gradient(0deg,rgba(10,10,12,.72),transparent)}
.k-st-card::before{content:"";position:absolute;top:12px;left:12px;right:12px;height:2px;background:rgba(255,255,255,.55);z-index:1}
dialog.k-story{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#0d0c0b;color:#fff}
dialog.k-story::backdrop{background:#0d0c0b}
.k-story-in{position:relative;height:100%;max-width:min(100%,calc(100dvh * 9 / 16));margin:0 auto;overflow:hidden}
.k-story-in img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s}
.k-story-in img.is-on{opacity:1;animation:k26Ken 3600ms linear both}
.k-story-bar{position:absolute;top:12px;left:12px;right:12px;display:flex;gap:4px;z-index:2}
.k-story-bar i{flex:1;height:2px;background:rgba(255,255,255,.35);position:relative;overflow:hidden}
.k-story-bar i::after{content:"";position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:left}
.k-story-bar i.is-done::after{transform:none}
.k-story-bar i.is-on::after{animation:k26Bar 3600ms linear forwards}
.k-story.is-paused .k-story-bar i.is-on::after,.k-story.is-paused img.is-on{animation-play-state:paused}
.k-story-t{position:absolute;top:26px;left:14px;right:60px;z-index:2;margin:0;font-size:14px;font-weight:600}
.k-story-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;margin:0;padding:80px 18px 28px;font-size:16px;line-height:1.4;background:linear-gradient(0deg,rgba(0,0,0,.75),transparent)}
.k-story-x{position:absolute;top:22px;right:10px;z-index:3;width:44px;height:44px;border:0;background:transparent;color:#fff;font-size:28px;line-height:1;cursor:pointer}
.k-story-nav{position:absolute;top:60px;bottom:90px;width:40%;z-index:1;border:0;background:transparent;cursor:pointer}
.k-story-nav.prev{left:0}.k-story-nav.next{right:0}

@media (prefers-reduced-motion:reduce){
  .kit .k-lines .k-l>span{animation:none!important;transform:none!important}
  .k-rect::before,.k-arr::before,.k-arr::after,[data-scrub-view] img,[data-index-view] img{transition:none!important}
  .k-reel-fr img,.k-story-in img{animation:none!important;transition:none}
  .k-reel-bar li::after,.k-story-bar i::after{animation:none!important}
}