/* ════════════════════════════════════════════════════════════════════
   03 — Ключевые преимущества.

   Сетка: широкая карточка-схема на всю ширину, ниже — авто-сетка
   остальных четырёх. Каждая карточка несёт «витрину»: маленькую сцену
   с живой иллюстрацией. Вся анимация внутри — transform / opacity /
   filter / box-shadow / background-color, ничего, что двигает layout.

   Пиксели встречаются только внутри мини-иллюстраций (размеры корпусов
   устройств, толщина обводки рамки распознавания) — это рисунок,
   а не система. Всё остальное — токены.
   ════════════════════════════════════════════════════════════════════ */

.s-benefits {
  isolation: isolate;
}

/* ── Ореолы под секцией ────────────────────────────────────────────── */

.s-benefits__halo {
  top: -12%;
  right: -8%;
  width: min(760px, 80%);
  height: min(560px, 62%);
}
.s-benefits__halo--low {
  top: auto;
  right: auto;
  bottom: -16%;
  left: -10%;
  width: min(620px, 68%);
  height: min(480px, 54%);
}

/* ── Сетка карточек ────────────────────────────────────────────────── */

.s-benefits__grid {
  display: grid;
  /* Бенто макета плотное: 24px, а не текучий --grid-gap (он доходит до
     48px и разваливает связку карточек). */
  gap: var(--sp-6);
  grid-template-columns: minmax(0, 1fr);
}

/* Две принципиальные перестройки, обе по смыслу, а не «на глаз»:
   ниже 760px карточка перестаёт читаться в паре — одна колонка;
   с 1120px помещается бенто макета — три колонки, где широкая
   карточка приватности занимает две из них. */
@media (min-width: 760px) {
  .s-benefits__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.s-benefits__card { gap: var(--sp-6); }
/* До трёх колонок широкая карточка занимает всю строку. */
.s-benefits__card--wide { grid-column: 1 / -1; }

@media (min-width: 1120px) {
  .s-benefits__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* В бенто макета она две трети строки, а не вся строка — иначе
     соседняя карточка уезжает вниз и сетка распадается на полосы. */
  .s-benefits__card--wide { grid-column: span 2; }
}

/* Кегль заголовков карточек — макетные 22px, а не общий 26px. */
.s-benefits .card__title { font-size: var(--fs-h4); }

.s-benefits__copy {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.s-benefits__text { max-width: 64ch; }

/* Тонкая жилка по верхней кромке широкой карточки: по ней раз в цикл
   пробегает импульс — «канал под напряжением». */
.s-benefits__wire {
  position: absolute;
  top: 0;
  inset-inline: var(--sp-7);
  height: 1px;
  overflow: hidden;
  background: var(--c-line-soft);
  pointer-events: none;
}
/* Бегунок во всю ширину жилки, свечение — градиентом внутри него:
   ms-signal возит элемент на ±100% его СОБСТВЕННОЙ ширины, поэтому узкий
   бегунок не успевал бы уйти за правый край и замирал бы посреди жилки.
   Тот же приём, что у .s-footer__beam-run и .s-hero__signal-beam. */
.s-benefits__wire-run {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0 31%,
    var(--c-accent) 50%,
    transparent 69% 100%);
}

/* ── Сцена под иллюстрацию ─────────────────────────────────────────── */

.s-benefits__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 140px; /* геометрия витрины: все пять сцен одной высоты */
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  background: var(--c-fill);
  border: 1px solid var(--c-line-soft);
  transition: border-color var(--t-base) var(--ease-out),
              background var(--t-base) var(--ease-out);
}
.s-benefits__stage--flow { padding: var(--sp-6); }

.s-benefits__card:hover .s-benefits__stage {
  border-color: color-mix(in srgb, var(--c-accent) 22%, transparent);
  background: var(--c-fill-hover);
}

/* Строчная развёртка поверх сцены — статичная текстура «эфира». */
.s-benefits__scan {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0.55;
}

/* ── 1. Схема: телефон → сервер без ключа → телевизор ──────────────── */

.s-benefits__flow {
  position: relative;
  display: grid;
  grid-template-columns:
    minmax(0, 1fr) auto minmax(0, 1.25fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
}

.s-benefits__node {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  min-width: 0;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-lg);
  background: var(--c-bg);
  border: 1px solid var(--c-line);
}
.s-benefits__node--server {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--c-accent-2) 55%, transparent);
}

.s-benefits__node-kind {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--c-accent);
}
.s-benefits__node-kind--alt { color: var(--c-accent-2); }
.s-benefits__node-kind svg { flex-shrink: 0; }

.s-benefits__node-name {
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: var(--lh-normal);
  color: var(--c-text);
}

/* Зашифрованный мусор: наполняется js/modules/live.js (`[data-noise]`),
   в разметке лежит правдоподобная заглушка — без JS дыры не будет.
   Медленное дыхание прозрачности добавляет «помех», не трогая layout. */
.s-benefits__noise {
  max-width: 100%;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-mono);
  color: var(--c-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.s-benefits__link {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-dim);
}
.s-benefits__link-dash { stroke: color-mix(in srgb, var(--c-accent) 70%, var(--c-dim)); }

/* Ниже 900px схема встаёт вертикально: стрелки разворачиваются,
   узлы выравниваются по центру колонки. */
@media (max-width: 900px) {
  .s-benefits__flow {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: var(--sp-2);
  }
  .s-benefits__node { width: 100%; max-width: 380px; }
  .s-benefits__link { width: 24px; height: 48px; }
  .s-benefits__link svg { transform: rotate(90deg); }
}

/* ── 2. Чипы совместимости ─────────────────────────────────────────── */

.s-benefits__chips {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  gap: var(--sp-2);
}
.s-benefits__chip { border-radius: var(--r-pill); }

/* ── 3. Парк экранов ───────────────────────────────────────────────── */

.s-benefits__devices {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: var(--sp-5) var(--sp-3);
  padding-bottom: var(--sp-2); /* место под ножку телевизора */
}

.s-benefits__device {
  position: relative;
  flex: none;
  border: 1.5px solid color-mix(in srgb, var(--c-text) 55%, transparent);
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--c-accent) 8%, transparent);
}
.s-benefits__device--tv      { width: 96px; height: 58px; }
.s-benefits__device--tablet  { width: 46px; height: 62px; }
.s-benefits__device--speaker { width: 54px; height: 40px; border-radius: 10px 10px 6px 6px; }
.s-benefits__device--phone   { width: 30px; height: 56px; border-radius: 7px; }
.s-benefits__device--watch   { width: 26px; height: 32px; border-radius: 8px; }

.s-benefits__stand {
  position: absolute;
  left: 50%;
  bottom: -8px;
  transform: translateX(-50%);
  width: 32px;
  height: 2px;
  background: color-mix(in srgb, var(--c-text) 55%, transparent);
}

/* ── 4. Два состояния: интернет / домашняя сеть ────────────────────── */

.s-benefits__states {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  width: 100%;
}

.s-benefits__state {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  background: var(--c-bg);
  border: 1px solid var(--c-line);
}
.s-benefits__state--bad { border-color: color-mix(in srgb, var(--c-live) 26%, transparent); }
.s-benefits__state--ok  { border-color: color-mix(in srgb, var(--c-accent) 26%, transparent); }

.s-benefits__state-name {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
  font-size: var(--fs-2xs);
  line-height: var(--lh-normal);
  color: var(--c-muted);
}
.s-benefits__state-name svg { flex-shrink: 0; }

.s-benefits__state-value {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-inline-start: auto; /* значение держится правого края и при переносе */
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-mono);
}
/* Приглушённый красный: --c-live в чистом виде на тексте слишком «кричит». */
.s-benefits__state-value--bad { color: color-mix(in srgb, var(--c-live) 75%, var(--c-text)); }
.s-benefits__state-value--ok  { color: var(--c-accent); }

.s-benefits__beacon {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  width: 6px;
  height: 6px;
}
.s-benefits__beacon-dot {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: currentColor;
}
.s-benefits__beacon-dot--bad { background: var(--c-live); }
.s-benefits__beacon-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid currentColor;
}

/* ── 5. Рамки распознавания ────────────────────────────────────────── */

.s-benefits__detect {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
}

.s-benefits__label {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  font-size: var(--fs-2xs);
  line-height: var(--lh-normal);
  color: var(--c-text);
}
.s-benefits__label--edge {
  border-color: transparent;
  background: color-mix(in srgb, var(--c-accent-2) 14%, transparent);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--c-accent-2);
}
.s-benefits__label--edge svg { flex-shrink: 0; }

/* Уголки рамки вспыхивают в такт ms-detect: та же длительность (4s),
   те же окна 10…22%, а animation-delay наследуется от носителя —
   от классов сдвига фазы на самой метке (d-2, d-4, d-5). */
@keyframes ms-benefits-corner {
  0%, 100% { opacity: 0; transform: scale(1.08); }
  10%, 22% { opacity: 1; transform: scale(1); }
}
.s-benefits__label--frame::before,
.s-benefits__label--frame::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  border: 1.5px solid currentColor;
  opacity: 0;
  pointer-events: none;
  animation: ms-benefits-corner calc(4s * var(--motion)) ease-in-out infinite;
  animation-delay: inherit;
}
.s-benefits__label--frame::before {
  top: -4px;
  left: -4px;
  border-right: 0;
  border-bottom: 0;
  border-radius: var(--r-xs) 0 0 0;
}
.s-benefits__label--frame::after {
  right: -4px;
  bottom: -4px;
  border-left: 0;
  border-top: 0;
  border-radius: 0 0 var(--r-xs) 0;
}