/* ──────────────────────────────────────────────────────────────────────
   Фоновые фото в секциях и две анимации.

   Фон секции — не то же самое, что фон первого экрана: там текста полторы
   строки, здесь заголовок, лид и ряд карточек. Поэтому вуаль плотнее и
   устроена по вертикали: густая там, где лежит текст, и прозрачнее ниже,
   где стоят непрозрачные карточки и фону есть где показаться.
   ────────────────────────────────────────────────────────────────────── */

.sec.has-media {
  position: relative;
  background: #fff;
  isolation: isolate;
}
.sec-media {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
.sec-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.sec-media::after {
  content: '';
  position: absolute;
  inset: 0;
}

/* Заголовок сверху, карточки ниже: густо вверху, свободнее внизу. */
/* Замер контраста (скриншот фона без текста + расчёт по WCAG) дал у лида
   4.69 при норме 4.5 — запас в четыре процента. Плотность середины поднята,
   чтобы не ходить по краю: фотографии это почти не стоило, а лид стал читаться
   с запасом. */
.sec-media--top::after {
  background: linear-gradient(180deg,
    rgba(255, 255, 255, .97) 0%,
    rgba(255, 255, 255, .94) 30%,
    rgba(255, 255, 255, .78) 58%,
    rgba(255, 255, 255, .82) 100%);
}

/* Текст слева, форма справа: густо слева, свободнее справа. */
.sec-media--left::after {
  background:
    linear-gradient(90deg,
      rgba(255, 255, 255, .97) 0%,
      rgba(255, 255, 255, .92) 34%,
      rgba(255, 255, 255, .6) 62%,
      rgba(255, 255, 255, .34) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, .7) 0%, transparent 22%, rgba(255, 255, 255, .7) 100%);
}

/* Карточки поверх фото должны быть непрозрачными: полупрозрачная карточка
   на фотографии превращает свой текст в кашу. */
.sec.has-media .card,
.sec.has-media .zform,
.sec.has-media .hero-form-card {
  background: #fff;
  box-shadow: 0 10px 30px rgba(13, 13, 20, .08);
}

@media (max-width: 980px) {
  /* На узком экране текст занимает всю ширину, боковая вуаль не спасает. */
  .sec-media--left::after,
  .sec-media--top::after {
    background: linear-gradient(180deg, rgba(255, 255, 255, .94) 0%, rgba(255, 255, 255, .9) 100%);
  }
}

/* ══════════════════════════════════════════════════════════════════════
   Анимация 1 — появление лесенкой.

   Карточки «С чего начинаем и в каком порядке» выходят по очереди, когда
   блок доезжает до экрана. Порядок шагов — смысл этого блока, и показать
   его движением уместнее, чем нумерацией.

   Начальное состояние задаётся только после того, как скрипт отметил блок
   классом `is-anim`. Иначе при выключенном JS карточки остались бы
   невидимыми навсегда.
   ══════════════════════════════════════════════════════════════════════ */

.is-anim .anim-step {
  opacity: 0;
  transform: translateY(18px);
  /* Выход резче входа: 300 мс против 420 — так движение не выглядит вязким. */
  transition: opacity .42s cubic-bezier(.33, 1, .68, 1),
              transform .42s cubic-bezier(.33, 1, .68, 1);
}
.is-anim .anim-step.is-in {
  opacity: 1;
  transform: none;
}

/* ══════════════════════════════════════════════════════════════════════
   Анимация 2 — подсветка под курсором.

   Карточки направлений подсвечиваются пятном, которое следует за мышью.
   Пятно рисуется отдельным слоем поверх фона карточки и под её текстом,
   поэтому читаемость не меняется ни на шаг.

   Координаты приходят переменными --mx/--my от скрипта. Пока мышь
   не заходила на карточку, слой полностью прозрачен.
   ══════════════════════════════════════════════════════════════════════ */

.anim-spot { position: relative; overflow: hidden; }
.anim-spot::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  transition: opacity .25s ease;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%),
    rgba(200, 255, 0, .22), rgba(22, 163, 74, .1) 42%, transparent 70%);
}
.anim-spot:hover::before { opacity: 1; }
/* Содержимое поднимаем над слоем подсветки, иначе пятно ляжет на текст. */
.anim-spot > * { position: relative; z-index: 1; }

/* Пальцем навести нельзя — на сенсорных экранах эффект просто не нужен. */
@media (hover: none) {
  .anim-spot::before { display: none; }
}

/* Выключенная анимация в системе — не каприз: от движения на экране
   людей укачивает. Показываем всё сразу и без переходов. */
@media (prefers-reduced-motion: reduce) {
  .is-anim .anim-step { opacity: 1; transform: none; transition: none; }
  .anim-spot::before { display: none; }
}

/* Блок на тёмном фоне: вуаль тёмная, иначе фотография превращает
   чёрную секцию в серое пятно посреди страницы. Плотная по краям
   и прозрачнее в середине — там, где стоят карточки. */
.sec-media--dark::after {
  background:
    linear-gradient(180deg,
      rgba(8, 12, 9, .9) 0%,
      rgba(8, 12, 9, .5) 34%,
      rgba(8, 12, 9, .6) 74%,
      rgba(8, 12, 9, .94) 100%);
}
/* Секция с тёмной подложкой не перекрашивается в белый: правило
   `.sec.has-media{background:#fff}` рассчитано на светлые блоки. */
.sec.has-media:has(.sec-media--dark) { background: #080c09; }