/* ─────────────────────────────────────────────────────────────────────────
   ПЕРВЫЙ ЭКРАН · обсидиановая оболочка, сечение, два потока.
   Читает только tokens.css. Знак — обычный <img>, к нему не применяется ни
   transform, ни filter, ни blend: он остаётся утверждённым.
   Текст, кнопки и поля сюда не заходят: всё, что светится, лежит в панели
   сцены и обрезано её краями.
   ───────────────────────────────────────────────────────────────────────── */

.hero {
  padding-block: clamp(1.5rem, 1rem + 2.5vw, 3.5rem) var(--sec);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.75rem, 1rem + 3vw, 3.5rem);
  align-items: center;
}
@media (min-width: 62rem) {
  .hero-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  }
}

.hero h1 {
  margin: 1.1rem 0 0;
  font-size: var(--t-display);
  line-height: 0.98;
  letter-spacing: -0.035em;
  font-weight: 700;
  text-wrap: balance;
  max-width: 15ch;
}
.hero-lede {
  margin: clamp(1rem, 0.8rem + 0.8vw, 1.6rem) 0 0;
  max-width: 44ch;
  font-size: var(--t-lede);
  color: var(--ox-ink-2);
  text-wrap: pretty;
}
.hero-sign {
  margin-top: clamp(1.4rem, 1rem + 1.2vw, 2.2rem);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.hero-sign .btn {
  min-height: 44px; /* касание: не меньше 44 */
  padding-inline: 0.95rem;
  font-size: 0.76rem;
  letter-spacing: 0.06em;
}
@media (max-width: 40rem) {
  .hero-sign {
    flex-direction: column;
    align-items: stretch;
  }
  .hero-sign .btn {
    width: 100%;
  }
}

/* метки в герое: AA, а не 2.3:1 */
.hero .tag,
.hero-readout .k {
  color: var(--ox-ink-3);
}

/* ── Сцена ───────────────────────────────────────────────────────────────── */
.hero-scene {
  --p: 1; /* без JS и при reduced-motion — финальная композиция */
  --btn-notch: var(--ox-bg);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  max-width: 640px;
  margin-inline: auto;
  aspect-ratio: 1 / 1;
  max-height: calc(100svh - 280px);
  min-height: 360px;
  border: var(--bw) solid var(--ox-hair);
  background:
    radial-gradient(60% 60% at 100% 100%, rgb(225 83 88 / 0.12), transparent 70%),
    radial-gradient(60% 60% at 0% 0%, rgb(148 50 221 / 0.16), transparent 70%),
    var(--ox-surface);
  direction: ltr; /* сцену и знак не зеркалим под ивритом */
  /* срез угла: единственная геометрическая сигнатура сайта */
  clip-path: polygon(0 0, calc(100% - var(--cut-panel)) 0, 100% var(--cut-panel), 100% 100%, 0 100%);
}
@media (max-width: 61.99rem) {
  .hero-scene {
    aspect-ratio: 16 / 11;
    max-height: none;
    max-width: 560px;
  }
}
.hs-shell,
.hs-sparks,
.hs-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.hs-sparks {
  z-index: 1;
}
/* кольцо частиц лежит под искрами и под знаком; до первого кадра прозрачно */
.hs-ring {
  z-index: 1;
  opacity: 0;
  transition: opacity var(--d-3, 800ms) var(--ease);
  touch-action: pan-y;
}
.hs-ring.is-ready { opacity: 1; }
.hs-shell {
  z-index: 0;
  fill: none;
  stroke-linejoin: miter;
}
/* знак: по центру, 62 % панели, никаких трансформаций */
.hs-mark {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: 62%;
  height: auto;
  translate: -50% -50%;
  pointer-events: none;
  user-select: none;
}
@media (max-width: 61.99rem) {
  .hs-mark {
    width: auto;
    height: 82%;
    aspect-ratio: 1;
  }
}
.hs-mark.is-failed {
  display: none;
}

/* оболочка */
.hs-base path {
  stroke: var(--ox-line);
  stroke-width: 1;
  opacity: 0.55;
}
.hs-base path:nth-child(1) { opacity: 0.9; }
.hs-base path:nth-child(3) { opacity: 0.35; }
.hs-gloss {
  stroke: url(#hsEdge);
  stroke-width: 1.5;
}
.hs-inner {
  stroke: var(--ox-ink-3);
  stroke-width: 1;
  stroke-dasharray: 2 5;
  opacity: 0.7;
}
.hs-links path {
  stroke: var(--ox-ink-3);
  stroke-width: 1;
  stroke-dasharray: 3 4;
  opacity: 0.5;
}
.hs-nodes circle {
  fill: var(--ox-ink);
  stroke: none;
  opacity: 0.85;
}
/* сканирующее сечение: линия + светлая полоса 24 px */
.hs-scan {
  stroke: var(--ox-ink);
  stroke-width: 1;
  opacity: calc(0.55 * (1 - var(--p) * var(--p)));
}

/* два потока: красный и фиолетовый; прогресс — через dashoffset */
.hs-flow {
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--p));
  opacity: calc(0.35 + 0.55 * var(--p));
}
.hs-flow--r { stroke: var(--ox-red); }
.hs-flow--v { stroke: var(--ox-violet); }
/* ореол — широкая тусклая копия, а не filter: фильтр перерисовывался бы каждый кадр бегущего штриха */
.hs-halo {
  stroke-width: 7;
  stroke-linecap: round;
  opacity: calc(0.16 * var(--p));
}
.hs-halo--r { stroke: var(--ox-red); }
.hs-halo--v { stroke: var(--ox-violet); }
.hs-cross {
  fill: var(--ox-ink);
  opacity: calc(0.2 + 0.8 * var(--p));
}

/* спокойный фон после вступления: яркий штрих бежит по потоку, сам поток виден целиком */
.hs-run {
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 0.05 0.95;
  stroke-dashoffset: 1;
  opacity: 0;
}
.hs-run--r { stroke: #f0787c; }
.hs-run--v { stroke: #c77bf0; }
.hero-scene.is-live .hs-run {
  opacity: 1;
  animation: hsRun 6s linear infinite;
}
.hero-scene.is-live .hs-run--v {
  animation-delay: -3s;
}
.hero-scene.is-off .hs-run {
  animation-play-state: paused;
}
@keyframes hsRun {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-scene .hs-run {
    animation: none !important;
    opacity: 0 !important;
  }
}

/* ── Полоса показателей: во всю ширину под обоими столбцами ──────────────── */
.hero-readout {
  --btn-notch: var(--ox-bg);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
  border-block: var(--bw) solid var(--ox-line);
}
@media (min-width: 48rem) {
  .hero-readout {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
.hero-readout > div {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.9rem 1rem;
  border-inline-start: var(--bw) solid var(--ox-hair);
}
.hero-readout > div:first-child {
  border-inline-start: 0;
}
@media (max-width: 47.99rem) {
  .hero-readout > div:nth-child(odd) { border-inline-start: 0; }
  .hero-readout > div:nth-child(n + 3) { border-top: var(--bw) solid var(--ox-hair); }
}
.hero-readout .k {
  font-size: var(--t-small);
}
.hero-readout .v {
  font-family: var(--ox-mono);
  font-size: var(--t-body);
  color: var(--ox-ink);
  letter-spacing: 0.04em;
}

/* фокус — одинаковый во всех состояниях */
.hero a:focus-visible {
  outline: var(--bw-focus) solid var(--ox-focus);
  outline-offset: 3px;
}

/* ошибка загрузки знака: вместо него — ядро, текстовой подмены знака нет */
.hero-scene.no-mark .hs-cross {
  r: 14px;
  opacity: 1;
}

/* телефон: «Оставить заявку» в шапке дублирует три действия героя и не помещается рядом с языком */
@media (max-width: 30rem) {
  .top .btn { display: none; }
}

/* ── вступление: короткий ролик с облётом знака, в конце снова показывается точный оригинал ──
   Края кадра растворяет радиальная маска. */
.hs-intro {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: 62%;
  height: auto;
  aspect-ratio: 1;
  translate: -50% -50%;
  object-fit: cover;
  /* края кадра ролика растворяются маской: прямоугольник не виден, знак и свет целые */
  -webkit-mask-image: radial-gradient(closest-side, #000 66%, transparent 98%);
  mask-image: radial-gradient(closest-side, #000 66%, transparent 98%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 500ms var(--ease);
}
@media (max-width: 61.99rem) {
  .hs-intro { width: auto; height: 82%; }
}
.hero-scene.is-video .hs-intro { opacity: 1; }
.hero-scene.is-video .hs-mark { opacity: 0; }
.hs-mark { transition: opacity 500ms var(--ease); }

/* ── знак как планета: мягкий наклон в сторону указателя / сам по себе, свечение уходит туда же ──
   Это жёсткий поворот целой картинки в перспективе: пропорции, надписи и рисунок не меняются,
   в нейтральном положении знак стоит ровно. Углы маленькие (до 9°). */
.hero-scene { --rx: 0deg; --ry: 0deg; --ax: 0px; --ay: 0px; --ai: 0.6; }
.hs-mark,
.hs-intro {
  transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry));
  transform-origin: 50% 52%;
  will-change: transform;
}
.hs-aura {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  width: 78%;
  aspect-ratio: 1;
  translate: calc(-50% + var(--ax)) calc(-50% + var(--ay));
  pointer-events: none;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, rgb(255 90 98 / calc(0.22 * var(--ai))), rgb(225 83 88 / calc(0.12 * var(--ai))) 40%, transparent 70%),
    radial-gradient(closest-side at 62% 40%, rgb(148 50 221 / calc(0.2 * var(--ai))), transparent 66%);
  mix-blend-mode: screen;
}
@media (prefers-reduced-motion: reduce) {
  .hs-mark, .hs-intro { transform: none; }
}