/* Первый экран Хэллоуина (фрейм макета HPaQ4 / nckIJ).

   Высота на десктопе 850px - на 78px больше фрейма макета (772px).
   В макете кнопка "Занять место" вылезает за низ фрейма на 15px и
   срезается его краем - это дефект самого макета, а не вёрстки: в
   эталоне HPaQ4 кнопка обрезана ровно так же, а следующая секция
   начинается с чистой тёмной полосы. Решение заказчика 15.10.2026:
   экран нарастить так, чтобы под кнопкой остался зазор 63px - ровно
   такой художник оставил на первом экране Рождества. Внутренние
   координаты макета при этом не тронуты, добавлено только место снизу.
   Сверка первого экрана с эталоном теперь даёт "размеры не совпадают" -
   это записанное отличие, см. tools/qa/хэллоуин.sh.
   Содержимое
   разложено абсолютными координатами x/y из макета относительно секции.
   На телефоне у секции своя вертикальная раскладка (как в nckIJ) - там
   те же блоки идут обычным потоком сверху вниз, поэтому разметка в tpl
   написана в телефонном порядке (пометка → декор → текст → отсчёт),
   а десктопу позиции назначает этот файл через position:absolute.

   Цвета - токены палитры праздника из tokens.css ([data-holiday="halloween"]),
   альфа-варианты (как в макете, например #1C143680) собраны через
   color-mix от того же токена, а не захардкожены отдельным цветом. */

.hw-hero {
  position: relative;
  overflow: hidden;
  height: 850px;
}

/* ─── Фон: кадр/видео, подложка, свет от тыквы ──────────────── */

.hw-hero__bg {
  position: absolute;
  inset: 0;
}

.hw-hero__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Подложка - готовый токен: это ровно линейный градиент макета. */
.hw-hero__overlay {
  position: absolute;
  inset: 0;
  background: var(--overlay);
}

.hw-hero__glow {
  position: absolute;
  left: 620px;
  top: -180px;
  width: 1200px;
  height: 1200px;
  border-radius: 50%;
  /* closest-side обязателен: по умолчанию CSS растягивает радиальный
     градиент до дальнего УГЛА квадрата (848px вместо 600px), стопы уезжают
     на 41 % дальше, свет становится шире и ярче, а по краю круга появляется
     ступенька в 4 % оранжевого. В макете градиент кончается ровно на краю
     фигуры - это и есть closest-side. */
  background: radial-gradient(
    circle closest-side,
    color-mix(in srgb, var(--accent) 35%, transparent) 0%,
    color-mix(in srgb, var(--accent) 8%, transparent) 45%,
    color-mix(in srgb, var(--accent) 0%, transparent) 100%
  );
}

/* ─── Декор: тыква и привидение ──────────────────────────────── */

/* На десктопе у тыквы и привидения разные независимые координаты -
   обёртка не должна участвовать в раскладке, поэтому display:contents. */
.hw-hero__decor { display: contents; }

.hw-hero__ghost {
  position: absolute;
  left: 1236px;
  top: 330px;
  width: 160px;
  height: 160px;
  opacity: .9;
}

.hw-hero__pumpkin {
  position: absolute;
  left: 1010px;
  top: 540px;
  /* Рамка тыквы в макете на десктопе 190x190, но рисунок внутри лежит по
     тем же координатам, что и в телефонной рамке 160x160 - он не тянется,
     просто вокруг него больше пустоты. Поэтому файл один (экспорт рамки
     160), а размер тут 160: пиксели совпадают, второй картинки не нужно. */
  width: 160px;
  height: 160px;
}

/* ─── Текстовая колонка ──────────────────────────────────────── */

.hw-hero__content {
  position: absolute;
  left: 72px;
  top: 96px;
  z-index: 1;
  width: 700px;
  display: flex;
  flex-direction: column;
}

.hw-hero__h1 {
  margin: 46px 0 0;
  width: 100%;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 82px;
  line-height: .99;
  letter-spacing: -3px;
  color: var(--text);
}

.hw-hero__lead {
  margin: 28px 0 0;
  max-width: 600px;
  font-family: var(--font-body);
  font-size: 19px;
  /* 19 x 1,75 = 33,25; в макете строка нарисована целой - 33. */
  line-height: 33px;
  color: var(--text-2);
}

.hw-hero__facts {
  margin: 38px 0 0;
  display: flex;
  align-items: center;
}

.hw-hero__fact {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 26px;
}

.hw-hero__fact-v {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 20px;
  line-height: 27px;   /* 20 x 1.36 */
  letter-spacing: -.4px;
  color: var(--text);
}

.hw-hero__fact-s {
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 15px;   /* 12 x 1.21 */
  color: var(--text-3);
}

.hw-hero__sep {
  width: 1px;
  height: 34px;
  background: var(--line-h);
}

.hw-hero__action {
  margin: 38px 0 0;
  display: flex;
  align-items: center;
  gap: 18px;
}

.hw-hero__btn {
  display: inline-flex;
  padding: 19px 34px;
  background: var(--magenta);
  color: var(--text);
  border-radius: var(--r-btn);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  line-height: 18px;   /* 15 x 1.21 */
  text-decoration: none;
  white-space: nowrap;
}

.hw-hero__btn-note {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 16px;   /* 13 x 1.21 */
  color: var(--text-3);
}

/* ─── Карточка отсчёта ───────────────────────────────────────── */

.hw-hero__countdown {
  position: absolute;
  left: 900px;
  top: 108px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 26px;
  background: color-mix(in srgb, var(--card) 50%, transparent);
  /* Обводка внутренняя, как и у пометки: иначе карточка выше макета на 2px. */
  box-shadow: inset 0 0 0 1px var(--line-h);
  border-radius: var(--r-card);
}

.hw-hero__cd-label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  /* Высота строки в макете не задана, значит её даёт шрифт: Inter x1.21,
     Manrope x1.36 (та же конвенция, что в form.css и footer.css). */
  line-height: 13px;   /* 11 x 1.21 */
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-3);
}

.hw-hero__cd-nums {
  display: flex;
  align-items: center;
}

.hw-hero__cd-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 0 22px;
}

.hw-hero__cd-n {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 42px;
  line-height: 57px;   /* 42 x 1.36 */
  letter-spacing: -1.6px;
  color: var(--accent-text);
}

.hw-hero__cd-w {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  line-height: 13px;   /* 11 x 1.21 */
  letter-spacing: 2px;
  color: var(--text-3);
}

/* ─── Телефон: обычный поток сверху вниз, как в макете nckIJ ──── */

@media (max-width: 860px) {
  .hw-hero {
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 26px;
    padding: 44px 20px;
  }

  /* Отличие от макета, сделанное сознательно. В макете прямоугольник
     подложки на 39px короче самого экрана, и внизу остаётся светлая
     полоса голого кадра - это промах рисовальщика, а не замысел:
     подложка кончается резко, на 88 % непрозрачности. На живой странице
     высота экрана зависит от длины текстов заказчицы, поэтому "кончать
     на 1051px" нечего и выражать. Кроем экран целиком; в сверке эта
     полоса даёт 3,6 % расхождения и в отчёте названа отдельно. */
  .hw-hero__overlay {
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--bg) 98%, transparent) 0%,
      color-mix(in srgb, var(--bg) 95%, transparent) 50%,
      color-mix(in srgb, var(--bg) 88%, transparent) 100%
    );
  }

  /* На телефоне свет от тыквы в макете - последний слой, то есть поверх
     привидения и заголовка (на десктопе наоборот - под текстом).
     Отсюда тёплый налёт на привидении и верхней части экрана. */
  .hw-hero__glow {
    left: -160px;
    top: -180px;
    width: 620px;
    height: 620px;
    z-index: 2;
    pointer-events: none;
  }

  .hw-hero__decor {
    display: flex;
    align-items: center;
    gap: 2px;
    width: 100%;
    /* position:static у декора потерялся бы за фоном (у фона и так самый
       низкий слой, но внутри децентрализованной раскладки это надёжнее
       явного z-index), поэтому - как у остальных блоков над фоном. */
    position: relative;
    z-index: 1;
  }

  .hw-hero__ghost,
  .hw-hero__pumpkin {
    position: static;
    width: 160px;
    height: 160px;
    opacity: 1;
  }

  .hw-hero__content {
    position: static;
    width: 100%;
  }

  .hw-hero__h1 {
    margin-top: 4px;
    font-size: 33px;
    line-height: 1.06;
    letter-spacing: -1px;
  }

  .hw-hero__lead {
    margin-top: 4px;
    max-width: 100%;
    font-size: 18px;
    line-height: 32px;   /* 18 x 1,75 = 31,5, в макете строка целая - 32 */
  }

  .hw-hero__facts {
    margin-top: 4px;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  /* Те же метрики шрифта, что на десктопе, только кегль мельче:
     Manrope x1.36 и Inter x1.21. 25 + 4 + 13 = 42 - ровно высота
     строки фактов в макете. */
  .hw-hero__fact-v { font-size: 18px; line-height: 25px; letter-spacing: -.3px; }
  .hw-hero__fact-s { font-size: 11px; line-height: 13px; }

  .hw-hero__sep { display: none; }

  .hw-hero__action {
    margin-top: 4px;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .hw-hero__btn { font-size: 14px; line-height: 17px; }        /* 14 x 1.21 */
  .hw-hero__btn-note { font-size: 12px; line-height: 15px; }   /* 12 x 1.21 */

  .hw-hero__countdown {
    position: static;
    width: 100%;
  }

  .hw-hero__cd-n { letter-spacing: -.9px; }
}