/*
 * Визитка знакомства с дизайнером на страницах стиля — сцена с остановкой.
 *
 * ЗАМЫСЕЛ. Читатель дошёл до конца мудборда «Фактуры и цвет», дальше — тёмный блок
 * «Вечерний свет». Когда их стык оказывается чуть ниже середины экрана, страница на
 * короткое время задерживается. Потом стык раздвигается: мудборд чуть отходит вверх,
 * «Вечерний свет» — настоящий, с заголовком и текстом — чуть опускается, и в раскрывшийся
 * проём из-под него снизу выезжает белая визитка и встаёт по центру экрана. В конце на
 * экране все трое: кусок фактур сверху, визитка посередине, «Вечерний свет» снизу.
 *
 * ЯЗЫК ТЕМЫ. Это тот же приём, каким в теме сделаны наезды блоков:
 *  - на главной и на страницах стиля картинка (#zoom-in) закреплена `position:sticky`,
 *    её зум ведёт `animation-timeline: view()` c `linear`, а следующий блок наезжает на неё
 *    листом со скруглением только сверху и тенью вверх (`.video-section + .projects-section`,
 *    `.style-about.about-project`: radius 25/16, тень 0 -18px 40px и 0 -34px 70px);
 *  - остановка в теме длится полэкрана (`.video-section__container::after{height:50vh}`).
 * Здесь всё то же самое: sticky-сцена, ход по скролл-таймлайну без кривых, а наезжающий
 * «Вечерний свет» оформлен таким же листом (radius 25/16 + тень вверх). Своего движка нет.
 *
 * ДВА АКТА (владелец: «сперва встык, как на сайте, потом раскрыть, потом вытащить»):
 *  акт 1, 0–40 % остановки  — раскрытие: мудборд отходит вверх, «Вечерний свет» вниз,
 *                              проём растёт до высоты визитки с просветами;
 *  акт 2, 35–100 %           — вытягивание: визитка поднимается из-под «Вечернего света»
 *                              на свою высоту + просвет и встаёт по центру экрана.
 *                              Акты перекрываются на 5 %, чтобы не было мёртвой паузы.
 * Кривых нет намеренно: темп задаёт рука на колесе, любое сглаживание поверх читается как
 * рассинхрон между пальцем и картинкой. Внутри актов движение ≈ 1:1 к прокрутке (см.
 * --kz-dbar-pin), поэтому ощущение «я сам тяну карточку», а не «за меня проигрывают».
 * Назад отыгрывает зеркально, быстрая прокрутка просто проматывает — состояние есть чистая
 * функция положения прокрутки, ломаться нечему.
 *
 * ЧТО ДВИГАЕТСЯ. Три предмета, один таймлайн:
 *  - .moodboard-section (мудборд) — стоит ВНЕ секции, его файл чужой; сдвигается стилем;
 *  - .kz-dbar ~ section (все секции после визитки: «Вечерний свет», галерея, форма) —
 *    едут одним пластом, чтобы между ними не было щелей; fixed-навигация не section и не
 *    трогается;
 *  - .kz-dbar__card — сама визитка.
 *
 * ЧЕГО ЗДЕСЬ НЕТ. gsap не зовём: в теме он за гейтом `min-width:769px`, на телефоне не
 * грузится вовсе. Штатный `.animation/.isReady` не подходит: срабатывает раз и назад не
 * отыгрывает. Ход считается двумя путями: родной скролл-таймлайн браузера, а где его нет —
 * плагин кладёт ту же долю в `--kz-dbar-p` (см. kz-designer-bar.php).
 *
 * Файл общий: его подключает и плагин kz-designer-bar.php на боевой странице, и стенд
 * /wp-content/themes/kuzart/kz-bar-stand.html. Правим ТОЛЬКО здесь.
 */

/* ═══ НАСТРОЙКИ ═══════════════════════════════════════════════════════════════════════
   Лежат на :root, а не на секции: мудборд и «Вечерний свет» стоят ВНЕ секции, а числа
   нужны и им. */
:root{
  /* Длина остановки — сколько человек листает, пока страница стоит. Подобрана так, чтобы
     внутри актов движение шло примерно 1:1 к прокрутке: на экране 820px акт 1 — 180px
     прокрутки на ~185px хода мудборда, акт 2 — 290px на ~245px хода визитки. Длиннее —
     всё ползёт медленнее пальца и кажется вязким, короче — выстреливает. */
  --kz-dbar-pin:55vh;
  /* Где стоит стык блоков в момент остановки, от верха экрана. Владелец: «старт от центра
     экрана, даже чуть ниже» — берём 56 %. Над стыком остаётся больше половины экрана
     фактур. Секция поднята на эту величину над концом мудборда. */
  --kz-dbar-peek:56vh;
  /* Просвет между визиткой и обеими кромками проёма — чтобы её ничего не подрезало. */
  --kz-dbar-gap:28px;
  /* Высота визитки. От неё считаются ходы кромок и место «Вечернего света». Точное
     значение кладёт скрипт (ResizeObserver); это запас на случай, если он не отработал —
     нарочно С ЗАПАСОМ (реальная ~250): завышенная высота лишь чуть увеличит просветы,
     заниженная подрезала бы низ карточки. Уже трижды ломалось подбором — теперь формула. */
  --kz-dbar-h:280px;
  /* Доли двух актов. Те же числа ПРОДУБЛИРОВАНЫ в @keyframes ниже (проценты кадров не
     умеют var()) — менять парой. */
  --kz-dbar-open:.4;    /* акт 1: раскрытие, 0 → 40 % остановки */
  --kz-dbar-pull:.35;   /* акт 2: вытягивание, 35 → 100 % */

  /* ── Производные, руками не править ── */
  /* Доли внутри актов для запасного пути. --kz-dbar-p (0…1) кладёт скрипт на <html>;
     без скрипта и без таймлайна остаётся 1 — раскрытое конечное положение, страница
     просто листается. */
  --kz-dbar-po:clamp(0, var(--kz-dbar-p, 1) / var(--kz-dbar-open), 1);
  --kz-dbar-pp:clamp(0, (var(--kz-dbar-p, 1) - var(--kz-dbar-pull)) / (1 - var(--kz-dbar-pull)), 1);
  /* Полвысоты визитки + просвет: на столько кромки проёма отстоят от центра экрана в конце. */
  --kz-dbar-half:calc(var(--kz-dbar-h) / 2 + var(--kz-dbar-gap));
  /* Ходы кромок в акте 1: от стыка (--kz-dbar-peek) до своих мест вокруг центра.
     Стык ниже центра, поэтому мудборду идти дальше, чем «Вечернему свету». */
  --kz-dbar-up:calc(var(--kz-dbar-peek) - 50vh + var(--kz-dbar-half));
  --kz-dbar-down:calc(50vh + var(--kz-dbar-half) - var(--kz-dbar-peek));
}
/* Таймлайн секции поднят на уровень страницы, чтобы его видели соседи (они не потомки). */
body{timeline-scope:--kz-dbar-scene}

/* ═══ МУДБОРД: ОСТАЁТСЯ В КАДРЕ ═══════════════════════════════════════════════════════
   Владелец: «фактуры уезжают далеко, я их не вижу, когда визитка есть». Закрепить сам
   мудборд нельзя (его разметка — файл SERVER, и sticky там некуда упереть), поэтому во
   время остановки он сдвигается вниз ровно на столько, на сколько прокрутилась страница,
   — и на экране стоит на месте. В акте 1 отходит вверх на --kz-dbar-up, дальше замирает.
   После остановки едет вместе со сценой как её часть.
   Порядок слоёв: мудборд (1) над сценой (0); «О стиле» (2) над мудбордом — его нижняя
   тень-расслоение остаётся видна. */
.moodboard-section{
  position:relative;z-index:1;
  transform:translateY(calc(var(--kz-dbar-p, 1) * var(--kz-dbar-pin) - var(--kz-dbar-up) * var(--kz-dbar-po)));
}

/* ═══ «ВЕЧЕРНИЙ СВЕТ» И ВСЁ ПОСЛЕ НЕГО: НАЕЗЖАЮТ САМИ ══════════════════════════════════
   Никакой нарисованной подложки — владелец распознал её как посторонний блок. Наезжает
   настоящая секция со своим заголовком и текстом, а за ней одним пластом все остальные
   секции страницы (иначе между ними открылась бы щель). Разметка их не тронута — только
   transform снаружи.
   Геометрия: секция визитки заканчивается на (50vh − half) РАНЬШЕ, чем стоит её сцена,
   — отрицательный margin-bottom ниже. Поэтому в конце хода «Вечерний свет» лежит ровно
   под визиткой с просветом, БЕЗ остаточного сдвига, и дальше страница листается как
   обычно. До остановки он стоит встык с мудбордом — как на сайте сейчас. Во время
   остановки сдвиг гасит прокрутку (он стоит на экране), а в акте 1 к этому добавляется
   ход вниз на --kz-dbar-down. */
.kz-dbar ~ section{
  position:relative;z-index:2;   /* поверх сцены: визитка выходит ИЗ-ПОД него */
  transform:translateY(calc(-1 * var(--kz-dbar-down) * (1 - var(--kz-dbar-po)) - var(--kz-dbar-pin) * (1 - var(--kz-dbar-p, 1))));
}
/* Первая из них — лист темы: скруглён только сверху, тень вверх. Тот же приём, что у
   «О стиле» на триптихе и у блока проектов на главной, только лист тёмный на светлом.
   У последующих секций лист не нужен — сбрасываем. */
.kz-dbar ~ section{border-radius:25px 25px 0 0;box-shadow:0 -18px 40px rgba(36,34,31,.22)}
.kz-dbar ~ section ~ section{border-radius:0;box-shadow:none}

/* ═══ СЦЕНА ═══════════════════════════════════════════════════════════════════════════ */
.kz-dbar{
  position:relative;z-index:0;
  /* Секция начинается ВЫШЕ конца мудборда на --kz-dbar-peek: её верх лежит под хвостом
     мудборда (он сверху по z), и стык виден на 56 % экрана, когда сцена встаёт. */
  margin-top:calc(-1 * var(--kz-dbar-peek));
  /* Соседи снизу заходят на сцену: см. «Вечерний свет» выше. */
  margin-bottom:calc(var(--kz-dbar-half) - 50vh);
  /* Тема даёт секциям padding 50px и overflow:hidden — первое сдвигает начало сцены
     относительно начала таймлайна, второе ломает прилипание. Убираем и то и другое. */
  padding:0;
  overflow:visible;
  background:#F4F4F4;
  /* Высота = экран + остановка: этот запас и есть прокрутка, на которой идёт ход. */
  min-height:calc(100vh + var(--kz-dbar-pin));
  view-timeline-name:--kz-dbar-scene;
  view-timeline-axis:block;
}

/* Сцена прилипает к верху на время запаса. Обычное прилипание, ничего не перехватываем:
   колесо и полоса прокрутки работают как всегда, залипнуть насовсем страница не может.
   Сетка из трёх рядов: визитка в среднем, крайние равные — так она стоит ровно по центру
   экрана при любой своей высоте, без единого числа. */
.kz-dbar__stage{
  position:sticky;top:0;
  height:100vh;
  display:grid;
  grid-template-columns:100%;
  grid-template-rows:minmax(0,1fr) auto minmax(0,1fr);
  overflow:hidden;
  background:#F4F4F4;   /* светлое поле проёма, тем же цветом, что мудборд */
}
.kz-dbar__slot{grid-row:2;grid-column:1;position:relative;z-index:1;width:100%}

/* Визитка: в начале спрятана под «Вечерним светом» (её верх — там, где он встанет в
   конце), в акте 2 поднимается на свою высоту + просвет и оказывается по центру.
   Проценты — от собственной высоты, поэтому число здесь не нужно. */
.kz-dbar__card{
  position:relative;
  transform:translateY(calc((100% + var(--kz-dbar-gap)) * (1 - var(--kz-dbar-pp))));
}

/* ХОД по родному скролл-таймлайну — там, где браузер его знает. Один таймлайн ведёт все
   три предмета.

   ⚠️ ПОЧЕМУ НЕ `contain` (найдено SERVER'ом 16.09 перед выкладкой на бой). `contain` — это
   отрезок, пока субъект помещается в окне целиком. А субъект здесь — сама секция `.kz-dbar`
   с `min-height: calc(100vh + pin)`, то есть ВСЕГДА выше экрана. Такой отрезок нулевой длины:
   прогресс не двигается ни на пиксель, карточка стоит в начальном положении и остаётся
   под тёмным блоком — на стендах 8098 и 8100 визитка просто не появлялась (проверено
   замером: сдвиг 310px не менялся при любой прокрутке).
   `cover` — проход субъекта через экран целиком, он всегда положительный. Берём его
   середину, 35–65%: ход начинается, когда секция уже занимает экран, и заканчивается
   до того, как она уйдёт, — то есть там же, где и задумано, но отрезок реальный. */
@supports (animation-timeline:view()){
  .moodboard-section,.kz-dbar ~ section,.kz-dbar__card{
    animation-timing-function:linear;
    animation-fill-mode:both;
    animation-timeline:--kz-dbar-scene;
    animation-range:cover 35% cover 65%;
  }
  .moodboard-section{animation-name:kz-dbar-mood}
  .kz-dbar ~ section{animation-name:kz-dbar-next}
  .kz-dbar__card{animation-name:kz-dbar-card}
}
/* Кадры. 40 % и 35 % — те же доли актов, что --kz-dbar-open / --kz-dbar-pull выше. */
@keyframes kz-dbar-mood{
  0%  {transform:translateY(0)}
  40% {transform:translateY(calc(.4 * var(--kz-dbar-pin) - var(--kz-dbar-up)))}
  100%{transform:translateY(calc(var(--kz-dbar-pin) - var(--kz-dbar-up)))}
}
@keyframes kz-dbar-next{
  0%  {transform:translateY(calc(-1 * var(--kz-dbar-down) - var(--kz-dbar-pin)))}
  40% {transform:translateY(calc(-.6 * var(--kz-dbar-pin)))}
  100%{transform:none}
}
@keyframes kz-dbar-card{
  0%  {transform:translateY(calc(100% + var(--kz-dbar-gap)))}
  35% {transform:translateY(calc(100% + var(--kz-dbar-gap)))}
  100%{transform:none}
}

/* ═══ САМА КАРТОЧКА ════════════════════════════════════════════════════════════════ */
.kz-dbar__card{
  display:grid;
  grid-template-columns:116px minmax(0,1fr) 340px;
  gap:18px 32px;   /* между колонками 32, до нижней полосы соцсетей 18 */
  align-items:center;
  background:#fff;
  border-radius:25px;
  padding:30px 38px 32px;
  /* Контейнер темы тянется до 1860 — на широком мониторе полоса расползалась, текст жался
     к левому краю, справа висела пустота. Держим её в читаемой ширине. */
  max-width:1060px;
  margin:0 auto;
  /* Тень мягкая и короткая: карточка лежит на светлом поле с просветом до кромки, ей
     нужно лишь чуть отделиться от фона. Предупреждение темы про box-shadow относится
     к блокам во всю ширину — там тень упирается хвостами в края экрана. */
  box-shadow:0 24px 50px -30px rgba(0,0,0,.35);
}

/* Портрет — оригинальный кадр, без подкраски: владелец просил тёмный, как он есть. */
.kz-dbar__photo{
  width:116px;height:140px;border-radius:18px;overflow:hidden;
  /* В теме есть глобальное `img{z-index:-1}`. Карточка едет через transform, а transform
     создаёт свой контекст наложения — без изоляции портрет уходит ЗА белый фон карточки:
     файл загружен, стили видимые, а на экране пусто. Та же болячка, что с фото на главной. */
  isolation:isolate;
}
.kz-dbar__photo img{
  position:relative;z-index:0;
  width:100%;height:100%;object-fit:cover;object-position:50% 32%;
}

.kz-dbar__title{
  margin:0;font-size:clamp(17px,1.5vw,21px);font-weight:500;line-height:1.3;
  letter-spacing:.01em;color:#131313;
  /* В теме h2 набраны капсом. Короткая метка капсом читается как метка, а целая фраза —
     как крик; владелец ровно на это и жаловался («как будто напрашиваюсь»). */
  text-transform:none;
}
/* В теме абзацы выключены по формату (justify) — на короткой строке это даёт «реки»
   между словами. В визитке строка короткая, поэтому равняем по левому краю. */
.kz-dbar__lead{margin:9px 0 0;font-size:14.5px;line-height:1.5;color:#565654;text-align:left}
.kz-dbar__who{margin:12px 0 0;display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;font-size:13px}
.kz-dbar__name{color:#131313;font-weight:600}
.kz-dbar__role{color:#6b6b6b}

/* Поле — один в один штатное из окна заявки. Стили там записаны как `#call-form .kz-field`
   и вне попапа не применяются, поэтому значения повторены, а не подключены. */
.kz-dbar__field{position:relative;margin-bottom:12px}
.kz-dbar__field input{
  width:100%;box-sizing:border-box;font-family:inherit;font-size:15px;color:#131313;
  background:#f5f5f4;border:1.5px solid #f5f5f4;border-radius:13px;padding:15px 17px;
  outline:none;transition:border-color .2s,background .2s;
}
.kz-dbar__field input::placeholder{color:#6b6b6b}
.kz-dbar__field input:focus{border-color:#131313;background:#fff}
.kz-dbar__field._err input{border-color:#d64545;background:#fdf3f3}

/* Выбор мессенджера в самой визитке НЕ показываем — владелец просил её не загромождать.
   Четыре чипа живут в окне заявки и появляются после нажатия кнопки. */

/* Кнопка — фирменная .arrow-zoom из темы. Своё здесь только то, что она тянется
   на ширину колонки: у самой .arrow-zoom ширина `min-content`. */
.kz-dbar__btn{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;font-family:inherit}
.kz-dbar__btn .arrow-zoom__body{width:100%;box-sizing:border-box;text-align:center;padding:16px 60px 16px 30px}
/* 16.09.2026, снимок владельца с телефона: белый круг со стрелкой вылезал за края чёрной пилюли.
   Причина — размеры темы: круг у `.arrow-zoom` нарисован 50×50 под большую кнопку (высота 60+),
   а здесь пилюля ниже: 51px на компьютере и 45px на телефоне. Круг просто не помещался —
   торчал сверху, снизу и справа. Ужимаем его под высоту этой кнопки; наведение (круг
   разрастается на всю пилюлю) работает как у остальных кнопок сайта. */
.kz-dbar__btn .arrow-zoom__body:after{width:41px;height:41px;right:5px}
.kz-dbar__btn .arrow-zoom__body:before{right:17px}
.kz-dbar__note{margin:10px 2px 0;font-size:12px;line-height:1.45;color:#6b6b6b}

/* Ряд «Написать нам» — прямые ссылки в переписку. Стоит над соцсетями и оформлен
   заметнее их: значки крупнее и темнее, у каждого своя обводка — это действие, а не сноска.
   Фирменных цветов намеренно нет (владелец: «убирай подсветку, потом задизайнерим»),
   поэтому ряд читается как один элемент, а не как четыре чужих логотипа.
   Занимает всю ширину карточки, как и полоса соцсетей под ним. */
.kz-dbar__write{
  grid-column:1 / -1;
  display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;
  margin-top:6px;padding-top:16px;
  border-top:1px solid rgba(19,19,19,.08);
}
.kz-dbar__write-label{font-size:12.5px;color:#565654}
.kz-dbar__write-row{display:flex;align-items:center;gap:8px}
.kz-dbar__write-item{
  display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  color:#565654;background:#f5f5f4;border:1.5px solid #f5f5f4;text-decoration:none;
  transition:color .25s ease-out,background-color .25s ease-out,border-color .25s ease-out;
}
.kz-dbar__write-item .kz-chan__ico{width:21px;height:21px;display:block}
@media (hover:hover) and (min-width:768px){
  .kz-dbar__write-item:hover{color:#fff;background:#131313;border-color:#131313}
}
.kz-dbar__write-item:focus-visible{outline:2px solid #131313;outline-offset:2px}

/* Соцсети остались вторым рядом со своей линией сверху: две тонкие полоски подряд
   как раз и разводят «написать» и «подписаться» — на примерке так читается лучше,
   чем один общий блок из восьми кружков. */

/* Нижняя полоса — соцсети. Тихая сноска, а не второй ряд кнопок: тонкая линия сверху,
   мелкие значки приглушённого цвета, проявляются только под курсором. Ссылки — те же,
   что в подвале. Занимает всю ширину карточки, открывается из-под «Вечернего света»
   последней — это финал хода. */
.kz-dbar__soc{
  grid-column:1 / -1;
  display:flex;align-items:center;flex-wrap:wrap;gap:4px;
  margin-top:2px;padding-top:14px;
  border-top:1px solid rgba(19,19,19,.08);
}
.kz-dbar__soc-label{font-size:12px;color:#8a8a87;margin-right:10px}
.kz-dbar__soc-item{
  display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  color:#a3a3a0;text-decoration:none;
  transition:color .25s ease-out,background-color .25s ease-out;
}
.kz-dbar__soc-item .kz-chan__ico{width:18px;height:18px;display:block}
/* Наведение — только там, где есть курсор; в теме hover-эффекты тоже от 768px. */
@media (hover:hover) and (min-width:768px){
  .kz-dbar__soc-item:hover{color:#131313;background:#f5f5f4}
}
.kz-dbar__soc-item:focus-visible{outline:2px solid #131313;outline-offset:2px;color:#131313}

/* ═══ ЭКРАНЫ ══════════════════════════════════════════════════════════════════════ */
@media (max-width:1180px){
  .kz-dbar__card{grid-template-columns:116px minmax(0,1fr) 300px;gap:16px 24px;padding:26px 30px 30px}
}
@media (max-width:1024px){
  /* Планшет: портрет и текст одной строкой, форма — строкой под ними, во всю ширину.
     Карточка выше (~330px), поэтому проём раскрывается шире и остановка чуть длиннее,
     чтобы темп внутри актов остался около 1:1. */
  :root{--kz-dbar-pin:65vh;--kz-dbar-h:400px}
  .kz-dbar__card{grid-template-columns:116px minmax(0,1fr);gap:22px 26px}
  .kz-dbar__form{grid-column:1 / -1}
}
@media (max-width:768px){
  /* Телефон: всё по центру — прямая просьба владельца. Карточка в столбик занимает две
     трети экрана, поэтому кромкам расходиться дальше (~300px), а визитке подниматься на
     ~500px; остановка длиннее — чуть больше одного свайпа. Просвет меньше, места мало.
     На телефоне gsap в теме не грузится вовсе — здесь он и не нужен. */
  :root{--kz-dbar-pin:90vh;--kz-dbar-h:520px;--kz-dbar-gap:18px}

  .kz-dbar ~ section{border-radius:16px 16px 0 0;box-shadow:0 -14px 32px rgba(36,34,31,.22)}
  .kz-dbar ~ section ~ section{border-radius:0;box-shadow:none}
  /* Карточка в столбик должна оставить место и хвосту фактур сверху, и «Вечернему свету»
     снизу — на экране 760px это значит не выше ~460px. Поэтому всё компактнее: портрет
     меньше, поля уже, подпись под кнопкой убрана, у соцсетей только значки. */
  .kz-dbar__card{
    grid-template-columns:1fr;justify-items:center;text-align:center;
    gap:12px;padding:20px 16px 18px;border-radius:16px;
  }
  .kz-dbar__photo{width:88px;height:106px;border-radius:14px}
  /* Ширину заголовка не режем: ограничение оставляло «менеджером» одиноким третьим рядом. */
  .kz-dbar__title{max-width:none;font-size:16px}
  .kz-dbar__lead{font-size:13.5px;text-align:center;margin-top:6px}
  .kz-dbar__who{justify-content:center;margin-top:8px;font-size:12px}
  .kz-dbar__form{width:100%;max-width:400px}
  .kz-dbar__field{margin-bottom:10px}
  .kz-dbar__field input{padding:12px 15px;font-size:14px}
  .kz-dbar__btn .arrow-zoom__body{padding:13px 56px 13px 26px}
  .kz-dbar__btn .arrow-zoom__body:after{width:37px;height:37px;right:4px}
  .kz-dbar__btn .arrow-zoom__body:before{right:15px}
  .kz-dbar__note{display:none}
  .kz-dbar__soc{justify-content:center;width:100%;padding-top:8px;margin-top:0}
  .kz-dbar__soc-label{display:none}
  /* На телефоне карточка узкая: ряд «Написать нам» встаёт по центру, подпись остаётся —
     без неё четыре кружка читаются как повтор соцсетей под ними. */
  .kz-dbar__write{justify-content:center;width:100%;padding-top:12px;margin-top:2px;gap:4px 10px}
  .kz-dbar__write-label{width:100%;text-align:center;font-size:12px}
  .kz-dbar__write-item{width:36px;height:36px}
}

/* ═══ БЕЗ ДВИЖЕНИЯ ═════════════════════════════════════════════════════════════════
   Три случая, одна и та же раскладка: обычный светлый блок, карточка лежит на месте,
   мудборд и «Вечерний свет» стоят как стояли.
   1) prefers-reduced-motion — тем, кто просил систему не двигать картинку, остановка
      страницы неприятна ровно так же, как и сам проезд; в теме выключатель описан только
      для главной, свой — обязателен.
   2) экран ниже 560px (телефон боком) — сцене в 100vh негде развернуться.
   3) класс kz-dbar-static на <html> — его ставит скрипт, когда карточка вместе с
      просветами не помещается в экран по высоте (очень мелкий телефон).
   Блок повторён дважды: список @media нельзя смешать с селектором класса. */
@media (prefers-reduced-motion:reduce),(max-height:560px){
  .moodboard-section,.kz-dbar ~ section{transform:none;animation:none}
  .kz-dbar ~ section{border-radius:0;box-shadow:none}
  .kz-dbar{min-height:0;margin:0}
  .kz-dbar__stage{position:static;height:auto;display:block;overflow:visible;padding:8px 0 40px}
  .kz-dbar__card{transform:none;animation:none}
}
html.kz-dbar-static .moodboard-section,html.kz-dbar-static .kz-dbar ~ section{transform:none;animation:none}
html.kz-dbar-static .kz-dbar ~ section{border-radius:0;box-shadow:none}
html.kz-dbar-static .kz-dbar{min-height:0;margin:0}
html.kz-dbar-static .kz-dbar__stage{position:static;height:auto;display:block;overflow:visible;padding:8px 0 40px}
html.kz-dbar-static .kz-dbar__card{transform:none;animation:none}