/* ════════════════════════════════════════════════════════════════════
   #why — «Почему my и почему .cc»

   Две меганадписи (Unbounded 700, --fs-mega) с пояснениями и тёмная
   панель-антитеза «Обычно всё наоборот.». Панель на десктопе — сетка
   «заголовок + три пункта», на узких экранах складывается в колонку.

   Движение: появление через [data-reveal], внутренний каскад панели —
   через .is-revealed + finite-анимации. Базовое (неанимированное)
   состояние каждого элемента = конечное, поэтому без JS и при
   prefers-reduced-motion секция выглядит корректно.
   Анимируются только background-position / transform / opacity / filter —
   ничего, что пересчитывает layout.
   ════════════════════════════════════════════════════════════════════ */

/* ── Декоративные слои ─────────────────────────────────────────────── */

.s-why__dots { opacity: 0.55; }

/* Ореолы «под буквами»: лиловый под my, зелёный под .cc.
   Геометрия в процентах — часть рисунка, не системы. */
.s-why__halo {
  width: min(58%, 680px);
  aspect-ratio: 5 / 4;
}
.s-why__halo--my { top: -6%; left: -8%; }
.s-why__halo--cc { top:  2%; right: -10%; }

/* ── Вертикальный ритм секции ──────────────────────────────────────── */

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

/* ── Меганадписи ───────────────────────────────────────────────────── */

.s-why__word {
  display: flex;
  flex-direction: column;
  gap: var(--sp-7);
}
/* Цвет колонки задаётся один раз и достаётся и надписи, и <strong>. */
.s-why__word--my { --s-why-ink: var(--c-accent-2); }
.s-why__word--cc { --s-why-ink: var(--c-accent); }

.s-why__mega {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-mega);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-mega);
  color: var(--s-why-ink);
  /* Мягкое свечение буквы. Статичное: анимировать filter на 128px
     тексте дорого, за «дыхание» отвечают ореолы секции. */
  filter: drop-shadow(0 0 var(--sp-9) color-mix(in srgb, var(--s-why-ink) 24%, transparent));
}

.s-why__dot { color: var(--s-why-ink); }

.s-why__ink { display: inline-block; }

/* Блик, раз в цикл медленно проходящий по букве.
   Двигается только background-position; вне поддержки background-clip
   буква остаётся просто залитой цветом. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .s-why__ink {
    background-image: linear-gradient(100deg,
      var(--s-why-ink) 0 38%,
      color-mix(in srgb, var(--s-why-ink) 42%, var(--c-text)) 48%,
      var(--s-why-ink) 58%);
    background-size: 260% 100%;
    background-position: 100% 0;
    /* no-repeat, а не repeat-x: картинка и так вдвое шире буквы, а
       соседний тайл заводит в кадр второй блик посреди прохода. */
    background-repeat: no-repeat;
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: ms-why-sweep calc(9s * var(--motion)) var(--ease-soft) infinite;
  }
  /* Две буквы бликуют не в такт. */
  .s-why__word--cc .s-why__ink { animation-delay: calc(1.8s * var(--motion)); }
}

@keyframes ms-why-sweep {
  0%, 24%   { background-position: 100% 0; }
  64%, 100% { background-position: 0 0; }
}

.s-why__note {
  max-width: 25em; /* 500px при --fs-lead = 20px, как в макете */
  font-size: var(--fs-lead);
  line-height: var(--lh-relaxed);
  color: var(--c-muted);
}
.s-why__em {
  font-weight: 600;
  color: var(--s-why-ink);
}

/* ── Панель «Обычно всё наоборот.» ─────────────────────────────────── */

/* Боковое поле панели держим переменной: по нему же выравнивается
   верхняя кромка .s-why__edge — иначе линия и текст разъезжаются на
   всех ширинах, где clamp ещё не упёрся в максимум. */
.card.s-why__panel {
  --s-why-pad: clamp(var(--sp-5), 3.4vw, var(--sp-8));
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  padding-block: var(--sp-7);
  padding-inline: var(--s-why-pad);
}

/* Макетная раскладка «300px + три пункта» — только когда она помещается
   без сжатия текста; ниже панель складывается в колонку. */
@media (min-width: 1120px) {
  .card.s-why__panel {
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    gap: var(--sp-8);
    align-items: start;
  }
}

.s-why__panel-title { text-wrap: balance; }

.s-why__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: var(--sp-6) var(--sp-8);
}

/* Цвет строки уже задан примитивом .bullet — повторять его здесь нечего. */

/* Тонкая линия, прочерчивающаяся по верхней кромке панели при появлении. */
.s-why__edge {
  position: absolute;
  top: 0;
  left: var(--s-why-pad);
  right: var(--s-why-pad);
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    color-mix(in srgb, var(--c-live) 55%, transparent),
    transparent);
  pointer-events: none;
}

/* ── Каскад внутри панели ──────────────────────────────────────────── */
/* Анимации навешиваются только вместе с .is-revealed, а базовое
   состояние элементов уже конечное: без JS ничего не «залипает».

   Отсчёт начинаем не с нуля: сама панель въезжает [data-reveal] за
   --t-slow (0.6s), и всё, что стартует раньше ~0.25s, проходит под
   ещё прозрачным фоном — каскада никто не видит. 0.28s — та же точка
   входа, что у каскада тарифов, дальше шаг 80мс. */

.s-why__panel.is-revealed .s-why__edge {
  animation: ms-why-edge calc(0.9s * var(--motion)) var(--ease-out)
             calc(0.28s * var(--motion)) backwards;
}

.s-why__panel.is-revealed .s-why__bad {
  animation: ms-why-rise calc(0.6s * var(--motion)) var(--ease-out) backwards;
}
.s-why__panel.is-revealed .s-why__bad:nth-child(1) { animation-delay: calc(0.36s * var(--motion)); }
.s-why__panel.is-revealed .s-why__bad:nth-child(2) { animation-delay: calc(0.44s * var(--motion)); }
.s-why__panel.is-revealed .s-why__bad:nth-child(3) { animation-delay: calc(0.52s * var(--motion)); }

@keyframes ms-why-edge {
  from { opacity: 0; transform: scaleX(0); }
}

@keyframes ms-why-rise {
  from { opacity: 0; transform: translate3d(0, var(--sp-3), 0); }
}