/**
 * Группа бегунов с freerun-сайта (landing about): 6 силуэтов × 8 поз.
 * Здесь — проход от заголовка до края экрана: старт/финиш прозрачные.
 */

.sd-hero {
  position: relative;
  /* --sd-left задаёт JS (left заголовка в viewport) — дорожка до правого края. */
  --sd-left: 0px;
}

.sd-lane {
  position: absolute;
  left: 0;
  /* В нижнем поле hero (padding-bottom у .sd-hero / #app .sd-hero). */
  top: auto;
  bottom: 0.35em;
  height: 0.06em;
  width: max(100%, calc(100vw - var(--sd-left)));
  border-radius: 0.03em;
  background: color-mix(in srgb, var(--brand-navy, #0a2540) 18%, transparent);
  pointer-events: none;
  overflow: visible;
  /* em бегунов — от кегля дорожки, не от body (иначе силуэты ~7px). */
  font-size: clamp(2.4rem, 3.2vw + 1.2rem, 3.6rem);
  clip-path: inset(-0.85em 0 -0.2em 0);
}

.sd-run {
  position: absolute;
  left: 0;
  bottom: 0.02em;
  width: 5.5%;
  height: 0.55em;
  overflow: hidden;
  color: var(--brand-red, #c8102e);
  --lap: 18s;
  animation: sd-lap var(--lap) linear infinite;
}

.sd-run i {
  display: flex;
  width: 800%;
  height: 100%;
  animation: sd-stride 0.9s steps(8) infinite;
}

.sd-run svg {
  flex: none;
  width: 12.5%;
  height: 100%;
}

@keyframes sd-stride {
  to { transform: translateX(-100%); }
}

/* Старт у заголовка (opacity 0) → видимы → прозрачные у края экрана. */
@keyframes sd-lap {
  0% { transform: translateX(0); opacity: 0; }
  8% { opacity: 0.9; }
  88% { opacity: 0.9; }
  100% { transform: translateX(1560%); opacity: 0; }
}

.sd-run--b { --lap: 24.5s; height: 0.44em; color: var(--brand-navy, #0a2540); }
.sd-run--c { --lap: 22.8s; height: 0.5em; }
.sd-run--d { --lap: 26s; height: 0.4em; color: var(--desk-mut, #5b6068); }
.sd-run--e { --lap: 25.2s; height: 0.48em; color: var(--brand-navy, #0a2540); }
.sd-run--f { --lap: 20s; height: 0.53em; }

.sd-run--b i { animation-duration: 0.98s; }
.sd-run--c i { animation-duration: 1.06s; }
.sd-run--d i { animation-duration: 0.92s; }
.sd-run--e i { animation-duration: 1.02s; }
.sd-run--f i { animation-duration: 0.95s; }

@media (min-width: 900px) {
  .sd-run { animation-duration: calc(var(--lap) * 1.2); }
}
@media (min-width: 1250px) {
  .sd-run { animation-duration: calc(var(--lap) * 1.28); }
}

@media (prefers-reduced-motion: reduce) {
  .sd-run,
  .sd-run i { animation: none; }
  .sd-run--b,
  .sd-run--c,
  .sd-run--d,
  .sd-run--e,
  .sd-run--f { display: none; }
  .sd-run { opacity: 0.55; transform: translateX(12%); }
}

/* Табло арены: светлые фигуры на тёмном фоне. */
.theme-board .sd-lane {
  font-size: clamp(2.8rem, 5.5vh, 4.2rem);
  background: color-mix(in srgb, var(--board-fg, #fff) 28%, transparent);
}
.theme-board .sd-run { color: var(--gold, #ffcf4a); }
.theme-board .sd-run--b { color: var(--run, #5dff8a); }
.theme-board .sd-run--c { color: var(--board-fg, #fff); }
.theme-board .sd-run--d { color: var(--board-mut, #9aa3b2); }
.theme-board .sd-run--e { color: var(--run, #5dff8a); }
.theme-board .sd-run--f { color: var(--gold, #ffcf4a); }