/* Главная. Подключается только на своих страницах. Перенесено из design/style.css (раздел 5).
   Анимация стопки (.stk-*): позиции и тайминги — из design/_tools/stack_anim.py,
   менять в скрипте и пересобирать, не руками. */

/* Цифры под кнопками — строкой, без карточек */
.hero-numbers { display: flex; flex-wrap: wrap; gap: var(--space-5); margin: var(--space-2) 0 0; }
.hero-numbers div { display: grid; gap: 2px; padding-left: var(--space-5); border-left: 1px solid color-mix(in srgb, var(--on-ink) 22%, transparent); }
.hero-numbers div:first-child { padding-left: 0; border-left: 0; }
.hero-numbers dt { font-size: var(--fs-xl); font-weight: var(--fw-bold); line-height: 1; letter-spacing: -0.02em; }
.hero-numbers dd { font-size: var(--fs-xs); opacity: 0.6; }

/* --- Иллюстрации главной (inline SVG): цвета только из переменных темы --- */
.hero-art { width: 100%; max-width: 440px; justify-self: center; color: var(--on-ink); }
.hero-art__svg { display: block; width: 100%; height: auto; overflow: visible; }

/* --- Картинка первого экрана: «полный цикл» ---
   --on: 0/1 — элемент «зажёгся» (объявлен в base.css); цвета считаются через color-mix. */

/* Фон за стопкой: сдвинут чуть вправо-вниз и повёрнут по часовой (сама стопка стоит ровно) */
.stk-bg { transform: translate(24px, 28px) rotate(4deg); transform-box: view-box; transform-origin: 50% 50%; }
.stk-glow__in { stop-color: var(--accent); stop-opacity: 0.16; }
.stk-glow__out { stop-color: var(--accent); stop-opacity: 0; }
.stk-grid line { stroke: currentColor; stroke-width: 1; opacity: 0.12; }
.stk-ring { fill: none; stroke: currentColor; stroke-width: 1.5; opacity: 0.3; }
.stk-spark { fill: var(--accent); opacity: 0.8; }

/* Слои */
.stk-top { fill: color-mix(in srgb, var(--accent) calc(var(--on) * 100%), var(--surface)); }
.stk-left { fill: color-mix(in srgb, color-mix(in srgb, var(--accent) 72%, #000) calc(var(--on) * 100%), var(--surface-2)); }
.stk-right { fill: color-mix(in srgb, color-mix(in srgb, var(--accent) 52%, #000) calc(var(--on) * 100%), var(--border)); }
.stk--code { --on: 1; }
/* «Зажжённая» подпись: лаймовая на чёрном блоке (светлая тема), чёрная на светлом блоке (тёмная тема) */
.hero-art { --stk-on-text: light-dark(var(--gl-color-accent), var(--gl-color-black)); }
.stk-label { font-family: var(--font-display); font-size: 15px; fill: color-mix(in srgb, var(--stk-on-text) calc(var(--on) * 100%), currentColor); opacity: calc(0.45 + var(--on) * 0.55); }
.stk-bullet { fill: color-mix(in srgb, var(--accent) calc(var(--on) * 100%), transparent); stroke: color-mix(in srgb, var(--accent) calc(var(--on) * 100%), currentColor); stroke-width: 1.5; }
.stk-code-label { font-family: var(--font-code); font-size: 16px; font-weight: 700; text-anchor: middle; fill: var(--on-accent); }

/* Стек: позиции по фазам. Элемент e (код = -1, слои 0..4) едет в фазах k > e. */
@keyframes stk-move-code {
  0.00% { transform: translateY(0px); }
  0.00% { transform: translateY(0px); }
  6.88% { transform: translateY(34px); }
  12.50% { transform: translateY(34px); }
  19.38% { transform: translateY(68px); }
  25.00% { transform: translateY(68px); }
  31.87% { transform: translateY(102px); }
  37.50% { transform: translateY(102px); }
  44.38% { transform: translateY(136px); }
  50.00% { transform: translateY(136px); }
  56.88% { transform: translateY(170px); }
  87.50% { transform: translateY(170px); }
  100.00% { transform: translateY(0px); }
}
.stk--code { animation: stk-move-code 8.0s ease-in-out infinite; }
@keyframes stk-move-0 {
  0.00% { transform: translateY(0px); }
  12.50% { transform: translateY(0px); }
  19.38% { transform: translateY(34px); }
  25.00% { transform: translateY(34px); }
  31.87% { transform: translateY(68px); }
  37.50% { transform: translateY(68px); }
  44.38% { transform: translateY(102px); }
  50.00% { transform: translateY(102px); }
  56.88% { transform: translateY(136px); }
  87.50% { transform: translateY(136px); }
  100.00% { transform: translateY(0px); }
}
.stk--0 { animation: stk-move-0 8.0s ease-in-out infinite; }
@keyframes stk-on-0 {
  0%, 6.75% { --on: 0; }
  6.88%, 87.50% { --on: 1; }
  100% { --on: 0; }
}
.stk--0 { animation: stk-move-0 8.0s ease-in-out infinite, stk-on-0 8.0s step-end infinite; }
.stk-tag--0 { animation: stk-on-0 8.0s step-end infinite; }
@keyframes stk-move-1 {
  0.00% { transform: translateY(0px); }
  25.00% { transform: translateY(0px); }
  31.87% { transform: translateY(34px); }
  37.50% { transform: translateY(34px); }
  44.38% { transform: translateY(68px); }
  50.00% { transform: translateY(68px); }
  56.88% { transform: translateY(102px); }
  87.50% { transform: translateY(102px); }
  100.00% { transform: translateY(0px); }
}
.stk--1 { animation: stk-move-1 8.0s ease-in-out infinite; }
@keyframes stk-on-1 {
  0%, 19.25% { --on: 0; }
  19.38%, 87.50% { --on: 1; }
  100% { --on: 0; }
}
.stk--1 { animation: stk-move-1 8.0s ease-in-out infinite, stk-on-1 8.0s step-end infinite; }
.stk-tag--1 { animation: stk-on-1 8.0s step-end infinite; }
@keyframes stk-move-2 {
  0.00% { transform: translateY(0px); }
  37.50% { transform: translateY(0px); }
  44.38% { transform: translateY(34px); }
  50.00% { transform: translateY(34px); }
  56.88% { transform: translateY(68px); }
  87.50% { transform: translateY(68px); }
  100.00% { transform: translateY(0px); }
}
.stk--2 { animation: stk-move-2 8.0s ease-in-out infinite; }
@keyframes stk-on-2 {
  0%, 31.75% { --on: 0; }
  31.87%, 87.50% { --on: 1; }
  100% { --on: 0; }
}
.stk--2 { animation: stk-move-2 8.0s ease-in-out infinite, stk-on-2 8.0s step-end infinite; }
.stk-tag--2 { animation: stk-on-2 8.0s step-end infinite; }
@keyframes stk-move-3 {
  0.00% { transform: translateY(0px); }
  50.00% { transform: translateY(0px); }
  56.88% { transform: translateY(34px); }
  87.50% { transform: translateY(34px); }
  100.00% { transform: translateY(0px); }
}
.stk--3 { animation: stk-move-3 8.0s ease-in-out infinite; }
@keyframes stk-on-3 {
  0%, 44.25% { --on: 0; }
  44.38%, 87.50% { --on: 1; }
  100% { --on: 0; }
}
.stk--3 { animation: stk-move-3 8.0s ease-in-out infinite, stk-on-3 8.0s step-end infinite; }
.stk-tag--3 { animation: stk-on-3 8.0s step-end infinite; }
@keyframes stk-move-4 {
  0.00% { transform: translateY(0px); }
  87.50% { transform: translateY(0px); }
  100.00% { transform: translateY(0px); }
}
.stk--4 { animation: stk-move-4 8.0s ease-in-out infinite; }
@keyframes stk-on-4 {
  0%, 56.75% { --on: 0; }
  56.88%, 87.50% { --on: 1; }
  100% { --on: 0; }
}
.stk--4 { animation: stk-move-4 8.0s ease-in-out infinite, stk-on-4 8.0s step-end infinite; }
.stk-tag--4 { animation: stk-on-4 8.0s step-end infinite; }

@media (prefers-reduced-motion: reduce) {
  .stk, .stk-tag { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  .metro__stop--current .metro__dot { animation: none; }
}

/* --- Как это работает: путь из шагов на одной линии --- */
.journey {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Пунктир, соединяющий иконки шагов */
.journey::before {
  content: '';
  position: absolute;
  top: 28px;
  left: 28px;
  right: 28px;
  border-top: 2px dashed var(--border);
}

.journey__step { position: relative; display: grid; align-content: start; gap: var(--space-2); }

.journey__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: var(--space-2);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 50%;
}

.journey__icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.journey__step--accent .journey__icon { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.journey__num { font-family: var(--font-code); font-size: var(--fs-xs); color: var(--muted); }
.journey__title { font-size: var(--fs-lg); font-weight: var(--fw-bold); }
.journey__step p { font-size: var(--fs-sm); }

/* --- Путь обучения: курсы направления как схема метро --- */
.metro {
  display: grid;
  /* столько колонок, сколько курсов в направлении (в макете было 9) */
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  margin: 0 0 var(--space-4);
  padding: var(--space-3) 0 var(--space-2);
  list-style: none;
}

.metro__stop { position: relative; }

/* Отрезок линии к станции; цвет — по статусу станции */
.metro__stop::before {
  content: '';
  position: absolute;
  top: 22px;
  right: 50%;
  width: 100%;
  height: 2px;
  background: var(--border);
}

.metro__stop:first-child::before { display: none; }
.metro__stop--done::before,
.metro__stop--current::before { top: 21px; height: 4px; background: var(--accent); }
.metro__stop--soon::before { background: repeating-linear-gradient(90deg, var(--border) 0 8px, transparent 8px 14px); }

.metro__stop {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 4px;
  padding: 0 4px;
  text-align: center;
}

.metro__stop a { display: grid; justify-items: center; gap: 4px; text-decoration: none; }

.metro__dot {
  position: relative;
  z-index: 1;
  width: 46px;
  height: 46px;
  margin-bottom: var(--space-3);
  background: var(--surface);
  border: 2px solid var(--ink);
  border-radius: 50%;
}

.metro__stop--done .metro__dot { background: var(--success); border-color: var(--success); }
.metro__stop--done .metro__dot::after { content: '✓'; position: absolute; inset: 0; display: grid; place-items: center; font-size: 18px; font-weight: var(--fw-bold); color: #fff; }
.metro__stop--current .metro__dot { background: var(--accent); border-color: var(--ink); animation: metro-pulse 2s ease-out infinite; }
.metro__stop--soon .metro__dot { border: 2px dashed var(--muted); }

@keyframes metro-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 70%, transparent); }
  100% { box-shadow: 0 0 0 16px transparent; }
}

.metro__step { font-family: var(--font-code); font-size: var(--fs-sm); color: var(--muted); }
.metro__name { font-size: var(--fs-lg); font-weight: var(--fw-bold); line-height: 1.2; letter-spacing: -0.01em; }
.metro__meta { font-size: var(--fs-sm); color: var(--muted); }
.metro__stop--current .metro__meta { padding: 1px 8px; color: var(--on-accent); background: var(--accent); border-radius: var(--radius-pill); }
.metro__stop--soon .metro__name { color: var(--muted); }
.metro__stop a:hover .metro__name { text-decoration: underline; }

.metro-legend { display: flex; flex-wrap: wrap; gap: var(--space-5); font-size: var(--fs-sm); color: var(--muted); }
.metro-legend span { display: inline-flex; align-items: center; gap: var(--space-2); }
.metro-legend__dot { width: 14px; height: 14px; background: var(--surface); border: 1.5px solid var(--ink); border-radius: 50%; }
.metro-legend__dot--done { background: var(--success); border-color: var(--success); }
.metro-legend__dot--current { background: var(--accent); }
.metro-legend__dot--soon { border: 1.5px dashed var(--muted); }