/* ============================================================
   HERO — первый экран сайта
   Содержит: видео-фон, оверлей затемнения, зерно, заголовок,
   подзаголовок, две кнопки, индикатор скролла
   ============================================================ */

/* ---------- Контейнер секции ---------- */
.hero {
  position: relative;            /* якорь для absolute-детей (video, overlay) */
  min-height: 100vh;             /* на всю высоту экрана */
  display: flex;                 /* чтобы центрировать контент по вертикали */
  align-items: center;           /* центрирование по вертикали */
  overflow: hidden;              /* обрезает видео, если оно вылезает */
  isolation: isolate;            /* создаёт новый stacking context —
                                    все z-index детей считаются внутри Hero,
                                    не конфликтуют с остальной страницей */
}

/* ---------- Видео-фон ---------- */
/* Лежит на самом дне. z-index: -2 — ниже всего в Hero.
   Через filter приглушаем: brightness 0.65 — видео на 35% темнее,
   contrast 1.08 — чуть контрастнее, saturate 1.05 — чуть насыщеннее.
   Если хотите видео ЯРЧЕ — увеличивайте brightness до 0.85–1.0
   Если ТЕМНЕЕ — уменьшайте до 0.4–0.5 */
.hero__video {
  position: absolute;            /* растягиваем на всю секцию */
  inset: 0;                      /* top/right/bottom/left: 0 одним свойством */
  width: 100%;
  height: 100%;
  object-fit: cover;             /* видео заполняет блок без искажений,
                                    лишнее обрезается по краям */
  z-index: -2;                   /* под всем остальным в Hero */
  filter: brightness(0.65) contrast(1.08) saturate(1.05);
}

/* ---------- Оверлей (затемнение поверх видео) ---------- */
/* Это градиент от чуть-тёмного сверху к более тёмному снизу.
   Числа в rgba — это непрозрачность: 0.25 = 25% затемнения,
   0.55 = 55% затемнения. Чем выше число — тем темнее.
   Если хотите видео ЧЁТЧЕ — уменьшайте все три числа.
   Если ТЕМНЕЕ — увеличивайте. */
.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(14, 14, 16, 0.25) 0%,     /* верх — 25% затемнения */
    rgba(14, 14, 16, 0.35) 60%,    /* середина — 35% */
    rgba(14, 14, 16, 0.55) 100%);  /* низ — 55% */
  z-index: -1;                     /* над видео, под контентом */
}

/* ---------- Зерно (декоративная текстура) ---------- */
/* Тонкие золотые точки размером 1px, повторяются каждые 3px.
   Создаёт «плёнчатый» премиум-эффект, снижает цифровую резкость видео.
   Если мешает — удалите весь блок .hero__grain */
.hero__grain {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(201,162,39,0.08) 1px, transparent 1px);
  background-size: 3px 3px;
  opacity: 0.5;
  pointer-events: none;         /* зерно не перехватывает клики */
  z-index: -1;
}

/* ---------- Контентный блок ---------- */
/* Ограничивает ширину текста, добавляет отступы сверху/снизу.
   padding-top: 8rem — чтобы контент не залезал под фиксированную шапку. */
.hero__content {
  padding-top: 8rem;
  padding-bottom: 4rem;
  max-width: 900px;             /* текст не растягивается на широких экранах */
}

/* ---------- Надзаголовок (eyebrow) ---------- */
/* Маленькая строка над H1 — «Веб-студия полного цикла · Казахстан».
   Золотистая, капсом, с большим межбуквенным интервалом. */
.hero__eyebrow {
  font-size: 0.75rem;           /* 12px — мелкий, но читаемый */
  text-transform: uppercase;
  letter-spacing: 0.20em;       /* разрежённые буквы = премиум-ощущение */
  color: var(--gold-300);       /* светлое золото — читается на тёмном видео */
  margin-bottom: var(--space-md);
  font-weight: 500;
}

/* ---------- Главный заголовок H1 ---------- */
/* Цвет — тёплый белый, чтобы читался поверх видео.
   max-width: 16ch — ограничивает по «символам» (ch = ширина нуля),
   чтобы строки не были слишком длинными */
.hero__title {
  margin-bottom: var(--space-lg);
  max-width: 16ch;
  color: #F5F3EF;
}

/* ---------- Подзаголовок ---------- */
/* Fluid-размер: от 16px до 20px в зависимости от ширины экрана.
   Цвет — полупрозрачный белый (82% непрозрачности), чтобы не спорил с H1. */
.hero__subtitle {
  font-size: clamp(1rem, 0.6vw + 0.95rem, 1.25rem);
  color: rgba(245, 243, 239, 0.82);
  margin-bottom: var(--space-xl);
  max-width: 55ch;              /* ~55 символов в строке — комфортно читается */
}

/* ---------- Вторичная кнопка (ghost) в Hero ---------- */
/* По умолчанию .btn--ghost — тёмный текст с золотой рамкой.
   В Hero переопределяем: светлый текст, полупрозрачная рамка.
   Нужно потому что фон тёмный — тёмная кнопка не видна. */
.hero .btn--ghost {
  color: #F5F3EF;
  border-color: rgba(245, 243, 239, 0.35);
}

.hero .btn--ghost:hover {
  background: rgba(245, 243, 239, 0.08);
}

/* ---------- Блок с кнопками ---------- */
.hero__actions {
  display: flex;
  flex-wrap: wrap;              /* кнопки переносятся на новую строку на мобильных */
  gap: var(--space-sm);
}

/* ---------- Индикатор скролла (тонкая линия внизу) ---------- */
/* Абсолютно спозиционирован снизу по центру.
   Внутри — анимированная линия, которая «бежит» сверху вниз,
   подсказывая пользователю, что можно скроллить. */
.hero__scroll {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%); /* центрирование по горизонтали */
  width: 1px;
  height: 60px;
  overflow: hidden;             /* обрезает линию за пределами контейнера */
}

.hero__scroll-line {
  display: block;
  width: 1px;
  height: 100%;
  background: var(--gold-300);
  animation: scrollLine 2.2s var(--ease-in-out) infinite;
}

/* Ключевые кадры анимации: линия плавно проходит сверху вниз */
@keyframes scrollLine {
  0%   { transform: translateY(-100%); } /* линия выше контейнера */
  50%  { transform: translateY(0); }     /* линия в контейнере */
  100% { transform: translateY(100%); }  /* линия ниже контейнера */
}

/* ---------- Читаемость текста поверх видео ---------- */
/* Двойная тень: большая размытая (свечение вокруг) + маленькая чёткая
   (контраст под буквой). Помогает тексту читаться на любом фоне. */
.hero__title,
.hero__subtitle,
.hero__eyebrow {
  text-shadow:
    0 2px 20px rgba(14, 14, 16, 0.55),
    0 1px 3px rgba(14, 14, 16, 0);
}