/* ─── ANIMATIONS ──────────────────────────────────────────────────────────────
 * Hero:            page-load, @keyframes (animation-delay + forwards)
 * Top Destinations: scroll-triggered, @keyframes (race-condition safe)
 * Our Solutions:   scroll-triggered, @keyframes (race-condition safe)
 *
 * Почему keyframes, а не transition:
 *   CSS transition требует чтобы начальное состояние (opacity:0) было отрисовано
 *   ДО добавления --visible класса. Если IntersectionObserver срабатывает сразу
 *   (элемент уже в viewport при инициализации), transition пропускается.
 *   @keyframes animation всегда стартует с from{} — race condition невозможен.
 * ─────────────────────────────────────────────────────────────────────────── */

/* ─── KEYFRAMES ────────────────────────────────────────────────────────────── */

/* Hero */
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* H2-заголовки */
@keyframes revealUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* Top Destinations карточки */
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-64px); }
  to   { opacity: 1; transform: translateX(0);     }
}

/* Our Solutions карточки */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(48px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

/* ─── HERO: PAGE-LOAD ───────────────────────────────────────────────────────── */

.hero__anim-title {
  opacity:         0;
  animation:       fadeSlideUp 0.65s ease forwards;
  animation-delay: 0.05s;
}

.hero__anim-subtitle {
  opacity:         0;
  animation:       fadeSlideUp 0.65s ease forwards;
  animation-delay: 0.4s;
}

.hero__anim-stat {
  opacity:         0;
  animation:       fadeSlideUp 0.55s ease forwards;
  animation-delay: calc(0.75s + var(--card-i, 0) * 0.18s);
}

/* ─── H2-ЗАГОЛОВКИ: SCROLL-TRIGGERED ────────────────────────────────────────
 * .anim-reveal — начальное состояние (скрыто)
 * .anim-reveal--visible — добавляет JS, запускает анимацию
 * ─────────────────────────────────────────────────────────────────────────── */

.anim-reveal {
  opacity:     0;
  will-change: opacity, transform;
}

.anim-reveal--visible {
  animation: revealUp 0.6s ease both;
}

/* ─── TOP DESTINATIONS: SCROLL-TRIGGERED ────────────────────────────────────
 * Карточки выезжают слева, stagger 0.33s между каждой
 * ─────────────────────────────────────────────────────────────────────────── */

.anim-slide-left {
  opacity:     0;
  will-change: opacity, transform;
}

.anim-slide-left--visible {
  animation:       slideInLeft 0.25s ease both;
  animation-delay: calc(var(--card-i, 0) * 0.165s);
}

/* ─── OUR SOLUTIONS: SCROLL-TRIGGERED ──────────────────────────────────────
 * card--solution: всплывают снизу со scale, stagger 0.15s между каждой
 * cubic-bezier(0.22, 1, 0.36, 1) = ease-out expo — плавное «приземление»
 * ─────────────────────────────────────────────────────────────────────────── */

.anim-rise {
  opacity:     0;
  will-change: opacity, transform;
}

.anim-rise--visible {
  animation:       riseIn 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--card-i, 0) * 0.15s);
}

/* ─── REDUCE MOTION ─────────────────────────────────────────────────────────
 * Отключаем все анимации для пользователей с соответствующей системной настройкой
 * ─────────────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .hero__anim-title,
  .hero__anim-subtitle,
  .hero__anim-stat,
  .anim-reveal--visible,
  .anim-slide-left--visible,
  .anim-rise--visible {
    animation: none;
  }

  .hero__anim-title,
  .hero__anim-subtitle,
  .hero__anim-stat,
  .anim-reveal,
  .anim-slide-left,
  .anim-rise {
    opacity:   1;
    transform: none;
  }
}