/* WOW-слой: живые диаграммы шагов, пульсы, счётчики, геймификация. */

/* --- диаграмма-созвездие шага --- */
.wow-constellation {
  width: 100%;
  height: auto;
  margin: 6px 0 14px;
  display: block;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg) 55%, transparent);
}
.wow-c-edge {
  stroke: var(--muted);
  stroke-opacity: 0.35;
  stroke-dasharray: 3 5;
  animation: wow-flow 1.7s linear infinite;
}
.wow-c-edge.is-main { stroke-opacity: 0.8; }
@keyframes wow-flow { to { stroke-dashoffset: -16; } }
.wow-c-node { cursor: pointer; }
.wow-c-node:hover circle { stroke-width: 2; }
/* пульс центрального узла созвездия: CSS вместо 42 вечных SMIL <animate> (перф);
   значения те же, что были в SMIL: fill-opacity 1;0.55;1 за 2.2s, линейно */
@keyframes wow-core-pulse { 0%, 100% { fill-opacity: 1; } 50% { fill-opacity: 0.55; } }
@media (prefers-reduced-motion: no-preference) {
  .wow-c-core { animation: wow-core-pulse 2.2s linear infinite; }
}
.wow-c-label {
  font-family: var(--mono);
  font-size: 7.5px;
  fill: var(--muted);
  pointer-events: none;
}
.wow-c-center-label {
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 600;
  fill: var(--fg);
  pointer-events: none;
}

/* --- карточка земли: мини-карта --- */
.land-card .wow-minimap {
  width: 100%;
  height: 64px;
  margin-top: 12px;
  display: block;
}
.wow-minimap .mm-line { stroke: var(--pc, var(--muted)); stroke-opacity: 0.4; stroke-dasharray: 2 4; animation: wow-flow 1.4s linear infinite; }
.wow-minimap .mm-dot { fill: var(--pc, var(--muted)); }

/* --- шаг: появление и активность --- */
.step { transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s; }
.step.is-active { box-shadow: 0 6px 26px rgba(0, 0, 0, 0.18); }
html[data-theme="light"] .step.is-active { box-shadow: 0 6px 22px rgba(30, 30, 30, 0.08); }
.step .wow-constellation { opacity: 0.85; transition: opacity 0.25s; }
.step.is-active .wow-constellation { opacity: 1; }

/* --- рельс: пружина тиков --- */
.rail-tick .t-n { transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); }
.rail-tick.is-active .t-n { transform: scale(1.25); }

/* --- квиз: награда --- */
.wow-badge {
  margin: 18px auto 6px;
  max-width: 380px;
  text-align: center;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  animation: wow-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.wow-badge .wb-rank {
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.wow-badge .wb-sub { color: var(--muted); font-size: 12.5px; margin-top: 6px; }
.wow-badge .wb-ico { font-size: 30px; display: block; margin-bottom: 6px; animation: wow-spin 1.2s ease; }
@keyframes wow-pop { from { opacity: 0; transform: scale(0.8) translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes wow-spin { from { transform: rotate(-180deg) scale(0.4); } to { transform: none; } }

/* --- kicker: живое подчёркивание --- */
.kicker { position: relative; padding-bottom: 6px; }
.kicker::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 42px; height: 1px;
  background: var(--muted);
  animation: wow-grow 2.4s ease-in-out infinite alternate;
}
@keyframes wow-grow { from { width: 42px; } to { width: 110px; } }

/* --- hero-stats: появление --- */
.hero-stat.reveal { transition: opacity 0.5s ease, transform 0.5s ease; }

@media (prefers-reduced-motion: reduce) {
  .wow-c-edge, .wow-minimap .mm-line, .kicker::after { animation: none !important; }
  .wow-badge { animation: none; }
  .rail-tick .t-n { transition: none; }
}

/* перф: у элементов вне вьюпорта (is-idle ставит wow.js через IntersectionObserver)
   анимации ставятся на паузу — созвездия/мини-карты/kicker'ы не перекрашиваются зря.
   Элемент при этом невидим, поэтому видимой разницы нет; на границе работает
   rootMargin 120px. */
.is-idle .wow-c-edge, .is-idle .mm-line, .is-idle .wow-c-core,
.kicker.is-idle::after { animation-play-state: paused; }

/* --- кейс из жизни в шаге --- */
.step-case {
  margin-top: 14px;
  padding: 12px 14px;
  border-left: 2px solid var(--pc, var(--muted));
  background: var(--subtle);
  border-radius: 0 8px 8px 0;
}
.step-case .case-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: 5px;
}
.step-case p { font-size: 13px; color: var(--fg); }

/* --- пути по странам --- */
.cp-root { max-width: 920px; margin: 0 auto; padding: 0 24px; display: grid; gap: 14px; }
.cp-band {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 22px;
}
.cp-head { display: flex; align-items: center; gap: 12px; }
.cp-flag { font-size: 22px; }
.cp-titlewrap h3 { font-size: 16px; }
.cp-intro { color: var(--muted); font-size: 13.5px; margin-top: 10px; max-width: 640px; }
.cp-chain { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-top: 14px; }
.cp-step {
  text-align: left;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  cursor: pointer;
  font-family: var(--sans);
  color: var(--fg);
  transition: border-color 0.15s;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cp-step:hover { border-color: var(--pc, var(--muted)); }
.cp-n { font-family: var(--mono); font-size: 10px; color: var(--pc, var(--muted)); }
.cp-t { font-size: 13px; font-weight: 600; }
.cp-q { font-size: 11.5px; color: var(--muted); }
/* A11y 1.4.3: убрана opacity 0.7 — muted на фоне кнопки давал ≈2.4–2.6:1, теперь
   var(--muted) без прозрачности: 5.4:1 (dark) / 4.5:1 (light) */
.cp-node { font-family: var(--mono); font-size: 10px; color: var(--muted); }
.cp-outcome { color: var(--fg); font-size: 13px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); }
@media (max-width: 860px) {
  .cp-root { padding: 0 20px; }
  .cp-step { min-height: 40px; }
}