/* Секция героя */
.hero-section { /* Определяет основную секцию героя */
  position: relative; /* Устанавливает относительное позиционирование для вложенных элементов */
  width: 100%; /* Задает ширину секции на 100% */
  height: 550px; /* Устанавливает высоту секции 550 пикселей */
  overflow: hidden; /* Скрывает содержимое, выходящее за пределы контейнера */
  margin-bottom: -100px; /* Добавляет отрицательный отступ снизу для перекрытия следующего элемента */
}

.hero-image { /* Контейнер для изображения героя */
  width: 100%; /* Задает ширину контейнера на 100% */
  height: 100%; /* Устанавливает высоту контейнера равной высоте родителя */
  position: relative; /* Устанавливает относительное позиционирование для вложенных элементов */
}

.hero-image img { /* Стили для изображения внутри контейнера */
  width: 100%; /* Задает ширину изображения на 100% */
  min-height: 550px; /* Устанавливает минимальную высоту изображения 550 пикселей */
  object-fit: cover; /* Растягивает изображение, сохраняя пропорции с обрезкой */
  object-position: center bottom; /* Выравнивает изображение по центру и нижнему краю */
  position: absolute; /* Устанавливает абсолютное позиционирование относительно контейнера */
  top: 0; /* Привязывает верх изображения к верхнему краю контейнера */
  left: 0; /* Привязывает левый край изображения к левому краю контейнера */
}

/* Градиентное наложение с пользовательским цветом фона */
.hero-image::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30%;
  background: linear-gradient(
    to top,
    var(--background) 0%,
    transparent 100%
  );
  pointer-events: none;
}

.hero-text { /* Контейнер для текста героя */
  position: absolute; /* Устанавливает абсолютное позиционирование текста */
  top: 50%; /* Помещает верх текста на 50% высоты контейнера */
  left: 50%; /* Помещает левый край текста на 50% ширины контейнера */
  transform: translate(-50%, -50%); /* Центрирует текст по горизонтали и вертикали */
  text-align: center; /* Выравнивает текст по центру */
  color: var(--foreground); /* Задает цвет текста из переменной --foreground */
  z-index: 1; /* Устанавливает порядок наложения текста поверх градиента */
}

.hero-text h1 { /* Стили для заголовка внутри текста героя */
  font-size: clamp(1.0rem, 4vw, 2rem); /* Устанавливает адаптивный размер шрифта от 1rem до 2rem */
  font-weight: 700; /* Задает жирность шрифта 700 (bold) */
  margin-bottom: 20px; /* Устанавливает отступ снизу 20 пикселей */
  color: var(--slogan); /* Задает цвет заголовка из переменной --slogan */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Добавляет тень тексту для читаемости */
}

.hero-tag { /* Стили для тега героя */
  font-size: clamp(0.9rem, 2.5vw, 1.2rem); /* Устанавливает адаптивный размер шрифта от 0.9rem до 1.2rem */
  font-weight: 600; /* Задает жирность шрифта 600 (semi-bold) */
  color: var(--primary); /* Задает цвет тега из переменной --primary */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Добавляет тень тексту для читаемости */
}

/* Адаптивность для секции героя */
@media (max-width: 768px) { /* Медиазапрос для экранов шириной до 768 пикселей */
  .hero-section { /* Секция героя */
    height: 400px; /* Уменьшает высоту секции до 400 пикселей */
  }
  .hero-image img { /* Изображение героя */
    min-height: 400px; /* Устанавливает минимальную высоту изображения 400 пикселей */
  }
  .hero-text h1 { /* Заголовок текста героя */
    font-size: clamp(1.2rem, 3.5vw, 1.8rem); /* Устанавливает адаптивный размер шрифта от 1.2rem до 1.8rem */
  }
  .hero-tag { /* Тег героя */
    font-size: clamp(0.8rem, 2vw, 1rem); /* Устанавливает адаптивный размер шрифта от 0.8rem до 1rem */
    padding: 8px 16px; /* Добавляет внутренние отступы 8px сверху/снизу и 16px слева/справа */
  }
  .hero-image::after { /* Градиентное наложение */
    height: 60%; /* Увеличивает высоту градиента до 60% */
  }
}

@media (max-width: 480px) { /* Медиазапрос для экранов шириной до 480 пикселей */
  .hero-section { /* Секция героя */
    height: 300px; /* Уменьшает высоту секции до 300 пикселей */
  }
  .hero-image img { /* Изображение героя */
    min-height: 300px; /* Устанавливает минимальную высоту изображения 300 пикселей */
  }
  .hero-text h1 { /* Заголовок текста героя */
    font-size: clamp(1rem, 3vw, 0.1rem); /* Устанавливает адаптивный размер шрифта от 1rem до 0.1rem */
  }
  .hero-tag { /* Тег героя */
    font-size: clamp(0.7rem, 1.8vw, 0.5rem); /* Устанавливает адаптивный размер шрифта от 0.7rem до 0.5rem */
    padding: 6px 12px; /* Добавляет внутренние отступы 6px сверху/снизу и 12px слева/справа */
  }
  .hero-image::after { /* Градиентное наложение */
    height: 70%; /* Увеличивает высоту градиента до 70% */
  }
}

/* Анимация появления контента */
.content { /* Основной контейнер контента */
  opacity: 0; /* Устанавливает начальную непрозрачность 0 (невидим) */
  transition: opacity 0.5s ease; /* Задает плавный переход непрозрачности за 0.5 секунды */
}

.content.fade-in { /* Класс для активной анимации появления */
  opacity: 1; /* Устанавливает непрозрачность 1 (полностью видим) */
}