/* Контейнер для круга */
.pulse-container {
  position: relative; /* Для привязки элементов внутри */
  display: inline-block; /* Для удобного размещения */
}

/* Основной шейп */
.pulse-circle {
  position: relative; /* Для привязки псевдоэлементов */
  z-index: 2; /* Чтобы оставаться над анимацией */
}

/* Пульсирующие круги */
.pulse-circle::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  background-color: #F09D25; /* Цвет пульсирующих кругов */
  border-radius: 50%;
  opacity: 0.5;
  transform: translate(-50%, -50%) scale(1);
  z-index: 1; /* Под шейпом */
  animation: pulse 4s infinite;
}

/* Анимация пульсации */
@keyframes pulse {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.4;
  }
  50% {
    opacity: 0.2;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 0;
  }
}

/* Основной контейнер для текста */
.text-to-animate {
  opacity: 0; /* Текст скрыт изначально */
  transform: translateY(50px); /* Текст начнёт сдвигаться снизу */
  overflow: hidden; /* Скрываем все, что выходит за пределы блока */
  transition: opacity 0.5s ease-out, transform 0.5s ease-out; /* Плавный переход для появления/исчезновения */
}

/* Когда блок выходит за пределы видимости */
.text-hidden {
  opacity: 0; /* Скрытое состояние */
  transform: translateY(50px); /* Текст сдвигается вниз, скрывая его */
  transition: opacity 0.5s ease-out, transform 0.5s ease-out; /* Плавный переход при скрытии */
}

/* Класс анимации для контейнера текста */
.text-animate {
  animation: slideIn 1s ease-out forwards; /* Анимация для появления блока */
}

/* Анимация появления блока */
@keyframes slideIn {
  0% {
    transform: translateY(50px); /* Текст сдвигается вниз */
    opacity: 0; /* Скрыт */
  }
  100% {
    transform: translateY(0); /* Текст возвращается в нормальное положение */
    opacity: 1; /* Текст становится видимым */
  }
}

/* Анимация для слов внутри строки */
.text-line {
  display: flex;
  flex-wrap: wrap; /* Для переносов слов */
  opacity: 0; /* Скрытые изначально */
  transform: translateY(30px); /* Текст изначально смещён вниз */
  animation: lineIn 0.8s ease-out forwards; /* Анимация для строки */
}

/* Появление строк */
@keyframes lineIn {
  0% {
    opacity: 0;
    transform: translateY(30px); /* Начальная позиция строки */
  }
  100% {
    opacity: 1;
    transform: translateY(0); /* Конечная позиция строки */
  }
}

/* Анимация для каждого слова */
.text-word {
  opacity: 0;
  display: inline-block;
  transform: translateY(20px); /* Смещение вниз для каждого слова */
  animation: wordIn 0.5s ease-out forwards; /* Анимация для каждого слова */
}

/* Появление каждого слова */
@keyframes wordIn {
  0% {
    opacity: 0;
    transform: translateY(20px); /* Скрытое состояние */
  }
  100% {
    opacity: 1;
    transform: translateY(0); /* Позиция при появлении */
  }
}

/* Новая анимация для текста с классом text-to-animate2 */
.text-to-animate2 {
  opacity: 1; /* Текст виден */
  display: inline-block;
  overflow: hidden;
}

/* Для каждого слова в блоке text-to-animate2 */
.text-to-animate2 .word {
  display: inline-block;
  opacity: 0; /* Скрытые слова изначально */
  transform: translateY(20px); /* Смещение вниз */
  transition: opacity 0.5s ease-out, transform 0.5s ease-out; /* Плавный переход */
}

/* Когда слово становится видимым */
.text-to-animate2 .word.visible {
  opacity: 1; /* Делает слово видимым */
  transform: translateY(0); /* Возвращает слово на место */
}

/* Когда слово скрывается */
.text-to-animate2 .word.hidden {
  opacity: 0; /* Делает слово невидимым */
  transform: translateY(-20px); /* Сдвигает слово вверх */
}