/* ════════════════════════════════════════════════════════════════════
   07 — Роадмап. Линия времени с четырьмя этапами.

   Одна разметка, две ориентации:
     • по умолчанию (мобильный) линия вертикальная — этапы идут колонкой,
       рельс слева, точка на рельсе;
     • от 880px линия горизонтальная — четыре равные колонки, рельс
       сверху, точка на стыке рельса и колонки.
   Это тот случай, когда сетку надо перестроить принципиально, поэтому
   здесь ровно один медиазапрос (п.5 контракта).

   Пиксели встречаются только в геометрии самого рисунка линии: диаметр
   точки, толщина рельса, вырез фона под точкой. Это иллюстрация,
   а не система отступов (исключение из п.1 контракта).
   ════════════════════════════════════════════════════════════════════ */

/* ── Декоративные слои ─────────────────────────────────────────────── */

.s-roadmap .s-roadmap__dots {
  /* Точечная сетка живёт только в верхней половине секции, под шапкой. */
  inset: 0 0 40% 0;
  opacity: 0.7;
}

.s-roadmap .s-roadmap__halo {
  /* Ореол подсвечивает начало линии — там, где «следующий этап». */
  left: 0;
  top: 30%;
  width: min(760px, 90%);
  height: min(520px, 60%);
}

/* ── Шапка секции ──────────────────────────────────────────────────── */
/* Заголовок слева, реплика про голосование справа и по нижнему краю.
   Селектор с двумя классами — чтобы не зависеть от порядка подключения
   layout.css и этого файла. */

.s-roadmap .s-roadmap__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-6);
  margin-bottom: var(--sp-10);
}

.s-roadmap__headline {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.s-roadmap__note {
  max-width: 48ch;
  font-size: var(--fs-lg); /* 18px макета */
  line-height: var(--lh-relaxed);
  color: var(--c-muted);
  text-wrap: pretty;
}

/* ── Линия времени ─────────────────────────────────────────────────── */

.s-roadmap__track {
  display: grid;
  gap: var(--sp-9);
  /* Направление градиента рельса. Вертикальная линия — сверху вниз. */
  --rail-angle: 180deg;
}

.s-roadmap__stage {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding-left: var(--sp-7); /* место под рельс и точку */
}

/* Подсветка ближайшего этапа: мягкий ореол за текстом, дышит вместе
   с ореолом секции. Только background + opacity — layout не трогаем.
   Края гасит маска: closest-side гарантирует, что заливка доходит до
   ближайшей стороны ровно в ноль — иначе у ореола виден прямой срез
   по краю блока. */
.s-roadmap__stage--next::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: calc(var(--sp-6) * -1) calc(var(--sp-5) * -1);
  background: color-mix(in srgb, var(--c-accent) 15%, transparent);
  -webkit-mask-image: radial-gradient(ellipse closest-side at 32% 46%, #000, transparent);
          mask-image: radial-gradient(ellipse closest-side at 32% 46%, #000, transparent);
  animation: ms-breathe calc(7s * var(--motion)) ease-in-out infinite;
  pointer-events: none;
}

/* ── Рельс ─────────────────────────────────────────────────────────── */
/* Линия тянется от своей точки до следующей, перекрывая зазор сетки. */

.s-roadmap__rail {
  position: absolute;
  left: 0;
  top: 0;
  bottom: calc(var(--sp-9) * -1);
  width: 1px;
  overflow: hidden;
  background: var(--rail, var(--c-line));
  /* Линия «прочерчивается» в момент появления этапа: масштаб, не высота. */
  transform: scaleY(0);
  transform-origin: top center;
  /* Прочерчивание ждёт своей очереди в каскаде, подсветка по курсору —
     нет: у filter своя, короткая и безотлагательная дорожка. */
  transition:
    transform var(--t-slow) var(--ease-out)
      calc(var(--reveal-delay, 0s) + var(--t-base)),
    filter var(--t-base) var(--ease-out);
  pointer-events: none;
}
/* Линия у последнего этапа не обрывается, а гаснет: дальше 2028-го
   роадмапа ещё нет. Маска заодно гасит и бегущий по ней блик. */
.s-roadmap__stage:last-child .s-roadmap__rail {
  bottom: 0;
  -webkit-mask-image: linear-gradient(var(--rail-angle), #000 25%, transparent);
          mask-image: linear-gradient(var(--rail-angle), #000 25%, transparent);
}
.s-roadmap__stage.is-revealed .s-roadmap__rail { transform: scaleY(1); }

/* Участок линии до ближайшего этапа и сразу за ним — акцентный,
   дальше линия гаснет до обычной границы. */
.s-roadmap__stage--next {
  --rail: linear-gradient(
    var(--rail-angle),
    var(--c-accent),
    color-mix(in srgb, var(--c-accent) 55%, transparent)
  );
}
.s-roadmap__stage--next + .s-roadmap__stage {
  --rail: linear-gradient(
    var(--rail-angle),
    color-mix(in srgb, var(--c-accent) 55%, transparent),
    var(--c-line)
  );
}

/* Блик, бегущий по рельсу. Класс .ms-signal задаёт ритм (8s, linear),
   а направление подменяем именем keyframes: вертикально — своим,
   горизонтально — библиотечным. Селектор из двух классов гарантирует
   приоритет над .ms-signal независимо от порядка файлов. */
.s-roadmap .s-roadmap__spark {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent, var(--c-accent), transparent);
  animation-name: ms-roadmap-drop;
}
.s-roadmap__stage:nth-child(2) .s-roadmap__spark { animation-delay: calc(2s * var(--motion)); }
.s-roadmap__stage:nth-child(3) .s-roadmap__spark { animation-delay: calc(4s * var(--motion)); }
.s-roadmap__stage:nth-child(4) .s-roadmap__spark { animation-delay: calc(6s * var(--motion)); }

/* Вертикальный близнец ms-signal: тот же профиль, другая ось. */
@keyframes ms-roadmap-drop {
  0%   { transform: translateY(-100%); }
  25%  { transform: translateY(100%); }
  100% { transform: translateY(100%); }
}

/* ── Точка на линии ────────────────────────────────────────────────── */
/* outline вместо box-shadow: кольцо фона вырезает рельс под точкой и
   при этом не конфликтует с box-shadow-анимацией .ms-pulse-ring. */

.s-roadmap__node,
.s-roadmap__ping {
  position: absolute;
  left: -5px;
  top: 0;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  pointer-events: none;
}

.s-roadmap__node {
  background: var(--c-bg);
  border: 1.5px solid var(--c-dim);
  outline: 4px solid var(--c-bg);
  /* Точка проявляется чуть позже текста — вместе с началом прочерчивания
     линии. Появление ведёт отдельное свойство scale, а transform остаётся
     курсору (приём из cta.css): иначе задержка выхода досталась бы и
     hover'у, и точка реагировала бы на курсор с опозданием в полсекунды. */
  scale: 0.2;
  transition:
    scale var(--t-base) var(--ease-out)
      calc(var(--reveal-delay, 0s) + var(--t-base)),
    transform var(--t-base) var(--ease-out),
    border-color var(--t-base) var(--ease-out);
}
.s-roadmap__stage.is-revealed .s-roadmap__node { scale: 1; }

.s-roadmap__stage--next .s-roadmap__node {
  background: var(--c-accent);
  border-color: var(--c-accent);
}

/* Расходящееся кольцо — «сигнал пошёл». До появления этапа его не видно:
   у всего <li> ещё opacity 0 от data-reveal. */
.s-roadmap__ping { border: 1.5px solid var(--c-accent); }

.s-roadmap__stage:hover .s-roadmap__node { transform: scale(1.35); }
.s-roadmap__stage:hover .s-roadmap__rail { filter: brightness(1.7); }

/* ── Содержимое этапа ──────────────────────────────────────────────── */

.s-roadmap__when {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--c-muted);
}

/* Квартал не переносится по пробелу: рядом с бейджем колонка узкая,
   и «Q4» с «2026» разъехались бы по разным строкам. */
.s-roadmap__date { white-space: nowrap; }

.s-roadmap__badge {
  display: inline-flex;
  align-items: center;
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--c-accent) 14%, transparent);
  color: var(--c-accent);
}

.s-roadmap__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--c-text);
  transition: transform var(--t-base) var(--ease-out);
}
.s-roadmap__stage:hover .s-roadmap__name { transform: translateX(3px); }

.s-roadmap__text {
  max-width: 34ch;
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--c-muted);
  text-wrap: pretty;
  transition: color var(--t-base) var(--ease-out);
}
.s-roadmap__stage:hover .s-roadmap__text { color: var(--c-text); }

/* ── Горизонтальная линия времени ──────────────────────────────────── */
/* Единственный брейкпоинт секции: колонка этапов разворачивается
   в четыре колонки, рельс переезжает сверху. */

@media (min-width: 880px) {
  .s-roadmap .s-roadmap__head {
    grid-template-columns: minmax(0, 1fr) minmax(0, clamp(320px, 33vw, 480px));
    gap: var(--grid-gap-lg);
    align-items: end;
  }

  /* Этапы делят одну сетку строк: дата → название → описание. Без этого
     бейдж «следующий этап» распирает первую строку первого этапа, и его
     заголовок съезжает с общей линии соседних: на 8px, а в начале
     диапазона, где бейдж переносится под дату, — на целую строку.
     subgrid держит все четыре колонки на одних направляющих. */
  .s-roadmap__track {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: auto auto auto;
    column-gap: var(--sp-6);
    row-gap: var(--sp-3);
    --rail-angle: 90deg;
  }

  .s-roadmap__stage {
    grid-row: span 3;
    display: grid;
    grid-template-rows: subgrid;
    row-gap: var(--sp-3);
    padding-left: 0;
    padding-top: var(--sp-7);
  }
  .s-roadmap__stage--next::before {
    inset: calc(var(--sp-5) * -1) calc(var(--sp-5) * -1) calc(var(--sp-6) * -1);
  }

  .s-roadmap__rail {
    left: 0;
    right: calc(var(--sp-6) * -1);
    top: 0;
    bottom: auto;
    width: auto;
    height: 1px;
    transform: scaleX(0);
    transform-origin: left center;
  }
  /* bottom сбрасываем явно: вертикальное правило выше весит больше
     и иначе дотянулось бы сюда, переопределив bottom: auto. */
  .s-roadmap__stage:last-child .s-roadmap__rail { right: 0; bottom: auto; }
  .s-roadmap__stage.is-revealed .s-roadmap__rail { transform: scaleX(1); }

  .s-roadmap .s-roadmap__spark {
    background: linear-gradient(90deg, transparent, var(--c-accent), transparent);
    animation-name: ms-signal;
  }

  .s-roadmap__node,
  .s-roadmap__ping {
    left: 0;
    top: -5px;
  }

  .s-roadmap__text { max-width: 28ch; }
}

/* ── Доступность ───────────────────────────────────────────────────── */
/* При reduced-motion animations.css сразу показывает содержимое
   [data-reveal], не дожидаясь JS. Рельс и точки держатся на .is-revealed,
   поэтому их конечное состояние выставляем здесь — иначе линия времени
   осталась бы без линии до того, как отработает reveal.js. */

@media (prefers-reduced-motion: reduce) {
  .s-roadmap__rail { transform: none; }
  .s-roadmap__node { scale: none; }
}