/* CARRIED LIFE — оболочка двух анимаций.
 * Задача этого файла ровно одна: при любом сбое на месте анимации остаётся
 * законченный статичный кадр, а не пустой контейнер.
 *
 * Порядок отказов:
 *   1. JS не загрузился        -> .cl-anim__live висит с [hidden], виден кадр
 *   2. gsap не загрузился      -> то же самое, скрипт выходит на первой строке
 *   3. prefers-reduced-motion  -> живой слой прячется CSS-ом жёстко, !important,
 *                                 не полагаясь на то, что JS отработал
 *   4. блок ушёл с экрана      -> IntersectionObserver ставит таймлайн на паузу
 */

.cl-anim {
  position: relative;
  display: block;
}

.cl-anim__still,
.cl-anim__live {
  display: block;
}

.cl-anim__still[hidden],
.cl-anim__live[hidden] {
  display: none;
}

.cl-anim svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 100%;
  overflow: hidden;   /* кадр режет то, что уходит за кромку — решение §9 */
}

/* Анимация 1 живёт в высокой зоне: колонки 6-12, 100vh (CONCEPT §6).
   Сцены C и D вертикальные, полоса им не годится. */
.cl-anim--lifecycle {
  height: 100vh;
  max-height: 100vh;
}

/* Обёртки тоже во всю высоту зоны: иначе height:100% у svg решать не от чего,
   рисунок прижимается к верху и внизу зоны остаётся мёртвая полоса. */
.cl-anim--lifecycle .cl-anim__still,
.cl-anim--lifecycle .cl-anim__live {
  height: 100%;
}

.cl-anim--lifecycle svg {
  height: 100%;
  width: 100%;
}

@media (max-width: 767px) {
  .cl-anim--lifecycle { height: 52vh; max-height: 52vh; }

  /* Анимация 2 на телефоне: поля стоят друг под другом, и оба обязаны быть
     в одном экране вместе с заголовком раздела — иначе сравнения, ради
     которого она существует, не происходит. Потолок высоты оставляет запас
     на заголовок и не даёт блоку упереться в сгиб на невысоких экранах. */
  .cl-anim[data-cl-anim="human-farm"] { max-height: 74vh; }
  .cl-anim[data-cl-anim="human-farm"] svg { max-height: 74vh; width: auto; margin: 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .cl-anim__live { display: none !important; }
  .cl-anim__still { display: block !important; }
}