/*! Конструктор остекления Битанго © 2026 bitango.ru. Все права защищены.
 *  Копирование и размещение на сторонних ресурсах без письменного разрешения
 *  правообладателя запрещено. */
/* Витрина анимаций на страницах сайта. Отдельный файл от calc.css: страницам
   с блоком систем не нужны стили мастера, а лишний вес им не полезен. */

/* У карточки блока систем своё фоновое фото из CSS сайта, а чертёж прозрачный —
   без собственного фона фотография просвечивала сквозь стёкла (правка 78). */
.bt-anim{position:relative;display:block;background:#F4F6F9}
.bt-anim-stage{position:relative;display:block;width:100%;background:#F4F6F9}
.sys-img:has(> .bt-anim){background-image:none}
/* Градиента под чертежом нет вовсе. На фото он нужен, чтобы читались подписи
   поверх съёмки; под светлым чертежом это грязное пятно, которого нет в таких же
   блоках на других страницах. Перехват кликов со слоя тоже снят: он лежит поверх
   видео и съедал и паузу по кадру, и кнопки плеера (правки 87, 88). */
.sys-img:has(> .bt-anim)::after{background:none;pointer-events:none}
.bt-anim-svg{display:block;width:100%;height:auto}
/* Поле держит ту же пропорцию, что чертёж (viewBox 640×400): при переключении
   на видео карточка не должна менять высоту (правка 89). Видео заполняет поле
   и подрезается по краям — пустых полос нет. */
.bt-anim-stage{aspect-ratio:16/10}
.bt-anim .bt-anim-video{position:absolute;inset:0;display:block;
  width:100%;height:100%;object-fit:cover;background:#0d1117;cursor:pointer}

/* Маркер системы («Нижнеопорная», «Слайдер») — в правый верхний угол: слева снизу
   теперь кнопки витрины, и метка с ними спорила (правка 85). */
.sys-img:has(> .bt-anim) .sys-tag{left:auto;right:14px;top:14px}

/* Кнопки лежат на самой картинке, слева снизу: там они не спорят с чертежом. */
.bt-anim-bar{position:absolute;left:12px;right:12px;bottom:12px;z-index:2;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap}

.bt-anim-b,.bt-anim-t{font:inherit;font-size:13px;font-weight:600;line-height:1;
  padding:9px 14px;border-radius:999px;cursor:pointer;color:#11161F;
  background:rgba(255,255,255,.88);border:1px solid rgba(17,22,31,.08);
  backdrop-filter:blur(3px)}
.bt-anim-b:hover,.bt-anim-t:hover{background:#fff}
.bt-anim-i{display:inline-block;margin-right:4px;color:#2E9AA8}

.bt-anim-tabs{display:flex;gap:6px;flex-wrap:wrap}
.bt-anim-t{font-weight:500;background:rgba(255,255,255,.78)}
.bt-anim-t.is-on{background:#2E9AA8;border-color:#2E9AA8;color:#fff}

.bt-anim-note{font-size:12px;color:#6B7480;background:rgba(255,255,255,.78);
  padding:4px 8px;border-radius:999px}

@media (max-width:640px){
  .bt-anim-bar{left:8px;right:8px;bottom:8px;gap:6px}
  .bt-anim-b,.bt-anim-t{font-size:12px;padding:8px 11px}
  .bt-anim-note{display:none}
}

/* Две конструкции рядом: «Прямая» и «Угловая» — один и тот же механизм в двух
   случаях, и на десктопе их сравнивают глазами, а не пролистывая (правка 03.09.2026).
   🔴 `min-width:0` обязателен: ячейка сетки по умолчанию не уже своего содержимого,
   и чертёж распирал бы колонку за край страницы. */
.bt-pair{display:grid;gap:24px 26px;margin-top:20px}
.bt-pair > *{min-width:0;display:flex;flex-direction:column}
.bt-pair h3{margin-top:0}
/* Подписи у колонок разной длины, и чертежи вставали ступенькой. Прижимаем их к низу:
   ячейки сетки одной высоты, поэтому нижняя граница у обоих чертежей общая. */
.bt-pair .bt-anim{margin-top:auto}
@media (min-width:900px){
  .bt-pair{grid-template-columns:1fr 1fr}
}

/* Шапка страниц систем: в поле «видео» стоит чертёж, а не съёмка.
   Градиент нужен подписям поверх кадра — под светлым чертежом это грязное пятно.
   Жёсткое 16/10 держало анимацию вдвое ниже соседней колонки текста; чертежи здесь
   ограничены высотой, поэтому лишняя высота их реально укрупняет (правка 03.09.2026). */
/* Колонки шапки выровнены по центру (`align-items:center`), поэтому поле само
   не растянется — тянем его отдельно, иначе высота колонки текста остаётся неиспользованной. */
.page-head--split .ph-video:has(> .bt-anim){aspect-ratio:auto;background:#F4F6F9;align-self:stretch}
.page-head--split .ph-video:has(> .bt-anim)::after{background:none;pointer-events:none}
.page-head--split .ph-video > .bt-anim{height:100%}
/* Высоту поля задаёт колонка, а не сам чертёж: иначе размер поля зависел бы от SVG,
   а SVG — от размера поля, и наблюдатель размера гонял бы отрисовку по кругу. */
.page-head--split .ph-video .bt-anim-stage{height:100%;aspect-ratio:auto}
.page-head--split .ph-video .bt-anim-svg{height:100%}