/*
 * SC 01 · Первый экран «Перевод фокуса»: два плана заголовка — дальний
 * «АВТОМАТИЗАЦИЯ» и ближний «КИНО», диск фокуса, боке и заставка.
 * Кегли планов подгоняет скрипт (--home-fh-*), здесь — запасные значения.
 */
.home-hero {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  min-height: 100vh; min-height: 100svh;
  padding: var(--vf-hero-pad-t) 0 var(--vf-hero-pad-b);
}
/* Первый экран — во всю ширину, без потолка каркаса: контент по левому полю страницы, по высоте — посередине */
.home-hero > .vf-wrap { flex: 1; display: flex; flex-direction: column; justify-content: center; width: 100%; max-width: none; margin: 0; }

/* Сетка третей кадра */
.home-hero-grid { position: absolute; inset: var(--vf-inset); pointer-events: none; }
.home-hero-grid::before, .home-hero-grid::after { content: ""; position: absolute; }
.home-hero-grid::before {
  left: 33.333%; right: 33.333%; top: 0; bottom: 0;
  border-left: 1px solid var(--vf-hero-thirds);
  border-right: 1px solid var(--vf-hero-thirds);
}
.home-hero-grid::after {
  top: 33.333%; bottom: 33.333%; left: 0; right: 0;
  border-top: 1px solid var(--vf-hero-thirds);
  border-bottom: 1px solid var(--vf-hero-thirds);
}

/* Два плана: дальний план и диск выходят за правое поле сетки до рамки — это глубина кадра */
.home-fh { position: relative; z-index: var(--vf-z-content); width: var(--home-fh-w, 100%); }
/* Трекинг в em считается от кегля заголовка (2em, как у h1 по умолчанию), а не от кеглей планов:
   на огромных буквах он остаётся тонким, как в принятом концепте. */
.home-fh-h {
  position: relative; margin: 0; font-size: 2em; font-family: var(--vf-font-display); font-weight: 900;
  letter-spacing: var(--vf-track-display); text-transform: uppercase;
}
.home-fh-pl { position: relative; display: block; width: max-content; will-change: transform; }
/* Подгонка задаёт кегль и тут же меряет строку. Глобальное правило отказа от движения
   даёт всем свойствам переход 0,01 мс — и замер успевал прочитать прежний кегль. */
.home-fh-h, .home-fh-pl, .home-fh-l { transition-property: none; }
/* Межстрочный планов — px от кегля (--vf-leading-display), его ставит подгонка вместе с кеглем */
.home-fh-pl[data-plane="far"] { font-size: var(--home-fh-f2, var(--vf-hero-fs-far)); line-height: var(--home-fh-l2, var(--vf-hero-lh-far)); }
.home-fh-pl[data-plane="near"] {
  font-size: var(--home-fh-f1, var(--vf-hero-fs-near)); line-height: var(--home-fh-l1, var(--vf-hero-lh-near)); margin-top: var(--vf-hero-near-gap);
}
.home-fh-l { display: block; white-space: nowrap; will-change: opacity; }
.home-fh-l + .home-fh-l { position: absolute; left: 0; top: 0; }
.home-fh-l[data-l="b1"] { filter: blur(.035em); }
.home-fh-l[data-l="b2"] { filter: blur(.1em); color: var(--vf-fg-blur); }
/* До скрипта — статичный кадр: «КИНО» резко, дальний план мягко размыт */
.home-fh-pl[data-plane="far"] .home-fh-l[data-l="s"] { opacity: 0; }
.home-fh-pl[data-plane="far"] .home-fh-l[data-l="b1"] { opacity: .9; }
.home-fh-pl[data-plane="far"] .home-fh-l[data-l="b2"] { opacity: .09; }
.home-fh-pl[data-plane="near"] .home-fh-l[data-l="b1"],
.home-fh-pl[data-plane="near"] .home-fh-l[data-l="b2"] { opacity: 0; }

.home-fh-tag {
  position: absolute; top: 100%; margin-top: var(--vf-sp-lg); display: flex; align-items: center; gap: var(--vf-sp-sm);
  font: 600 var(--vf-fs-xs) / var(--vf-lh-xs) var(--vf-font-mono); font-style: normal; letter-spacing: var(--vf-track-wide);
  color: var(--vf-fg-3); white-space: nowrap; transition: color var(--vf-dur-mid);
}
.home-fh-tag::before { content: ""; width: var(--vf-dot-sm); height: var(--vf-dot-sm); border: 1px solid currentColor; transform: rotate(45deg); }
.home-fh-tag[data-on] { color: var(--vf-accent); }
.home-fh-pl[data-plane="far"] .home-fh-tag { right: var(--vf-hero-tag-inset); }
.home-fh-pl[data-plane="near"] .home-fh-tag { left: var(--vf-hero-tag-inset); margin-top: var(--vf-sp-xl); }

.home-fh-row {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--vf-sp-3xl);
  width: var(--home-fh-cw, 100%); margin-top: var(--vf-hero-row-gap);
}
.home-fh-lead { max-width: 47ch; font-size: var(--vf-fs-hero-lead); line-height: var(--vf-lh-hero-lead); color: var(--vf-fg-2); }
.home-fh-lead strong { color: var(--vf-fg); font-weight: 500; }
.home-hero-cta { display: flex; flex-wrap: wrap; flex: none; gap: var(--vf-sp-md); }

/* Диск фокуса и показания — в правом нижнем углу блока, вровень с низом кнопок: угол под «КИНО» иначе пустовал */
.home-fh-ff { position: absolute; right: 0; bottom: 0; display: flex; align-items: center; gap: var(--vf-sp-3xl); }
.home-fh-disc { width: var(--vf-hero-disc); height: auto; flex: none; overflow: visible; }
.home-dial-rim { fill: var(--vf-cell); stroke: var(--vf-line-2); }
.home-dial-knurl { stroke: var(--vf-line-3); }
.home-dial-face { fill: var(--vf-surface); stroke: var(--vf-line-3); }
.home-dial-tick { stroke: var(--vf-fg-2); }
/* Подписи диска набраны в единицах viewBox (220), а диск (--vf-hero-disc, 130–210 px) мельче натурального на любом
   окне. Кегль --vf-hero-dial-fs идёт обратно размеру диска: на экране 11,5–12,4 px, не мельче пола. */
.home-dial-num { font: 600 var(--vf-hero-dial-fs) var(--vf-font-mono); fill: var(--vf-fg-soft); letter-spacing: var(--vf-track-xs); }
.home-dial-gm { font: 700 var(--vf-hero-dial-fs) var(--vf-font-mono); fill: var(--vf-accent); letter-spacing: var(--vf-track-lg); }
.home-dial-grease { stroke: var(--vf-accent); fill: none; stroke-linecap: round; }
.home-dial-hub { fill: var(--vf-screen); stroke: var(--vf-line-2); }
.home-dial-pin { fill: var(--vf-fg-3); }
.home-dial-idx { fill: var(--vf-accent); }
.home-dial-idx-l { stroke: var(--vf-accent); }
.home-fh-ro {
  display: grid; gap: var(--vf-sp-sm); min-width: 14ch;
  font: 500 var(--vf-fs-xs) / var(--vf-lh-xs-snug) var(--vf-font-mono); letter-spacing: var(--vf-track-label);
  color: var(--vf-fg-3); text-transform: uppercase; font-variant-numeric: tabular-nums;
}
.home-fh-ro b { font: 600 var(--vf-fs-readout) / var(--vf-lh-readout) var(--vf-font-mono); letter-spacing: var(--vf-track-tight); color: var(--vf-fg); text-transform: none; }
.home-fh-pn { color: var(--vf-accent); }

/* Боке — огни за дальним планом */
.home-fh-bk { position: absolute; z-index: var(--vf-z-scene); pointer-events: none; }
.home-fh-bk i {
  position: absolute; border-radius: var(--vf-r-round); width: var(--bk-s); height: var(--bk-s);
  margin: calc(var(--bk-s) / -2) 0 0 calc(var(--bk-s) / -2); will-change: transform, opacity;
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--bk-c) 10%, transparent) 0 78%,
    color-mix(in srgb, var(--bk-c) 26%, transparent) 92%, transparent 100%);
}

/* ── Заставка: перевод фокуса ── */
.home-boot { position: fixed; inset: 0; z-index: var(--vf-z-boot); display: none; place-items: center; background: var(--vf-void); }
html.intro-full .home-boot { display: grid; }
html.intro-full #offer .vf-wrap, html.intro-short #offer .vf-wrap { visibility: hidden; }
.home-boot-in { display: grid; justify-items: center; gap: var(--vf-sp-3xl); }
.home-boot-ring {
  position: relative; width: var(--vf-boot-ring-w); height: var(--vf-boot-ring-h); overflow: hidden;
  border: 1px solid var(--vf-line-2); border-radius: var(--vf-r-ctl);
  -webkit-mask: var(--vf-mask-fade-x); mask: var(--vf-mask-fade-x);
}
/* Лента фокусных расстояний едет под неподвижным индексом */
.home-boot-row {
  position: absolute; left: 50%; top: var(--vf-boot-row-y); height: var(--vf-boot-row-h); will-change: transform;
  transform: translateX(var(--home-boot-from));
}
.home-boot-row span {
  position: absolute; top: 0; padding-left: var(--vf-sp-xs); font-size: var(--vf-fs-xs); line-height: var(--vf-lh-xs-body); letter-spacing: var(--vf-track-md);
  color: var(--vf-fg-2); white-space: nowrap;
}
.home-boot-row i { position: absolute; top: var(--vf-boot-tick-y); width: 1px; height: var(--vf-boot-tick-h); background: var(--vf-line-2); }
.home-boot-idx {
  position: absolute; left: 50%; top: var(--vf-boot-idx-y); bottom: 0; width: 1px; margin-left: -1px; background: var(--vf-boot-idx-fill);
}
.home-boot-idx::before {
  content: ""; position: absolute; left: calc(var(--vf-boot-arrow) * -1); top: 0;
  border: var(--vf-boot-arrow) solid transparent; border-top: var(--vf-boot-arrow-h) solid var(--vf-accent); filter: var(--vf-boot-idx-glow);
}
.home-boot-lbl { font: 600 var(--vf-fs-sm) / var(--vf-lh-sm) var(--vf-font-mono); letter-spacing: var(--vf-track-boot); color: var(--vf-flash); }
/* Проезд шкалы и захват — CSS с первой отрисовки: браузер ведёт их сам, занятый скрипт их не останавливает.
   Скрипт подхватывает заставку по концу проезда (Hero.tsx). «LOCK» мигает, пока страница дособирается. */
html.intro-full .home-boot-row { animation: home-boot-row var(--vf-boot-run) var(--vf-ease-lens) both; }
@keyframes home-boot-row { from { transform: translateX(var(--home-boot-from)); } to { transform: translateX(var(--home-boot-to)); } }
.home-boot-lock { opacity: 0; }
html.intro-full .home-boot-lock {
  animation: home-boot-lock var(--vf-boot-lock-blink) steps(1, end) var(--vf-boot-lock-at) infinite;
}
@keyframes home-boot-lock { 0%, 60% { opacity: 1; } 61%, 100% { opacity: .25; } }

/* Планшет: диск под планами, как на телефоне (рядом с «КИНО» ему не хватает высоты строки) */
@media (max-width: 900px) { /* bp-tablet */
  .home-fh-pl[data-plane="far"] { margin-bottom: var(--vf-sp-xs); }
  .home-fh-pl[data-plane="far"] .home-fh-tag { right: auto; left: .04em; }
  .home-fh-ff { position: static; margin-top: var(--vf-sp-3xl); gap: var(--vf-sp-xl); }
}
@media (max-width: 760px) { /* bp-phone */
  .home-fh-bk { display: none; }
  .home-hero-cta { flex-wrap: nowrap; gap: var(--vf-sp-sm); }
  .home-hero-cta .vf-btn { flex: 1 1 auto; padding: 0 var(--vf-sp-lg) 0 var(--vf-sp-2xs); }
  .home-hero-cta .vf-btn-g { padding: 0 var(--vf-sp-lg); }
}