/* ════════════════════════════════════════════════════════════════════
   Секция 04 — «Фишки». Семь карточек, у каждой свой живой мини-интерфейс.

   Принципы файла:
   • цвет/типографика/ритм — только токены; «сырые» px остались лишь
     внутри декоративных рисунков (аватар 26px, переключатель 34×20,
     превью 72×48) — контракт это прямо разрешает;
   • движение — переиспользование ms-* из animations.css; собственный
     кейфрейм ровно один (ms-features-row) и живёт здесь;
   • анимируются transform / opacity / filter / box-shadow / background —
     ничего, что заставляет браузер пересчитывать раскладку секции.
   ════════════════════════════════════════════════════════════════════ */

/* ── Каркас секции ─────────────────────────────────────────────────── */

/* Лиловый ореол за сеткой: широкий, мягкий, дышит вместе с .ms-breathe.
   Размеры в процентах — за вьюпорт не вылезет (.page обрезает). */
.s-features__halo {
  inset: -6% -14% auto;
  height: 58%;
}

.s-features__groups {
  display: flex;
  flex-direction: column;
  gap: var(--grid-gap);
}

.s-features__grid {
  display: grid;
  /* карточки в ряду разной высоты — stretch держит нижний край ровным,
     поэтому мини-интерфейсы (margin-top: auto) встают на одну линию */
  align-items: stretch;
  gap: var(--sp-6);
}

.s-features__grid--lead { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
/* 218px подобраны так, чтобы четвёртая колонка появлялась ровно на той же
   ширине, что и третья в верхней сетке (3×300 + 2×24 ≈ 4×218 + 3×24):
   обе сетки перестраиваются одновременно, без «лесенки». */
.s-features__grid--rest { grid-template-columns: repeat(auto-fit, minmax(min(100%, 218px), 1fr)); }

/* Единственный медиазапрос секции, и он про перестройку сетки:
   на планшете и узком ноутбуке auto-fit выдаёт для четвёрки «3 + сирота».
   2×2 держит ритм и совпадает по ширине колонок с верхней сеткой. */
@media (min-width: 720px) and (max-width: 1099px) {
  .s-features__grid--rest { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Карточка ──────────────────────────────────────────────────────── */

/* Вариация примитива в границах секции: макет плотнее системного .card. */
.s-features .card {
  gap: var(--sp-5);
  padding: var(--sp-6);
}

.s-features__card {
  isolation: isolate; /* чтобы подсветка ::before легла над фоном карточки */
  /* .card переносит transform/border/background; добавляем тень */
  transition:
    transform var(--t-base) var(--ease-out),
    border-color var(--t-base) var(--ease-out),
    background var(--t-base) var(--ease-out),
    box-shadow var(--t-base) var(--ease-out);
}

/* Тёплое пятно сверху на наведении — чистая opacity, без пересчёта раскладки. */
.s-features__card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(120% 90% at 50% -25%,
              color-mix(in srgb, var(--c-accent) 15%, transparent), transparent 72%);
  opacity: 0;
  transition: opacity var(--t-base) var(--ease-out);
  pointer-events: none;
}
.s-features__card:hover::before { opacity: 1; }

/* [data-reveal].is-revealed гасит transform с той же специфичностью,
   что и .card--hover:hover, и стоит позже в каскаде — возвращаем подъём
   с весом секции, заодно подкладывая тень. */
.s-features__card.card--hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
}

.s-features__copy {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.s-features__card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  /* Резерв под две строки заголовка: «Печать подлинности» и «Соседский
     режим» в узкой колонке переносятся, и без резерва абзацы соседних
     карточек разъезжаются по вертикали — ритм ряда рвётся. */
  min-height: calc(var(--fs-lg) * var(--lh-snug) * 2);
}

/* Размеры заголовков карточек подогнаны под макет (22px / 18px на 1440):
   системный .card__title крупнее и рвёт строку в трёхколоночной сетке. */
.s-features .card__title { font-size: var(--fs-h4); }
.s-features__card--sm .card__title { font-size: var(--fs-lg); }
.s-features__card--sm .card__text  { font-size: var(--fs-sm); }

.s-features__card-icon {
  transition:
    color var(--t-base) var(--ease-out),
    transform var(--t-base) var(--ease-out);
}
.s-features__card:hover .s-features__card-icon {
  color: var(--c-accent-2);
  transform: rotate(-8deg) scale(1.08);
}

/* ── Общее для мини-интерфейсов ────────────────────────────────────── */

.s-features__demo {
  margin-top: auto; /* прижимает рисунок к низу карточки */
  border-radius: var(--r-lg);
  transition: border-color var(--t-base) var(--ease-out);
}

/* ── 1. Каналы вместо камер ────────────────────────────────────────── */

.s-features__channels {
  border: 1px solid var(--c-line);
  background: var(--c-bg);
  overflow: hidden;
}
.s-features__card:hover .s-features__channels {
  border-color: color-mix(in srgb, var(--c-accent) 26%, transparent);
}

.s-features__chan-list {
  display: flex;
  flex-direction: column;
}

.s-features__chan {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--c-line-soft);
  /* волна подсветки строк идёт в такт с точками «эфир» */
  animation: ms-features-row calc(5.4s * var(--motion)) ease-in-out infinite;
  animation-delay: calc(var(--live-delay, 0s) * var(--motion));
}
.s-features__chan:last-child { border-bottom: 0; }

.s-features__chan-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.s-features__chan-name {
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: var(--lh-normal);
  color: var(--c-text);
}
.s-features__chan-sub {
  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);
  color: var(--c-dim);
  white-space: nowrap;
}
/* Точка «в эфире»: .ms-live задаёт шорткат animation (сбрасывая delay),
   фазу добавляем здесь — файл секции идёт в каскаде позже. */
.s-features__chan-led {
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c-accent);
  animation-delay: calc(var(--live-delay, 0s) * var(--motion));
}

.s-features__avatars {
  display: flex;
  flex-shrink: 0;
}
.s-features__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--c-bg);
  background: color-mix(in srgb, var(--c-accent-2) 22%, var(--c-bg));
  font-size: var(--fs-mono-sm);
  font-weight: 600;
  line-height: 1;
  color: var(--c-text);
  transition: transform var(--t-base) var(--ease-out);
}
.s-features__avatar--deep { background: color-mix(in srgb, var(--c-accent-2) 36%, var(--c-bg)); }
.s-features__avatar + .s-features__avatar { margin-left: -8px; }
/* стопка «расходится» на наведении — только transform */
.s-features__card:hover .s-features__avatar + .s-features__avatar { transform: translateX(5px); }

/* ── 2. Гостевые пропуска ──────────────────────────────────────────── */

.s-features__pass {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid color-mix(in srgb, var(--c-accent-2) 40%, transparent);
  background: color-mix(in srgb, var(--c-accent-2) 7%, var(--c-bg));
}
/* Рамка отвечает на курсор в своём же цвете — как у «Каналов». */
.s-features__card:hover .s-features__pass {
  border-color: color-mix(in srgb, var(--c-accent-2) 62%, transparent);
}

.s-features__pass-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
}
.s-features__pass-kind { color: var(--c-accent-2); }
.s-features__pass-state {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--c-muted);
  white-space: nowrap;
}
.s-features__pass-led { color: var(--c-accent); } /* .dot красится currentColor */

.s-features__pass-body {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.s-features__pass-who {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  min-width: 0;
}
.s-features__pass-name {
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: var(--lh-normal);
  color: var(--c-text);
}
.s-features__pass-when {
  font-size: var(--fs-2xs);
  line-height: var(--lh-normal);
  color: var(--c-muted);
}
.s-features__pass-revoke { flex-shrink: 0; }

.s-features__pass-log {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding-top: var(--sp-3);
  border-top: 1px dashed var(--c-line-strong);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  line-height: var(--lh-normal);
  color: var(--c-dim);
}

/* ── 3. Поиск словами ──────────────────────────────────────────────── */

.s-features__search {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.s-features__search-field {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-lg);
  border: 1px solid var(--c-line-strong);
  background: var(--c-bg);
  overflow: hidden; /* строка набора не выдавливает поле на узких экранах */
  transition: border-color var(--t-base) var(--ease-out);
}
.s-features__card:hover .s-features__search-field {
  border-color: color-mix(in srgb, var(--c-accent-2) 45%, transparent);
}

.s-features__search-icon {
  flex-shrink: 0;
  color: var(--c-dim);
}
/* .ms-type раскрывает max-width строки — элемент маленький и с overflow,
   раскладка секции от этого не двигается. */
.s-features__search-query {
  display: inline-block;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: bottom;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--c-text);
}
.s-features__search-caret {
  flex-shrink: 0;
  width: 2px;
  height: 18px;
  border-radius: var(--r-xs);
  background: var(--c-accent-2);
}

.s-features__hit {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--r-lg);
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  /* .s-features__demo здесь не применяется (это вложенный блок) —
     transition нужен свой, чтобы рамка ехала вместе с полем поиска. */
  transition: border-color var(--t-base) var(--ease-out);
}
.s-features__card:hover .s-features__hit {
  border-color: color-mix(in srgb, var(--c-accent-2) 45%, transparent);
}
.s-features__hit-thumb {
  position: relative;
  display: block;
  width: 72px;
  height: 48px;
  flex-shrink: 0;
  border-radius: var(--r-sm);
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 60% at 70% 80%,
      color-mix(in srgb, var(--c-warn) 22%, transparent), transparent 70%),
    linear-gradient(180deg, var(--c-surface-2), color-mix(in srgb, var(--c-bg) 78%, var(--c-surface)));
}
.s-features__hit-time {
  position: absolute;
  right: var(--sp-1);
  bottom: var(--sp-1);
  padding: 1px var(--sp-1);
  border-radius: var(--r-xs);
  background: var(--c-scrim);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-xs);
  line-height: var(--lh-normal);
  color: var(--c-text);
}
.s-features__hit-meta {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  min-width: 0;
}
.s-features__hit-title {
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: var(--lh-normal);
  color: var(--c-text);
}
.s-features__hit-tag {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: var(--ls-mono);
  line-height: var(--lh-normal);
  color: var(--c-accent-2);
}

/* ── 4. Дайджест дня ───────────────────────────────────────────────── */

.s-features__digest {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.s-features__timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--sp-1);
  height: var(--sp-7);
}
/* Кадры ленты: оттенки собраны из --c-surface-2 подмесом текста,
   чтобы не заводить «сырых» hex. */
.s-features__frame {
  border-radius: var(--r-xs);
  background: var(--c-surface-2);
  animation-delay: calc(var(--frame-delay, 0s) * var(--motion));
}
.s-features__frame--a { background: color-mix(in srgb, var(--c-surface-2) 98%, var(--c-text)); }
.s-features__frame--b { background: color-mix(in srgb, var(--c-surface-2) 96%, var(--c-text)); }
.s-features__frame--hit {
  background: color-mix(in srgb, var(--c-accent-2) 24%, var(--c-bg));
  border: 1.5px solid var(--c-accent-2);
}

/* Плейхед абсолютный и шириной 2px: .ms-playhead двигает его left,
   раскладку ленты это не трогает. */
.s-features__playhead {
  position: absolute;
  top: calc(var(--sp-1) * -1);
  bottom: calc(var(--sp-1) * -1);
  left: 0;
  width: 2px;
  border-radius: var(--r-xs);
  background: var(--c-accent-2);
  box-shadow: 0 0 8px var(--c-accent-2);
}

.s-features__digest-meta {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: var(--ls-mono);
  line-height: var(--lh-normal);
  color: var(--c-dim);
}
.s-features__digest-clip { color: var(--c-accent-2); }

/* ── 5. Ghost Mode ─────────────────────────────────────────────────── */

.s-features__ghost {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.s-features__ghost-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}
.s-features__ghost-lbl {
  font-size: var(--fs-2xs);
  line-height: var(--lh-normal);
  color: var(--c-muted);
}
.s-features__ghost-lbl--on { color: var(--c-text); }

/* Геометрия тумблера — часть рисунка; классы ms-track / ms-knob красят трек
   и двигают ручку. */
.s-features__switch {
  position: relative;
  flex-shrink: 0;
  width: 34px;
  height: 20px;
  border-radius: var(--r-pill);
  background: var(--c-line);
}
.s-features__switch--on { background: var(--c-accent); }

.s-features__knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--c-dim);
}
.s-features__knob--on {
  left: 16px;
  background: var(--c-bg);
}

/* ── 6. Печать подлинности ─────────────────────────────────────────── */

.s-features__seal {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--r-md);
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  /* без трекинга: с ним метка времени не влезает в колонку одной строкой */
  line-height: var(--lh-normal);
  color: var(--c-muted);
}
.s-features__card:hover .s-features__seal {
  border-color: color-mix(in srgb, var(--c-accent) 26%, transparent);
}
.s-features__seal-check {
  flex-shrink: 0;
  color: var(--c-accent);
}
/* Исходное состояние для .ms-draw: галочка «не нарисована».
   При prefers-reduced-motion анимация длится 0.01ms и элемент
   возвращается к этому стилю — без снятия offset галочка просто
   исчезла бы, поэтому там сразу рисуем её целиком. */
.s-features__seal-draw {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
}
@media (prefers-reduced-motion: reduce) {
  .s-features__seal-draw { stroke-dashoffset: 0; }
}
.s-features__seal-text { min-width: 0; }

/* ── 7. Соседский режим ────────────────────────────────────────────── */

.s-features__neighbor {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--c-accent-2) 6%, var(--c-bg));
  border: 1px solid color-mix(in srgb, var(--c-accent-2) 40%, transparent);
}
.s-features__card:hover .s-features__neighbor {
  border-color: color-mix(in srgb, var(--c-accent-2) 62%, transparent);
}
.s-features__neighbor-ask {
  font-size: var(--fs-2xs);
  line-height: var(--lh-normal);
  color: var(--c-text);
}
.s-features__neighbor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

/* ── Собственный кейфрейм секции ───────────────────────────────────── */

/* Строка канала коротко подсвечивается — «по этому эфиру пошёл кадр».
   Период 5.4s = 3 × 1.8s цикла .ms-live, а гребень подсветки стоит на
   33.3% (ровно 1.8s) — там, где ms-pulse возвращает точке «в эфире»
   полную яркость. Так строка и её точка вспыхивают одним движением;
   на 6% гребень приходился на провал пульса, и вспышки выглядели
   несвязанными. Общая для строки и точки задержка .6s/1.2s сохраняет
   сведение фаз и гонит волну сверху вниз. */
@keyframes ms-features-row {
  0%, 27%     { background-color: transparent; }
  33.3%, 39%  { background-color: color-mix(in srgb, var(--c-accent) 8%, transparent); }
  46%, 100%   { background-color: transparent; }
}