/* История по прокрутке. Без класса kadry-js (его ставит только kadry.js, когда точно рисует: нет при reduced motion, без canvas)
   показываем постер и все подписи столбиком: содержимое не теряется. */
.kadry { position: relative; }
.kadry-lipko { position: relative; }
.kadry-poster { display: block; width: 100%; height: auto; }
.kadry-holst { display: none; }
.kadry-podpis { margin: 16px 0 0; padding: 0 16px; font-size: 1.125rem; line-height: 1.4; }

/* Режим скрипта: высокая секция, внутри липкая обёртка на всё окно. Высоту секции
   можно переопределить в стилях страницы (чем выше, тем медленнее история). */
.kadry-js .kadry:not([data-avto]) { min-height: 300vh; }
.kadry-js .kadry-lipko {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}
.kadry-js .kadry-poster,
.kadry-js .kadry-holst {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.kadry-js .kadry-holst { display: block; }
/* Постер остаётся под холстом, пока первый кадр не нарисован, потом не мешает. */
.kadry-js .kadry.kadry-gotov .kadry-poster { visibility: hidden; }
.kadry-js .kadry-podpis {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12vh;
  margin: 0 auto;
  max-width: 36rem;
  padding: 14px 20px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .88);
  color: #1b1b1b;
  font-weight: 600;
  text-align: center;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .4s ease, transform .4s ease;
  pointer-events: none;
}
.kadry-js .kadry-podpis.vidna { opacity: 1; transform: none; }

@media (max-width: 768px) {
  .kadry-js .kadry-podpis { bottom: 8vh; margin-left: 16px; margin-right: 16px; font-size: 1rem; }
}

/* Первый экран кадрами (data-avto): обычный блок, высоту задаёт сайт (например min-height: 100svh у .hero).
   300vh истории на авто-секцию не действует (там :not([data-avto])), min-height не сбрасываем: его задаёт сайт.
   Подложка (холст и постер) лежит на всю секцию, текст .kadry-tekst поверх. Подложку кладём absolute inset:0,
   а не height:100% у relative-обёртки: при одном min-height у секции процент высоты не считается и подложка схлопнулась бы.
   Правила работают и без класса kadry-js: при reduced motion остаётся постер, и текст стоит поверх него. */
.kadry.kadry-avto,
/* data-avto без положительного числа (например "0") не поддерживается: CSS посчитает секцию авто, а kadry.js историей.
   Заслон на это один, check_site.py, он такую разметку краснит. */
.kadry[data-avto],
.kadry-js .kadry.kadry-avto,
.kadry-js .kadry[data-avto] { position: relative; overflow: hidden; }
.kadry[data-avto] .kadry-lipko,
.kadry-js .kadry[data-avto] .kadry-lipko {
  position: absolute;
  inset: 0;
  height: 100%;
  overflow: hidden;
}
.kadry[data-avto] .kadry-poster,
.kadry[data-avto] .kadry-holst {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.kadry[data-avto] .kadry-tekst { position: relative; z-index: 1; }

/* Первый экран на компьютере (слово владельца 10.11.2026, образец промебель360): кадры не на всю ширину экрана,
   а в левых 62 % секции с мягким уходом в фон справа; текст стоит в правой части на фоне секции. Телефон без
   изменений: кадры на весь экран, текст поверх. Цвет ухода берёт --kadry-fon, сайт задаёт её на .hero равной фону
   первого экрана (иначе на стыке виден шов); без переменной фон тёмный. Текстовую колонку делает padding-left у
   .kadry-tekst, а не сдвиг блока: подпись «иллюстрация» (.ill, absolute внизу слева от .kadry-tekst) остаётся на кадре.
   Отступы .hero-body под колонку подгоняет сайт. */
@media (min-width: 900px) {
  .kadry[data-avto] .kadry-lipko { right: auto; width: 62%; }
  .kadry[data-avto] .kadry-lipko::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 55%, var(--kadry-fon, #1b1b1b) 100%);
    pointer-events: none;
  }
  .kadry[data-avto] .kadry-tekst { padding-left: 56%; box-sizing: border-box; }
}