/* ============================================================
   FLOW — сквозной поток линий за экранами 1–3.

   Канвас лежит ФИКСИРОВАННО за рельсой, а не внутри экрана: рельса
   ездит по горизонтали (translateX), и канвас внутри неё уезжал бы
   вместе с содержимым. Камера должна стоять на месте — движется
   контент, поток подстраивается под него.

   Про слой. z-index: -1 здесь НЕ работает: base.css задаёт фон и на
   html, и на body. Фоном корня становится html, а фон body красится
   уже как фон обычного блока — а он в порядке отрисовки идёт ПОСЛЕ
   отрицательных слоёв и закрывает их. Поэтому канвас на z-index: 0
   (это выше фонов блоков), а контенту явно поднят слой ниже.
   ============================================================ */

/* Явно, чтобы не зависеть от того, позиционирован ли .scroller в nav.css */
.scroller { position: relative; z-index: 1; }

/* Заголовок героя набран в две строки, а не в три — колонке нужно
   больше места. 44vw при --fs-hero (39px на 1440) даёт запас около
   140px на самой длинной строке. Видео-панели справа больше нет, всю
   ширину экрана делят текст и проходящий за ним поток.
   min(100%, …) обязателен: нижняя граница clamp — 460px, и на телефоне
   она шире самого экрана, из-за чего блок вылезал за правый край. */
.s1-left { width: min(100%, clamp(460px, 44vw, 780px)); }

/* Рельса. Дело не только в длительности: штатная --ease-out это
   cubic-bezier(0.16, 1, 0.3, 1) — она выбрасывает две трети пути за
   первую четверть времени, и переход читается рывком, сколько его ни
   растягивай. Ставим симметричную --ease (0.4, 0, 0.2, 1): мягкий
   разгон, мягкая остановка.
   Блокировку ввода в nav.js подстраивать не нужно: lock() берёт
   длительность из вычисленного стиля рельсы (см. railLockMs). */
.rail { transition: transform 0.95s var(--ease); }

/* .orb из hero.css стоял на месте видео-карточки (left: 50% + 5px).
   Видео убрали, пятно осталось висеть поверх потока; переносить его за
   текст тоже оказалось лишним — свет под заголовком не нужен, за фон
   на первом экране отвечают сами линии. */
.orb { display: none; }

#flowCanvas,
#flowMask {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

#flowCanvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* Маска первого экрана: гасит поток под заголовком и лидом, иначе
   линии спорят с крупным набором. Непрозрачность ведёт flow.js —
   на втором и третьем экранах маска не нужна. */
#flowMask {
  background:
    linear-gradient(180deg,
      rgba(18, 20, 26, 0.96) 0%,
      rgba(18, 20, 26, 0.80) 9%,
      rgba(18, 20, 26, 0.10) 26%,
      rgba(18, 20, 26, 0) 38%),
    linear-gradient(90deg,
      rgba(18, 20, 26, 0.88) 0%,
      rgba(18, 20, 26, 0.76) 18%,
      rgba(18, 20, 26, 0.48) 32%,
      rgba(18, 20, 26, 0.15) 46%,
      rgba(18, 20, 26, 0) 58%);
}

/* Ниже 1024px за фон первого экрана отвечает рой частиц (вариант
   Алекса, reconversiaswarm_20.html): линии потока там не рисуются, а
   канвас остаётся — рой живёт в нём. Маска не нужна: рой стоит
   куполами НАД и ПОД текстом, а не за ним, и градиент только глушил
   бы верхний купол. */
@media (max-width: 1024px) {
  #flowMask { background: none; }

  /* Высота в 100vh, а не 100% рамки. На телефоне прокрутка вниз прячет
     адресную строку, рывок вверх возвращает её, и окно то растёт, то
     сжимается на её высоту. При height: 100% вместе с окном ездила бы
     и рамка канваса — рой пересчитывался бы в новую высоту и на каждом
     таком рывке заметно сдвигался. 100vh по определению считается от
     окна БЕЗ адресной строки и потому не меняется вовсе; лишнее внизу
     просто уходит за кромку — канвас фоновый (pointer-events: none) и
     прокрутки не создаёт, он position: fixed. */
  #flowCanvas { height: 100vh; }
}