.s1__row--top,
.s1__row--bottom,
.s1__hero-line--light,
.s1__hero-line--green > span,
.s1__hero-icon,
.s1__footer,
.s1__header {
  opacity: 0;
  will-change: transform, opacity;
}

.s1__hero-line--green > span {
  display: inline-block;
}

@keyframes slideFromRight {
  0% { opacity: 0; transform: translateX(60px); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes slideFromLeft {
  0% { opacity: 0; transform: translateX(-60px); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes fadeScaleIn {
  0% { opacity: 0; transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes simpleFadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.s1__row--top {
  animation: slideFromRight 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.s1__row--bottom {
  animation: slideFromLeft 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.s1__hero-line--light {
  animation: fadeScaleIn 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s forwards;
}

.s1__hero-line--green > span {
  animation: fadeScaleIn 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.5s forwards;
}

.s1__hero-icon {
  animation: simpleFadeIn 0.5s ease-out 0.7s forwards;
  transition: color 0.3s ease, transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); 
}

.s1__footer,
.s1__header {
  animation: simpleFadeIn 0.6s ease-out 0.9s forwards;
}

.s1__hero-icon:hover {
  transform: rotate(360deg);
}


/* Початковий (прихований) стан для всіх ваших заголовків */
.s3__header,
.s5__timeline-header,
.s6__header,
.s9__header-left,
.s10__text-default {
  opacity: 0;
  transform: translateY(30px); /* Зсув вниз, щоб потім виїхати вгору */
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  will-change: opacity, transform; /* Оптимізація для браузера */
}

/* Стан після появи на екрані (цей клас додасть JavaScript) */
.s3__header.is-visible,
.s5__timeline-header.is-visible,
.s6__header.is-visible,
.s9__header-left.is-visible,
.s10__text-default.is-visible {
  opacity: 1;
  transform: translateY(0);
}










/* Початковий стан для карток та картинок */
.fade-element {
  opacity: 0;
  transform: translateY(40px);
  /* Плавний перехід для прозорості та позиції */
  transition: opacity 0.7s cubic-bezier(0.25, 1, 0.5, 1), 
              transform 0.7s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: opacity, transform;
}

/* Стан, коли елемент потрапляє у видиму зону екрана */
.fade-element.is-visible {
  opacity: 1;
  transform: translateY(0);
}






/* Базовое состояние для всех анимируемых элементов секции */
.s4-anim {
  opacity: 0;
  will-change: opacity, transform;
  /* Плавный переход длительностью 0.8 сек */
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), 
              transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Мягкое смещение для текста и заголовков */
.s4__title.s4-anim,
.s4__subtitle.s4-anim,
.s4__text.s4-anim,
.s4__stats.s4-anim,
.s4__footer-text.s4-anim {
  transform: translateY(30px);
}

/* Скриншот выезжает снизу с большего расстояния, чтобы подчеркнуть эффект */
.s4__visual.s4-anim {
  transform: translateY(100px);
}

/* Состояние, когда секция появляется на экране */
.s4-anim.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- ПОСЛЕДОВАТЕЛЬНОСТЬ (ЗАДЕРЖКИ) --- */

/* 1. Слово Zubalenok появляется первым (без задержки) */
.s4__title.s4-anim.is-visible { 
  transition-delay: 0s; 
}

/* 2. Сразу после него — подзаголовок */
.s4__subtitle.s4-anim.is-visible { 
  transition-delay: 0.3s; 
}

/* 3. Текст и скриншот появляются одновременно после подзаголовка */
.s4__text.s4-anim.is-visible,
.s4__visual.s4-anim.is-visible { 
  transition-delay: 0.6s; 
}

/* (Дополнительно) Статистика и футер появляются в самом конце */
.s4__stats.s4-anim.is-visible { 
  transition-delay: 1s; 
}
.s4__footer-text.s4-anim.is-visible { 
  transition-delay: 1.2s; 
}




/* 1. Налаштовуємо плавність для картки */
.s9__card {
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}

/* 2. Ефект при наведенні (ПК) АБО при додаванні класу (Мобайл) */
.s9__card:hover,
.s9__card.is-active {
  transform: scale(1.03);
}

/* 3. Налаштовуємо плавність для іконки */
.s9__icon {
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

/* 4. Обертання іконки */
.s9__card:hover .s9__icon,
.s9__card.is-active .s9__icon {
  transform: rotate(360deg);
}

/* Базовий стан для анімації (прихований, зсунутий вправо) */
.s7__item-anim {
  opacity: 0;
  transform: translateX(60px); /* Зсув вправо на 60 пікселів */
  transition: opacity 0.7s cubic-bezier(0.25, 1, 0.5, 1), 
              transform 0.7s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: opacity, transform;
}

/* Стан, коли елемент з'являється на екрані (видимий, на своєму місці) */
.s7__item-anim.is-visible {
  opacity: 1;
  transform: translateX(0);
}




/* Базовий стан для анімації елементів у секції 8 */
.s8-anim {
  opacity: 0;
  transform: translateY(30px); /* Елементи злегка опущені вниз */
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), 
              transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: opacity, transform;
}

/* Стан, коли секція потрапляє на екран */
.s8-anim.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- ПОСЛІДОВНІСТЬ (Затримки) --- */

/* 1. Тег з'являється першим (без затримки) */
.s8__tag.s8-anim.is-visible { 
  transition-delay: 0s; 
}

/* 2. Заголовок одразу за ним */
.s8__title.s8-anim.is-visible { 
  transition-delay: 0.2s; 
}

/* 3. Текст під заголовком */
.s8__desc.s8-anim.is-visible { 
  transition-delay: 0.4s; 
}

/* 4. Кнопка з'являється найостаннішою */
.s8__btn.s8-anim.is-visible { 
  transition-delay: 0.7s; 
}