/* ==================================================================
   animation.css — Анимации по скроллу, hover-эффекты
   Дата: 26.06.2026
   Changelog:
     26.06 — создан файл:
       - scroll-анимации для заголовков, преимуществ, model-info,
         model-image, model-colors, model-specifications, model-keys
       - hover-смена иконок в .advantages-item
       - hover-зум бекграунда в .model-keys-item
   ================================================================== */

/* ---------- Базовые состояния ---------- */

/* Скрытое состояние — элементы невидимы */
.anim-hidden {
  opacity: 0;
}

/* Видимое состояние */
.anim-visible {
  opacity: 1;
}

/* ---------- Заголовки: появление сверху вниз ---------- */

.anim-scroll-title.anim-hidden {
  transform: translateY(-50px);
}
.anim-scroll-title.anim-visible {
  transform: translateY(0);
  transition: transform 1s ease-out, opacity 1s ease-out;
}

/* ---------- Преимущества: с разных сторон к центру ---------- */

.advantages-item.anim-hidden {
  opacity: 0;
}
.advantages-item.anim-visible {
  transition: transform 1s ease-out, opacity 1s ease-out;
}

/* Первый элемент — слева */
.advantages-item[data-anim="left"].anim-hidden {
  transform: translateX(-200px);
}
.advantages-item[data-anim="left"].anim-visible {
  transform: translateX(0);
}

/* Второй элемент — снизу */
.advantages-item[data-anim="bottom"].anim-hidden {
  transform: translateY(200px);
}
.advantages-item[data-anim="bottom"].anim-visible {
  transform: translateY(0);
}

/* Третий элемент — справа */
.advantages-item[data-anim="right"].anim-hidden {
  transform: translateX(200px);
}
.advantages-item[data-anim="right"].anim-visible {
  transform: translateX(0);
}

/* Четвёртый элемент — слева */
.advantages-item[data-anim="left2"].anim-hidden {
  transform: translateX(-200px);
}
.advantages-item[data-anim="left2"].anim-visible {
  transform: translateX(0);
}

/* ---------- Model info: выезжает слева ---------- */

.model-info.anim-hidden {
  transform: translateX(-150px);
  opacity: 0;
}
.model-info.anim-visible {
  transform: translateX(0);
  opacity: 1;
  transition: transform 1s ease-out, opacity 1s ease-out;
}

/* ---------- Model image: выезжает сверху ---------- */

.model-image.anim-hidden {
  transform: translateY(-120px);
  opacity: 0;
}
.model-image.anim-visible {
  transform: translateY(0);
  opacity: 1;
  transition: transform 1s ease-out, opacity 1s ease-out;
}

/* ---------- Model colors: выезжает снизу ---------- */

.model-colors.anim-hidden {
  transform: translateY(120px);
  opacity: 0;
}
.model-colors.anim-visible {
  transform: translateY(0);
  opacity: 1;
  transition: transform 1s ease-out, opacity 1s ease-out;
}

/* ---------- Model specifications: просто появляется (fade) ---------- */

.model-specifications.anim-hidden {
  opacity: 0;
}
.model-specifications.anim-visible {
  opacity: 1;
  transition: opacity 1s ease-out;
}

/* ---------- Model keys: с разных сторон к центру ---------- */

.model-keys-item.anim-hidden {
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 1s ease-out, transform 1s ease-out;
}
.model-keys-item.anim-visible {
  opacity: 1;
  transform: scale(1);
}
.model-keys-item-sm {
  overflow: hidden;
  background-size: 100%;
  background-position: center;
  transition: background-size 1s ease;
}
.model-keys-item-sm.anim-visible:hover {
  background-size: 110%;
}
.model-keys-item-lg {
  overflow: hidden;
  background-size: 100%;
  background-position: center;
  transition: background-size 1s ease;
}
.model-keys-item-lg.anim-visible:hover {
  background-size: 120%;
}

/* ---------- Advantages: hover-смена иконки ---------- */

.advantages-item .icon-active {
  display: none;
}
.advantages-item:hover .icon-active {
  display: inline-block;
}
.advantages-item:hover .icon-normal {
  display: none;
}