/* Схема «два семейства — один ключ».
 *
 * Анимация здесь несёт смысл, а не украшает: пунктир бежит от знаков к ключу
 * и показывает направление потока. Поэтому она медленная и бесконечная —
 * это состояние системы, а не разовый эффект при появлении.
 */

.conv {
  margin: 0 auto var(--s-7);
  max-width: 52rem;
}

.conv__svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

/* ── Линии ── */

.conv__wire {
  fill: none;
  stroke: var(--c-border-strong);
  stroke-width: 1.5;
}

/* Бегущий пунктир. Длина штриха и просвета подобрана так, чтобы поток
   читался как отдельные пакеты, а не как ползущая сплошная линия. */
.conv__flow {
  fill: none;
  stroke: url(#convLine);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 2 26;
  animation: conv-flow 2.6s linear infinite;
}
.conv__flow--b { animation-delay: -1.3s; }

@keyframes conv-flow {
  from { stroke-dashoffset: 112; }
  to   { stroke-dashoffset: 0; }
}

/* ── Узлы ── */

.conv__disc {
  fill: var(--c-surface);
  stroke: none;
}
.conv__disc--key { fill: var(--c-surface-2); }

.conv__ring {
  fill: none;
  stroke: var(--c-border-strong);
  stroke-width: 1.5;
}
.conv__ring--key { stroke: var(--c-border-accent); }

.conv__halo {
  fill: none;
  stroke: var(--c-border);
  stroke-width: 1;
  opacity: 0.6;
}

.conv__keyglow { fill: color-mix(in srgb, var(--c-accent) 30%, transparent); }

/* Кольцо, расходящееся от ключа: показывает, что контур живой.
   Одно на всю схему — если пульсируют все узлы, внимание не собирается. */
.conv__pulse {
  fill: none;
  stroke: var(--c-accent);
  stroke-width: 1.5;
  transform-origin: 560px 150px;
  animation: conv-pulse 3.2s var(--ease-out) infinite;
}
@keyframes conv-pulse {
  0%   { transform: scale(1);    opacity: 0.5; }
  70%  { transform: scale(1.32); opacity: 0; }
  100% { transform: scale(1.32); opacity: 0; }
}

/* Знаки семейств чуть покачиваются в противофазе — этого хватает, чтобы
   схема не выглядела статичной картинкой, и не хватает, чтобы отвлекать. */
.conv__node--a { animation: conv-bob 6s var(--ease-in-out) infinite; }
.conv__node--b { animation: conv-bob 6s var(--ease-in-out) infinite reverse; }
@keyframes conv-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}

.conv__label {
  fill: var(--c-text-muted);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.conv__label--key { fill: var(--c-text-secondary); }

/* Движение — только украшение смысла, схема обязана читаться и без него. */
@media (prefers-reduced-motion: reduce) {
  .conv__flow,
  .conv__pulse,
  .conv__node--a,
  .conv__node--b { animation: none; }
  .conv__flow { stroke-dasharray: 2 14; opacity: 0.85; }
}

/* SVG масштабируется вместе с экраном, и на 390px подпись в 14 единиц
   отрисовалась бы кеглем около семи пикселей. Прятать схему нельзя — она
   объясняет продукт; поэтому на узком экране укрупняем подписи внутри
   системы координат, а самую длинную убираем. */
@media (max-width: 48rem) {
  .conv__label { font-size: 26px; }
  .conv__label--key { display: none; }
  .conv__flow { stroke-width: 4; stroke-dasharray: 3 30; }
  .conv__wire { stroke-width: 2.5; }
}