/* ════════════════════════════════════════════════════════════════════
   #how — «Как это работает»

   Три шага 01/02/03 и соединительный рельс над ними. Рельс — та же
   трёхколоночная сетка, что и у карточек, поэтому узлы всегда стоят
   ровно по центрам колонок. Отрезок между шагами — ::after узла:
   половина своей колонки + зазор + половина соседней. У последнего
   узла его нет (соединять больше не с чем).

   Движение: при появлении рельса узлы «вспыхивают», а отрезки
   прочерчиваются слева направо (scaleX). Анимации навешиваются только
   вместе с .is-revealed, базовое состояние — конечное: без JS и при
   prefers-reduced-motion рельс просто нарисован целиком.
   Анимируются transform / opacity / background-position — layout не
   пересчитывается ни на одном кадре.
   ════════════════════════════════════════════════════════════════════ */

/* ── Фон секции ────────────────────────────────────────────────────── */

.s-how__halo {
  top: 16%;
  left: 50%;
  width: min(72%, 900px);
  aspect-ratio: 3 / 1;
  transform: translateX(-50%);
}

/* ── Рельс ─────────────────────────────────────────────────────────── */

/* Линия между шагами осмысленна, только когда шаги стоят в ряд. */
.s-how__rail { display: none; }

@media (min-width: 1040px) {
  .s-how__rail {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-6);
    /* section__head уже отбил 48px — подтягиваем рельс к макетным 32px */
    margin-top: calc(var(--sp-4) * -1);
    margin-bottom: var(--sp-7);
  }
}

.s-how__node {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--sp-5);
}

.s-how__dot {
  position: relative;
  width: var(--sp-2);
  height: var(--sp-2);
  border-radius: 50%;
  background: var(--c-accent);
}

/* Расходящееся кольцо — «сигнал пошёл». */
.s-how__dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--c-accent) 70%, transparent);
  animation: ms-ping calc(2.4s * var(--motion)) ease-out infinite;
}
.s-how__node:nth-child(2) .s-how__dot::after { animation-delay: calc(0.8s * var(--motion)); }
.s-how__node:nth-child(3) .s-how__dot::after { animation-delay: calc(1.6s * var(--motion)); }

/* Отрезок до следующего узла: 100% своей колонки + зазор сетки. */
.s-how__node::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100% + var(--sp-6));
  height: 1px;
  background-image:
    repeating-linear-gradient(90deg,
      var(--c-accent) 0 var(--sp-1),
      transparent var(--sp-1) var(--sp-6)),
    linear-gradient(90deg, var(--c-line), var(--c-line));
  background-size: var(--sp-6) 100%, 100% 100%;
  background-repeat: repeat-x, no-repeat;
  transform: translateY(-50%);
  transform-origin: 0 50%;
  animation: ms-how-flow calc(1.6s * var(--motion)) linear infinite;
}
.s-how__node:last-child::after { content: none; }

/* Бегущий по линии пунктир. */
@keyframes ms-how-flow {
  to { background-position: var(--sp-6) 0, 0 0; }
}

/* ── Прочерчивание при появлении ───────────────────────────────────── */

/* Хореография «сигнал идёт по рельсу»: узел вспыхивает → от него
   прочерчивается отрезок → на его конце вспыхивает следующий узел.

   Два условия, которые задают числа. Первое: сам рельс въезжает
   [data-reveal="fade"] за --t-slow, и всё раньше ~0.2s проходит под
   почти прозрачным слоем — поэтому первая вспышка на 0.22s, а не на
   0.08s. Второе: шаги-карточки садятся к 0.78s (0.18s задержки +
   --t-slow), и сигнал не должен ползти по уже собранной секции ещё
   секунду — шаг хопа 0.48s, весь проход укладывается в ~1.6s.

   Отрезок чертится linear, а не --ease-out: это бегущий сигнал, он
   идёт с постоянной скоростью и совпадает по характеру с пунктиром
   ms-how-flow. Вспышка узла, наоборот, тормозит — ей --ease-out. */

.s-how__rail.is-revealed .s-how__dot {
  animation: ms-how-pop calc(0.4s * var(--motion)) var(--ease-out) backwards;
}
.s-how__rail.is-revealed .s-how__node:nth-child(1) .s-how__dot { animation-delay: calc(0.22s * var(--motion)); }
.s-how__rail.is-revealed .s-how__node:nth-child(2) .s-how__dot { animation-delay: calc(0.70s * var(--motion)); }
.s-how__rail.is-revealed .s-how__node:nth-child(3) .s-how__dot { animation-delay: calc(1.18s * var(--motion)); }

.s-how__rail.is-revealed .s-how__node::after {
  animation:
    ms-how-flow calc(1.6s * var(--motion)) linear infinite,
    ms-how-draw calc(0.38s * var(--motion)) linear backwards;
}
.s-how__rail.is-revealed .s-how__node:nth-child(1)::after { animation-delay: 0s, calc(0.34s * var(--motion)); }
.s-how__rail.is-revealed .s-how__node:nth-child(2)::after { animation-delay: 0s, calc(0.82s * var(--motion)); }

@keyframes ms-how-pop {
  from { opacity: 0; transform: scale(0); }
}

@keyframes ms-how-draw {
  from { opacity: 0; transform: translateY(-50%) scaleX(0); }
}

/* ── Шаги ──────────────────────────────────────────────────────────── */

.s-how__steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
}

/* Две колонки + третий шаг во всю ширину: три узкие колонки на планшете
   режут длинное описание третьего шага в лапшу. */
@media (min-width: 680px) {
  .s-how__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-how__step:last-child { grid-column: 1 / -1; }
}
/* Здесь же включается рельс — сетки обязаны совпадать. */
@media (min-width: 1040px) {
  .s-how__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .s-how__step:last-child { grid-column: auto; }
}

/* Обёртка держит [data-reveal], карточка — свой hover: так переходы
   появления и наведения не спорят за transition. */
.s-how__step { display: flex; }

.s-how .s-how__card {
  flex: 1;
  transition:
    transform var(--t-base) var(--ease-out),
    border-color var(--t-base) var(--ease-out),
    background var(--t-base) var(--ease-out),
    box-shadow var(--t-base) var(--ease-out);
}
/* Акцентного свечения нет среди --shadow-*: тени в токенах чёрные.
   Геометрию берём из токенов ритма, цвет — из акцента. */
.s-how .s-how__card:hover {
  box-shadow: 0 var(--sp-7) var(--sp-11) calc(var(--sp-8) * -1)
              color-mix(in srgb, var(--c-accent) 50%, transparent);
}

.s-how__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}

.s-how__num {
  color: var(--c-accent);
  transition: filter var(--t-base) var(--ease-out);
}
.s-how__card:hover .s-how__num {
  filter: drop-shadow(0 0 var(--sp-3) color-mix(in srgb, var(--c-accent) 60%, transparent));
}

.s-how__icon {
  color: var(--c-muted);
  transition:
    color var(--t-base) var(--ease-out),
    transform var(--t-base) var(--ease-out);
}
.s-how__card:hover .s-how__icon {
  color: var(--c-accent);
  transform: translateY(calc(var(--sp-1) * -0.5)) scale(1.06);
}

/* margin-top: auto прижимает пару «заголовок + описание» к низу карточки,
   как в макете; высоту выравнивает сама сетка. */
.s-how__title {
  margin-top: auto;
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--c-text);
}