/* Первый экран главной. Владелец: роль «Главная» (раньше — Hero); шейдер js/fx/liquid.js — Hero. Только токены из tokens.css.
   Слои (z внутри .hero): 0 шейдер · 1 затемнение · 2 горизонт · 5 текст. Линий-направляющих и подсказки «Листайте» нет (r1).
   Отступы — шкала 4/8 (--s-*), у clamp() обе границы из шкалы; скругления — pill и круг; наведение — фон и рамка, без янтаря и свечения.
   3D-цепи в hero нет (Орсен 07.10, DESIGN.md «3D-язык — ОБНОВЛЕНО»): низ кадра держат дуга горизонта и шейдер. */

/* вершина дуги горизонта от низа экрана — на :root: по ней же home.css ставит низ полосы доверия (сфера «( )» — поровну сверху и снизу) */
:root { --hz-apex: clamp(150px, 22vh, 220px); }
@media (max-width: 760px) { :root { --hz-apex: clamp(150px, 21svh, 190px); } }
/* телефон боком (окно ≤ 500 по высоте; моб. проработка 10.10): 150 под дугой — 40 % экрана тёмного тела «планеты»,
   под hero и над подвалом пустота в экран. Вершина дуги — 96 от низа кадра; радиус и приём дуги те же */
@media (max-height: 500px) { :root { --hz-apex: var(--s-9); } }

.hero {
  /* геометрия кадра — все размеры отсюда (--hz-apex — выше, на :root) */
  --hz-r: max(1300px, 125vw);                    /* радиус «планеты» */
  --hz-pad: 280px;                               /* запас над дугой под свечение */
  --hz-under: 70vh;                              /* тело «планеты» ниже края hero — для скролл-сцены */
  --frame-top: calc(var(--header-h) + var(--s-6));

  position: relative;
  isolation: isolate;
  overflow: clip;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 1fr;
  min-height: 100vh;
  min-height: 100svh;
  min-height: max(100svh, 640px);
  background: var(--bg);
  color: var(--ink);
}

/* ---------- 0. шейдер «жидкие капли» */
.hero__liquid {
  position: absolute; inset: 0; z-index: 0;
  background: var(--bg);
  pointer-events: none;
}
.hero__liquid-canvas { width: 100%; height: 100%; display: block; }
/* без WebGL2 (или без JS): статичные «контуры» градиентами-кольцами */
.hero__liquid.is-fallback,
html:not(.js) .hero__liquid {
  background:
    radial-gradient(38% 52% at 14% 28%, transparent 62%, var(--glow-soft) 66%, color-mix(in srgb, var(--amber-hi) 70%, transparent) 69.4%, var(--glow) 70.4%, transparent 76%),
    radial-gradient(34% 46% at 90% 62%, transparent 60%, var(--glow-soft) 65%, color-mix(in srgb, var(--amber-hi) 60%, transparent) 69.2%, var(--glow) 70.2%, transparent 77%),
    radial-gradient(22% 30% at 64% 6%, transparent 58%, color-mix(in srgb, var(--amber) 55%, transparent) 68.6%, transparent 76%),
    radial-gradient(60% 60% at 50% 40%, color-mix(in srgb, var(--amber-deep) 12%, transparent), transparent 70%),
    var(--bg);
}

/* ---------- 1. затемнение под текстом (читаемость поверх контуров) */
.hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 44% 34% at 50% 42%, color-mix(in srgb, var(--bg) 62%, transparent), transparent 100%),
    linear-gradient(to bottom, color-mix(in srgb, var(--bg) 55%, transparent), transparent 22%);
}

/* ---------- 2. дуга горизонта: тёмная «планета» с янтарной кромкой */
/* «планета» уходит далеко под край hero (--hz-under): при скролле дуга поднимается быстрее
   страницы и тёмным телом стирает шейдер — переход в следующую секцию без шва */
.hero__horizon {
  position: absolute; left: 0; right: 0; z-index: 2;
  bottom: calc(-1 * var(--hz-under));
  height: calc(var(--hz-apex) + var(--hz-pad) + var(--hz-under));
  pointer-events: none;
}
.hero__horizon-in { position: absolute; inset: 0; }
.hero__horizon-in > * { position: absolute; inset: 0; }
/* окружность: центр по X — середина, по Y — вершина + радиус */
.hero__planet {
  background: radial-gradient(circle var(--hz-r) at 50% calc(var(--hz-pad) + var(--hz-r)),
    var(--bg) calc(var(--hz-r) - 90px),
    color-mix(in srgb, var(--amber-deep) 22%, var(--bg)) calc(var(--hz-r) - 6px),
    color-mix(in srgb, var(--amber-deep) 45%, var(--bg)) calc(var(--hz-r) - 1.5px),
    transparent var(--hz-r));
}
/* тонкая раскалённая кромка, гаснет к краям */
.hero__rim {
  background: radial-gradient(circle var(--hz-r) at 50% calc(var(--hz-pad) + var(--hz-r)),
    transparent calc(var(--hz-r) - 3px),
    var(--amber-hi) calc(var(--hz-r) - 1.5px),
    color-mix(in srgb, var(--ink) 80%, var(--amber-hi)) calc(var(--hz-r) - .25px),
    var(--amber-hi) calc(var(--hz-r) + 1.25px),
    color-mix(in srgb, var(--amber) 55%, transparent) calc(var(--hz-r) + 4px),
    color-mix(in srgb, var(--amber) 18%, transparent) calc(var(--hz-r) + 14px),
    transparent calc(var(--hz-r) + 34px));
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 34%, #000 66%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, #000 34%, #000 66%, transparent 100%);
}
/* атмосфера над кромкой — медленно «дышит» */
.hero__glow {
  background: radial-gradient(circle calc(var(--hz-r) + 240px) at 50% calc(var(--hz-pad) + var(--hz-r)),
    color-mix(in srgb, var(--amber-hi) 55%, transparent) calc(var(--hz-r) - 2px),
    color-mix(in srgb, var(--amber) 30%, transparent) calc(var(--hz-r) + 24px),
    var(--glow-soft) calc(var(--hz-r) + 80px),
    color-mix(in srgb, var(--amber) 5%, transparent) calc(var(--hz-r) + 160px),
    transparent calc(var(--hz-r) + 240px));
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 28%, #000 72%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, #000 28%, #000 72%, transparent 100%);
  animation: hero-breathe 8s var(--ease-io) infinite;
}
/* горячая точка в зените дуги: один мягкий слой, без бликов-линий */
.hero__flare { mix-blend-mode: screen; }
.hero__flare::before {
  content: ""; position: absolute; left: 50%; top: var(--hz-pad);
  width: min(1100px, 92vw); height: 150px;
  translate: -50% -50%;
  background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--amber-hi) 42%, transparent), color-mix(in srgb, var(--amber) 14%, transparent) 45%, transparent 72%);
  animation: hero-flare 8s var(--ease-io) infinite;
}
/* нижний край hero: янтарный отлив под дугой у краёв экрана обрезался ровной линией по низу hero — шов
   (раньше его прикрывала лента разделов, убрана 09.10). Мягкий переход в --bg на 96 снизу, над дугой (z 3), под текстом */
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  height: var(--s-9);
  background: linear-gradient(to bottom, color-mix(in srgb, var(--bg) 0%, transparent), var(--bg));
  pointer-events: none;
}
@keyframes hero-breathe { 0%, 100% { opacity: .78; } 50% { opacity: 1; } }
@keyframes hero-flare { 0%, 100% { opacity: .8; transform: scaleX(.94); } 50% { opacity: 1; transform: scaleX(1.06); } }

/* ---------- 3. направляющих нет: прямые линии по краям контейнера упирались в скруглённые торцы шапки
   (Орсен: «прямые линии привести в соответствие со скруглениями»).
   Страховка для разметки до выкладки (hero.home.tpl уже без .hero__frame и .hero__cue) — удалить в следующем раунде. */
.hero__frame, .hero__cue { display: none; }

/* ---------- 5. текст */
/* текст центрируется между верхней линией рамки и вершиной дуги горизонта (с поправкой на её свечение).
   Ленты разделов внизу hero нет (09.10: разделы — плитками «Что поставляем» ниже и в мегаменю): снизу та же сумма,
   что раньше давали лента и отступ над ней, — текст стоит на прежнем месте, над дугой */
.hero__inner {
  position: relative; z-index: 5;
  align-self: center;
  display: flex; justify-content: center;
  padding-top: calc(var(--frame-top) + clamp(16px, 3.5vh, 48px));
  padding-bottom: calc(var(--hz-apex) + clamp(48px, 6.5vh, 64px));
}
.hero__content {
  display: flex; flex-direction: column; align-items: center;
  min-width: 0; max-width: min(1040px, 100%); text-align: center;
}
/* типографика — SPACING.md §13: кегль, межстрочный, трекинг и ширина строки — из .t-display / .t-lead (base.css), своих чисел нет;
   <em> в H1 — прямое начертание цветом --ink-2 (base.css). Вертикаль §13.7 растёт: бейдж → H1 12 < H1 → лид 16 → 24 < лид → кнопки 24 → 32 */
.hero__badge { margin-bottom: var(--gap-eyebrow); }
.hero__lead { margin-top: var(--gap-title-display); }
.hero__ctas {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: var(--gap-row); margin-top: var(--section-head);
}
/* телефон (< 640): кнопки столбцом во всю ширину контейнера, одной ширины и по одним краям — как на товаре (.phero__cta) */
@media (max-width: 639px) {
  .hero__ctas { flex-direction: column; align-items: stretch; align-self: stretch; }
  .hero__ctas > * { justify-content: center; }
}
/* < 1100: принудительного переноса нет — «Нефтехимическое сырьё» (≈ 992 px в 88, ≈ 740 в 64) шире строки контейнера
   (960 на 1024, 720 на 768): с <br> «сырьё» оставалось одно во второй строке, H1 в 4 строки. Без него balance делит H1
   на три ровные строки. Порог — ширина строки, а не ступень кегля */
@media (max-width: 1099px) {
  .hero__br { display: none; }
}
/* < 360: «Нефтехимическое» в display 40 (≈ 330 px) шире строки 288 на 320 — ступенью ниже, H1 32/36 (SPACING.md §13.8:
   слово длиннее строки опускаем на ступень, без clamp и vw) */
@media (max-width: 359px) {
  .hero__title { font-size: var(--fs-h1); line-height: var(--lh-h1); }
}

/* ---------- страховка без JS: если вход не начался за 3 с, показываем экран */
.js .hero[data-intro=""] :is(.hero__badge, .hero__title, .hero__lead, .hero__ctas, .hero__horizon-in) {
  opacity: 0;
  animation: hero-failsafe .8s var(--ease-out) 3s forwards;
}
@keyframes hero-failsafe { to { opacity: 1; } }

/* ---------- планшет */
@media (max-width: 1024px) {
  .hero { --hz-r: max(1100px, 130vw); }
}

/* ---------- телефон */
@media (max-width: 760px) {
  .hero {
    --hz-r: 118vw;
    --hz-pad: 200px;
    --frame-top: calc(var(--header-h) + var(--s-4));
  }
  /* снизу — от геометрии дуги, как на десктопе: вершина дуги (--hz-apex) + 48 (--s-7 = --cap-lift телефона), вверх до кратного 4 — как --cap-gap (§1, ui.css).
     Раньше стояло 128 + 64 + 16 = 208 — суммы нет в §1; текст выше прежнего на ≈ 8 px, до вершины дуги не ближе 48 */
  .hero__inner { padding-top: calc(var(--frame-top) + var(--s-5)); padding-bottom: round(up, var(--hz-apex) + var(--s-7), var(--s-1)); }
  .hero__scrim {
    background:
      radial-gradient(ellipse 90% 36% at 50% 40%, color-mix(in srgb, var(--bg) 66%, transparent), transparent 100%),
      linear-gradient(to bottom, color-mix(in srgb, var(--bg) 55%, transparent), transparent 22%);
  }
  /* бейдж — 14, как на десктопе (моб. проработка 10.10: на телефоне текст не мельче 14; на 320 строка помещается) */
  .hero__flare::before { height: 110px; }
}

/* ---------- телефон боком: кадр по содержимому, без пола 640 (на окне 390 он добавлял пустоту под кнопками) */
@media (max-height: 500px) {
  .hero { min-height: 100vh; min-height: 100svh; }
}

/* ---------- без движения: статичный кадр, всё на месте */
@media (prefers-reduced-motion: reduce) {
  .js .hero[data-intro=""] :is(.hero__badge, .hero__title, .hero__lead, .hero__ctas, .hero__horizon-in) { opacity: 1; animation: none; }
  .hero__glow, .hero__flare::before { animation: none; }
}