/* ============================================================
   Анімації появи: текст виїжджає, цифри перераховуються.
   Вмикається лише коли працює JS (html.anim-ready).
   Без JS сайт виглядає як раніше — нічого не ховається.
   ============================================================ */

/* --- Базовий стан елементів, які JS позначив для появи --- */
.anim {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--anim-delay, 0ms);
  will-change: opacity, transform;
}

.anim-left  { transform: translateX(-36px); }
.anim-right { transform: translateX(36px); }
.anim-scale { transform: scale(0.94); }
.anim-fade  { transform: none; }

/* --- Показаний стан --- */
.anim.anim-in {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* --- Заголовок героя: слова піднімаються знизу по черзі ---
   Без overflow: hidden — він робить базовою лінією inline-block
   нижній край блока, і рядки заголовка розсуваються.          --- */
.word {
  display: inline-block;
}

.word-inner {
  display: inline-block;
  transform: translateY(0.38em);
  opacity: 0;
  transition:
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.6s ease-out;
  transition-delay: calc(var(--w, 0) * 70ms);
}

.words-in .word-inner {
  transform: translateY(0);
  opacity: 1;
}

/* --- Пре-ховання до старту JS, щоб не було блимання ---
   Діє тільки поки JS ще не позначив елемент класом .anim;
   далі керують правила .anim / .anim-in вище.            --- */
html.anim-ready .hero-eyebrow:not(.anim),
html.anim-ready .hero-subtitle:not(.anim),
html.anim-ready .hero-buttons:not(.anim),
html.anim-ready .eyebrow:not(.anim),
html.anim-ready .title-section:not(.anim),
html.anim-ready .subtitle:not(.anim) {
  opacity: 0;
}

/* --- Легке підняття картки під курсором --- */
.anim-hover {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s ease;
}

.anim-hover:hover {
  transform: translateY(-6px);
  /* !important — бо тінь карток задана inline у розмітці й інакше перекриває цю */
  box-shadow: var(--card-shadow-hover) !important;
}

/* --- Цифра під час перерахунку не має стрибати по ширині --- */
.stat-num,
.js-count {
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   Повага до системного налаштування «менше руху»:
   показуємо все одразу, без анімацій.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .anim,
  .anim.anim-in,
  .word-inner,
  html.anim-ready .hero-eyebrow:not(.anim),
  html.anim-ready .hero-subtitle:not(.anim),
  html.anim-ready .hero-buttons:not(.anim),
  html.anim-ready .eyebrow:not(.anim),
  html.anim-ready .title-section:not(.anim),
  html.anim-ready .subtitle:not(.anim) {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .anim-hover:hover { transform: none; }
}