/* ════════════════════════════════════════════════════════════════════
   01 — Первый экран. Лицо сайта: крупный заголовок, обещание, пара
   действий и «телевизор» с живым эфиром.

   Масштаб телевизора. В макете он 600×360 с пиксельной геометрией
   внутри. Здесь он адаптивный (aspect-ratio: 5/3), а вся внутренняя
   мелочь считается от одной переменной --u: это «пиксель макета»,
   сжимающийся вместе с рамкой. Сцена остаётся точной копией макета
   на любой ширине, а не расползается. --u берётся из container query
   по ширине обёртки; нижняя граница clamp не даёт подписям стать
   нечитаемыми на телефоне.
   ════════════════════════════════════════════════════════════════════ */

/* ── Декоративные слои секции ──────────────────────────────────────── */

.s-hero { isolation: isolate; }

/* Точечная сетка живёт только в верхней зоне экрана, как в макете. */
.s-hero .s-hero__dots {
  inset: 0 0 auto;
  height: clamp(420px, 58vw, 760px);
  z-index: 0;
}

/* Ореолы дышат в противофазе — фон не «мигает» в такт. */
.s-hero .s-hero__halo--a {
  left: clamp(-200px, -13vw, -64px);
  top: clamp(-260px, -18vw, -88px);
  width: clamp(360px, 62vw, 900px);
  height: clamp(300px, 49vw, 700px);
}
.s-hero .s-hero__halo--b {
  right: clamp(-260px, -18vw, -72px);
  top: clamp(-120px, -8vw, -40px);
  width: clamp(380px, 68vw, 980px);
  height: clamp(320px, 53vw, 760px);
  animation-delay: calc(3.5s * var(--motion));
}

/* ── Шапка первого экрана ──────────────────────────────────────────── */

.s-hero .s-hero__eyebrow { color: var(--c-muted); }
.s-hero .s-hero__eyebrow .eyebrow__dash { background: var(--c-accent-2); }

.s-hero__title {
  margin-top: var(--sp-6);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-hero);
  color: var(--c-text);
}

/* Точка в конце — единственный акцент в заголовке, она же пульсирует. */
.s-hero__dot { color: var(--c-accent); }

.s-hero__sub {
  margin-top: var(--sp-5);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-sub);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--c-muted);
  text-wrap: balance;
}

/* ── Пара «текст + телевизор» ──────────────────────────────────────── */

.s-hero__main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--grid-gap-lg);
  align-items: center;
  margin-top: var(--sp-8);
}

/* Две колонки включаются только когда обеим хватает места: ниже 1080px
   телевизор в правой колонке становится уже 450px, и подписи внутри
   эфира начинают резаться. Доли 1 : 1.07 повторяют пропорцию макета
   560 : 600 и никогда не переполняют контейнер — в отличие от
   фиксированных 600px во второй колонке. */
@media (min-width: 1080px) {
  .s-hero__main { grid-template-columns: minmax(0, 1fr) minmax(0, 1.07fr); }
}

.s-hero__pitch {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}

.s-hero__lead {
  max-width: 52ch;
  font-size: var(--fs-lead);
  line-height: var(--lh-relaxed);
  color: var(--c-muted);
}

.s-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
}

/* ── Телевизор: корпус ─────────────────────────────────────────────── */

.s-hero__tv {
  width: 100%;
  max-width: 600px;
  margin-inline: auto;
  perspective: 1200px;  /* глубина для наклона за курсором (data-tilt) */
}
@media (min-width: 1080px) {
  .s-hero__tv { margin-inline: auto 0; }
}

/* «Пиксель макета». 600px корпуса → --u = 1px, дальше пропорционально. */
.s-hero__screen { --u: 1px; }

@supports (container-type: inline-size) {
  .s-hero__tv { container-type: inline-size; }
  .s-hero__screen { --u: clamp(0.72px, 1cqw / 6, 1px); }
}

.s-hero .s-hero__screen {
  display: grid;             /* кадр растягивается на всю высоту корпуса */
  aspect-ratio: 5 / 3;
  padding: calc(10 * var(--u));
  /* Наклон за курсором. js/modules/tilt.js подаёт ТОЛЬКО углы в
     --tilt-*, всю отрисовку делает CSS. Фолбэки в var() — не
     подстраховка, а рабочий режим: на тач-устройствах и при
     prefers-reduced-motion модуль не запускается, переменных нет,
     и корпус остаётся ровно в нуле. */
  transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform var(--t-base) var(--ease-soft);
  animation: ms-hero-glow calc(6s * var(--motion)) ease-in-out infinite;
}

/* Тонкий импульс, пробегающий по верхней кромке корпуса: «сигнал идёт». */
.s-hero__signal {
  position: absolute;
  left: 18%;
  right: 18%;
  top: calc(3 * var(--u));
  height: 1px;
  overflow: hidden;
  pointer-events: none;
}
.s-hero__signal-beam {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
    transparent 36%,
    var(--c-accent) 50%,
    transparent 64%);
}

/* ── Телевизор: кадр ───────────────────────────────────────────────── */

.s-hero__frame {
  background:
    radial-gradient(ellipse 45% 55% at 82% 70%,
      color-mix(in srgb, var(--c-warn) 24%, transparent), transparent 70%),
    radial-gradient(ellipse 50% 40% at 15% 15%,
      color-mix(in srgb, var(--c-accent) 7%, transparent), transparent 70%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--c-bg-deep) 35%, var(--c-bg)) 0%,
      var(--c-bg) 58%,
      var(--c-surface-2) 58.5%,
      color-mix(in srgb, var(--c-bg) 80%, var(--c-surface)) 100%);
}

/* Слои-текстуры: развёртка, виньетка. */
.s-hero__fx { position: absolute; inset: 0; }

/* Двор: асфальт в полоску под линией горизонта. */
.s-hero__ground {
  position: absolute;
  inset: auto 0 0;
  height: 42%;
  border-top: 1px solid var(--c-line);
  background-image: repeating-linear-gradient(90deg,
    var(--c-line-soft) 0 calc(3 * var(--u)),
    transparent calc(3 * var(--u)) calc(22 * var(--u)));
  pointer-events: none;
}

/* Луч сканирования. Высота и путь в процентах — иначе на узком кадре
   луч большую часть цикла стоял бы за рамкой и анимация «умирала». */
.s-hero__sweep {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 26%;
  background: linear-gradient(180deg,
    transparent,
    color-mix(in srgb, var(--c-text) 7%, transparent),
    transparent);
  pointer-events: none;
  animation: ms-hero-sweep calc(7s * var(--motion)) linear infinite;
}

@keyframes ms-hero-sweep {
  from { transform: translateY(-100%); }
  to   { transform: translateY(385%); }
}

/* ── Рамки распознавания ───────────────────────────────────────────── */

.s-hero__box {
  position: absolute;
  border-radius: var(--r-xs);
}

/* Человек идёт по двору: путь тоже в процентах от своей ширины. */
.s-hero__box--person {
  left: 61%;
  top: 34%;
  width: 14.5%;
  height: 46%;
  border: max(1px, calc(1.5 * var(--u))) solid var(--c-accent-2);
  animation: ms-hero-walk calc(16s * var(--motion)) ease-in-out infinite;
}

@keyframes ms-hero-walk {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(-155%); }
}

.s-hero__box--parcel {
  left: 41%;
  top: 66%;
  width: 10.7%;
  height: 13.6%;
  border: max(1px, calc(1.5 * var(--u))) solid
          color-mix(in srgb, var(--c-text) 75%, transparent);
}

/* Подпись рамки сидит на её верхней грани. */
.s-hero__frame .s-hero__boxtag {
  position: absolute;
  left: calc(-1.5 * var(--u));
  top: calc(-22 * var(--u));
  padding: calc(3 * var(--u)) calc(6 * var(--u));
  border-radius: var(--r-xs) var(--r-xs) 0 0;
  font-size: max(8px, calc(10 * var(--u)));
}

/* ── Плашки поверх эфира ───────────────────────────────────────────── */

.s-hero__frame .s-hero__osd {
  gap: calc(8 * var(--u));
  padding: calc(6 * var(--u)) calc(10 * var(--u));
  font-size: max(9px, calc(12 * var(--u)));
  white-space: nowrap;
  /* Второй слой наклона: плашки лежат «над стеклом» и при повороте
     корпуса уезжают чуть дальше самого кадра — сцена читается
     объёмной, а не наклеенной картинкой. Сдвиг приходит из того же
     tilt.js; нет модуля — нет и сдвига. */
  transform: translate3d(var(--tilt-shift-x, 0px), var(--tilt-shift-y, 0px), 0);
  transition: transform var(--t-base) var(--ease-soft);
}
.s-hero__frame .s-hero__osd .dot { width: calc(8 * var(--u)); height: calc(8 * var(--u)); }

.s-hero__frame .s-hero__osd--live {
  left: calc(16 * var(--u));
  top: calc(16 * var(--u));
}
.s-hero__frame .s-hero__osd--clock {
  right: calc(16 * var(--u));
  top: calc(16 * var(--u));
  letter-spacing: var(--ls-mono);
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
}
.s-hero__frame .s-hero__osd--e2e {
  left: calc(16 * var(--u));
  bottom: calc(16 * var(--u));
  font-size: max(8.5px, calc(11 * var(--u)));
  color: var(--c-accent);
}
.s-hero__osd--e2e svg {
  width: calc(14 * var(--u));
  height: calc(14 * var(--u));
}

/* ── Всплывающее окно звонка ───────────────────────────────────────── */

.s-hero__pip {
  position: absolute;
  right: calc(14 * var(--u));
  bottom: calc(14 * var(--u));
  width: 38.8%;
  height: 33%;
  overflow: hidden;
  border-radius: var(--r-md);
  border: 1px solid var(--c-line-bright);
  background:
    radial-gradient(ellipse 70% 60% at 50% 100%,
      color-mix(in srgb, var(--c-warn) 18%, transparent), transparent 70%),
    linear-gradient(180deg, var(--c-surface-2), var(--c-bg-deep));
  box-shadow: var(--shadow-pop);
}

/* Окно то уезжает вниз, то возвращается. Если внутрь пришёл фокус
   с клавиатуры — останавливаем цикл в видимом состоянии, иначе
   пользователь «нажимал бы» невидимую кнопку. */
.s-hero__pip:focus-within {
  animation: none;
  transform: none;
  opacity: 1;
}

.s-hero__pip-title {
  position: absolute;
  left: calc(10 * var(--u));
  top: calc(8 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(6 * var(--u));
  font-family: var(--font-mono);
  font-size: max(8px, calc(10 * var(--u)));
  letter-spacing: var(--ls-mono);
  color: var(--c-text);
}
.s-hero__pip-title .dot { width: calc(6 * var(--u)); height: calc(6 * var(--u)); }

.s-hero__pip-bar {
  position: absolute;
  left: calc(10 * var(--u));
  right: calc(10 * var(--u));
  bottom: calc(10 * var(--u));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(6 * var(--u));
}

.s-hero__pip-who {
  display: flex;
  align-items: center;
  gap: calc(5 * var(--u));
  min-width: 0;                 /* подпись сжимается первой, кнопка — никогда */
  font-size: max(9.5px, calc(12 * var(--u)));
  font-weight: 500;
  line-height: var(--lh-tight);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--c-text);
}
.s-hero__pip-who svg {
  flex-shrink: 0;
  width: calc(12 * var(--u));
  height: calc(12 * var(--u));
}

.s-hero__pip .s-hero__pip-btn {
  flex-shrink: 0;
  height: max(18px, calc(26 * var(--u)));
  padding-inline: calc(10 * var(--u));
  border-radius: var(--r-sm);
  font-size: max(9px, calc(11 * var(--u)));
  font-weight: 600;
}

/* На телефоне окно звонка не влезает рядом с плашкой E2E — поднимаем
   его над ней и даём чуть больше ширины, чтобы подпись и кнопка
   остались читаемыми. */
@media (max-width: 599px) {
  .s-hero__pip {
    right: calc(10 * var(--u));
    bottom: 27%;
    width: 62%;
    height: 40%;
  }
}

/* Подсветка корпуса: тёплое свечение эфира, дышащее в такт ореолам. */
@keyframes ms-hero-glow {
  0%, 100% {
    box-shadow: var(--shadow-panel),
                0 0 0 1px color-mix(in srgb, var(--c-accent) 10%, transparent);
  }
  50% {
    box-shadow: var(--shadow-panel),
                0 0 0 1px color-mix(in srgb, var(--c-accent) 22%, transparent),
                0 0 48px -12px color-mix(in srgb, var(--c-accent) 32%, transparent);
  }
}

/* ── Живой счётчик ─────────────────────────────────────────────────── */

.s-hero__counter { margin-top: var(--sp-10); }

.s-hero .s-hero__live {
  margin-bottom: var(--sp-4);
  font-size: var(--fs-mono-sm);
}
.s-hero .s-hero__live .eyebrow__dot { background: var(--c-accent); }

.s-hero__stats {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-top: 1px solid var(--c-line);
}

.s-hero__stat {
  padding-block: var(--sp-6) var(--sp-7);
  border-top: 1px solid var(--c-line);
}
.s-hero__stat:first-child { border-top: 0; }

/* Три колонки с разделителями включаем только там, где «86 000»
   гарантированно помещается в колонку вместе с полями. Ниже — простой
   список: цифра в 40px и колонка в 200px не уживаются. */
@media (min-width: 820px) {
  .s-hero__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .s-hero__stat {
    padding-inline: clamp(var(--sp-4), 2.2vw, var(--sp-7));
    border-top: 0;
    border-left: 1px solid var(--c-line);
  }
  .s-hero__stat:first-child { padding-left: 0; border-left: 0; }
  .s-hero__stat:last-child  { padding-right: 0; }
}

/* Ноль — единственная цифра, которой мы гордимся. */
.s-hero .s-hero__zero { color: var(--c-accent); }