/* Фундамент демо-сайтов: механика компонентов kit.js. Цвета и шрифты — только через токены сайта:
   --kit-fg, --kit-bg, --kit-accent, --kit-line, --kit-radius. Mobile first: десктоп — через min-width. */
:root { --kit-fg: currentColor; --kit-bg: #0c0c0c; --kit-accent: currentColor; --kit-line: rgb(255 255 255 / 0.2); --kit-radius: 0px; }

/* до/после: «после» лежит сверху и обрезается маской слева направо */
.kit-ba { position: relative; overflow: hidden; touch-action: pan-y; user-select: none; border-radius: var(--kit-radius); aspect-ratio: var(--kit-ratio, 4 / 5); max-width: 100%; --kit-pos: 50%; cursor: ew-resize; }
.kit-ba > .kit-ba__before, .kit-ba > .kit-ba__after { position: absolute; inset: 0; }
.kit-ba img, .kit-ba video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.kit-ba__after { -webkit-mask: linear-gradient(90deg, transparent var(--kit-pos), #000 var(--kit-pos)); mask: linear-gradient(90deg, transparent var(--kit-pos), #000 var(--kit-pos)); }
.kit-ba__handle { position: absolute; top: 0; bottom: 0; left: var(--kit-pos); width: 2px; translate: -1px 0; background: var(--kit-fg); pointer-events: none; }
.kit-ba__handle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; translate: -50% -50%; border-radius: 50%; background: var(--kit-bg); border: 2px solid var(--kit-fg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Cpath d='M9 7l-5 5 5 5M15 7l5 5-5 5'/%3E%3C/svg%3E"); background-size: 22px; background-repeat: no-repeat; background-position: center; }
.kit-ba.is-hinting .kit-ba__after { transition: -webkit-mask-position .3s; }
.kit-ba__range { position: absolute; inset: auto 0 0; width: 100%; opacity: 0; height: 44px; margin: 0; cursor: ew-resize; }
.kit-ba__range:focus-visible + .kit-ba__handle { outline: 2px solid var(--kit-accent); outline-offset: 4px; }
.kit-ba__tag { position: absolute; top: 12px; padding: 4px 10px; font-size: 13px; line-height: 1.3; background: rgb(0 0 0 / .55); color: #fff; pointer-events: none; }
.kit-ba__tag--before { left: 12px; } .kit-ba__tag--after { right: 12px; }

/* работы: одна сцена (до/после или ролик) + карусель всех работ под ней */
.kit-works { display: grid; gap: 12px; min-width: 0; }
.kit-works__video { position: absolute; inset: 0; display: none; }
.kit-works__stage.is-solo { cursor: default; }
.kit-works__stage.is-solo .kit-works__video { display: block; }
.kit-works__stage.is-solo > .kit-ba__before, .kit-works__stage.is-solo > .kit-ba__after, .kit-works__stage.is-solo .kit-ba__handle,
.kit-works__stage.is-solo .kit-ba__range, .kit-works__stage.is-solo .kit-ba__tag { display: none; }
.kit-works__rail { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; padding-block: 2px 6px; }
.kit-works__item { position: relative; flex: 0 0 auto; width: 84px; aspect-ratio: 1; min-height: 44px; padding: 0; border: 2px solid transparent; border-radius: var(--kit-radius); overflow: hidden; background: none; cursor: pointer; scroll-snap-align: start; opacity: .7; }
.kit-works__item[aria-pressed="true"] { border-color: var(--kit-accent); opacity: 1; }
.kit-works__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kit-works__item.is-video::after { content: ""; position: absolute; left: 8px; bottom: 8px; border-left: 11px solid #fff; border-block: 7px solid transparent; filter: drop-shadow(0 0 2px rgb(0 0 0 / .8)); }
.kit-works__item:focus-visible { outline: 2px solid var(--kit-accent); outline-offset: 2px; }
@media (min-width: 900px) { .kit-works__item { width: 110px; } }

/* липкая панель: только на телефоне, над безопасной зоной */
.kit-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  padding: 10px max(12px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  background: var(--kit-bg); border-top: 1px solid var(--kit-line); translate: 0 110%; transition: translate .25s ease; }
.kit-bar.is-on { translate: 0 0; }
.kit-bar > a { min-height: 48px; display: grid; place-items: center; text-decoration: none; }
@media (min-width: 900px) { .kit-bar { display: none; } }

/* появление маской (не clip-path) */
[data-kit-reveal] { -webkit-mask: linear-gradient(180deg, #000 0 50%, transparent 50% 100%) 0 100% / 100% 200%; mask: linear-gradient(180deg, #000 0 50%, transparent 50% 100%) 0 100% / 100% 200%; transition: -webkit-mask-position .9s cubic-bezier(.2,.7,.1,1), mask-position .9s cubic-bezier(.2,.7,.1,1); }
[data-kit-reveal].is-in { -webkit-mask-position: 0 0; mask-position: 0 0; }
.no-js [data-kit-reveal] { -webkit-mask: none; mask: none; }
@media (prefers-reduced-motion: reduce) { [data-kit-reveal] { -webkit-mask: none; mask: none; transition: none; } }

/* лайтбокс */
.kit-lb { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgb(0 0 0 / .94); color: #fff; }
.kit-lb::backdrop { background: rgb(0 0 0 / .8); }
.kit-lb__stage { position: absolute; inset: 56px 0 64px; display: grid; place-items: center; }
.kit-lb__stage img, .kit-lb__stage video { max-width: 100%; max-height: 100%; object-fit: contain; }
.kit-lb__cap { position: absolute; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); margin: 0; font-size: 14px; text-align: center; opacity: .85; }
.kit-lb__btn { position: absolute; width: 48px; height: 48px; display: grid; place-items: center; background: none; border: 0; color: #fff; cursor: pointer; }
.kit-lb__btn svg { width: 26px; height: 26px; }
.kit-lb__close { top: calc(4px + env(safe-area-inset-top)); right: 4px; }
.kit-lb__prev { left: 4px; top: 50%; translate: 0 -50%; } .kit-lb__next { right: 4px; top: 50%; translate: 0 -50%; }

/* аккордеон: панель раскрывается по сетке, без высоты в пикселях */
.kit-acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.kit-acc__panel > * { overflow: hidden; min-height: 0; }
.kit-acc__panel.is-open { grid-template-rows: 1fr; }
.no-js .kit-acc__panel { grid-template-rows: 1fr; }

/* карта: до загрузки — ссылка на Яндекс */
.kit-map { position: relative; aspect-ratio: 4 / 3; max-width: 100%; background: var(--kit-line); border-radius: var(--kit-radius); overflow: hidden; }
.kit-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.kit-map.is-loaded > a { display: none; }
.kit-map > a { position: absolute; inset: 0; display: grid; place-items: center; }
@media (min-width: 900px) { .kit-map { aspect-ratio: 16 / 10; } }

/* закрытая функция: метка с замком + лист снизу; цвета — токены сайта */
.kit-lock { position: relative; cursor: pointer; }
.kit-lock__badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; font-size: 12px; line-height: 1.2; color: var(--kit-accent); border: 1px solid currentColor; border-radius: 999px; white-space: nowrap; vertical-align: middle; }
.kit-lock.is-knock { animation: kit-knock .35s ease; }
@keyframes kit-knock { 30% { translate: -3px 0; } 60% { translate: 3px 0; } }
.kit-lock__sheet { margin: auto auto 0; width: min(560px, 100%); max-width: 100%; padding: 0; border: 0; background: transparent; color: var(--kit-fg); }
.kit-lock__sheet::backdrop { background: rgb(0 0 0 / .55); }
.kit-lock__panel { background: var(--kit-bg); border: 1px solid var(--kit-line); border-bottom: 0; border-radius: calc(var(--kit-radius) + 8px) calc(var(--kit-radius) + 8px) 0 0; padding: 22px max(20px, env(safe-area-inset-left, 0px)) calc(22px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 10px; }
.kit-lock__kicker { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; color: var(--kit-accent); }
.kit-lock__title { margin: 0; font-size: 22px; line-height: 1.2; }
.kit-lock__text { margin: 0; opacity: .8; }
.kit-lock__acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.kit-lock__acts > * { min-height: 48px; padding: 0 20px; display: inline-grid; place-items: center; font: inherit; border-radius: var(--kit-radius); text-decoration: none; cursor: pointer; }
.kit-lock__call { background: var(--kit-accent); color: var(--kit-bg); }
.kit-lock__close { background: none; color: inherit; border: 1px solid var(--kit-line); }
@media (prefers-reduced-motion: reduce) { .kit-lock.is-knock { animation: none; } }
@media (min-width: 900px) { .kit-lock__sheet { margin: auto; } .kit-lock__panel { border-bottom: 1px solid var(--kit-line); border-radius: calc(var(--kit-radius) + 8px); } }

/* слово-маска: фото работ внутри букв; шрифт и кегль задаёт сайт, здесь — механика */
.kit-wordmask { margin: 0; font-weight: 900; line-height: .86; letter-spacing: -0.02em; white-space: nowrap; overflow: clip; max-width: 100%; --kit-wm-shift: 0%; }
.kit-wordmask__l { color: var(--kit-fg); }
.kit-wordmask.is-loaded .kit-wordmask__l { color: transparent; -webkit-text-fill-color: transparent; background-size: cover; background-position: 50% calc(50% + var(--kit-wm-shift)); -webkit-background-clip: text; background-clip: text; }
@supports not ((-webkit-background-clip: text) or (background-clip: text)) { .kit-wordmask.is-loaded .kit-wordmask__l { color: var(--kit-fg); -webkit-text-fill-color: currentColor; background: none; } }