/* === base.css — базовый layout: body, слайд-дек, переходы между слайдами === */

/* ── Layout shell ─────────────────────────────────────── */
/* Панели (шапка/нижняя навигация) больше НЕ занимают место в потоке — они плавают
   поверх дека (position:fixed, см. header.css). Настоящее стекло требует, чтобы под
   ним что-то проходило, поэтому body перестал быть flex-колонкой: дек занимает
   весь экран, а слайды отступают от краёв на --chrome-top/--chrome-bottom. */
body.manual-body {
  height: 100dvh;          /* dvh, а не vh: иначе на мобильном Safari нижняя панель уезжает под адресную строку */
  overflow: hidden;
  position: relative;
  font-family: var(--font-sans);
  background-color: var(--app-bg);
  background-image: var(--app-grain), var(--app-mesh);
  background-repeat: repeat, no-repeat;
  background-attachment: fixed;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── Декоративные слои фона ───────────────────────────── */
/* На одном mesh-градиенте экран читался пустым. Два фиксированных слоя добавляют
   глубину, не мешая контенту: z-index:-1 кладёт их поверх фона body, но ПОД
   .slide-deck, pointer-events:none снимает перехват кликов.
   Намеренно без filter:blur() — градиенты и так мягкие, а блюр во весь экран
   стоит кадров на слабых машинах. */
body.manual-body::before {
  content: '';
  position: fixed; inset: -12%;
  z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 34% at 14% 16%, rgba(255,138,76,.10),  transparent 70%),
    radial-gradient(34% 30% at 86% 22%, rgba(124,92,255,.11),  transparent 70%),
    radial-gradient(42% 38% at 74% 88%, rgba(255,92,170,.09),  transparent 72%),
    radial-gradient(30% 28% at 22% 84%, rgba(76,160,255,.09),  transparent 72%);
  animation: bg-drift 32s var(--ease-glass) infinite alternate;
}

/* Едва различимая точечная сетка. Маска гасит её к низу экрана, чтобы паттерн
   читался только в пустой верхней части и не спорил с карточками. */
body.manual-body::after {
  content: '';
  position: fixed; inset: 0;
  z-index: -1; pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, rgba(90,80,130,.055) 1px, transparent 0);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(120% 96% at 50% 0%, #000 26%, transparent 76%);
          mask-image: radial-gradient(120% 96% at 50% 0%, #000 26%, transparent 76%);
}

@keyframes bg-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-2.5%, 2%, 0) scale(1.06); }
}

.slide-deck { position: absolute; inset: 0; overflow: hidden; }

/* ── Типографические умолчания текстовых элементов ──────
   Три правила — всё, что осталось от `slides.css` (351 строка) после чистки
   19.08.2026: остальные 58 классов легаси-системы носителей не имели.
   Сюда, в base.css, они переехали потому, что это умолчания документа,
   а не стили какой-то системы страниц.

   ⚠ Селекторы элементов без скоупа — сознательный компромисс, а не недосмотр.
   Editorial-страницы на них ОПИРАЮТСЯ: `line-height` у `.ed-eyebrow`
   и `.cover-subtitle`, `margin-bottom` у `.ed-standfirst` берутся отсюда,
   и снятие правил меняло вид 764 элементов из 7650 (замер отключением
   таблицы стилей). Прежняя запись в CLAUDE.md про «протечку легаси» описывала
   ровно это. Перед правкой значений — сверять слепок вычисленных стилей
   по всем двадцати слайдам, а не смотреть глазом на одну страницу. */
p           { line-height: 1.68; color: var(--text); margin-bottom: 12px; font-size: 1rem; }
ul, ol      { padding-left: 22px; }
li          { margin-bottom: 7px; line-height: 1.55; font-size: 1rem; }

/* ── Slides ───────────────────────────────────────────── */
.slide {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  opacity: 0;
  pointer-events: none;
  transform: scale(.985);
  transition: opacity .42s var(--ease-glass), transform .42s var(--ease-glass);
  /* Отступ под плавающие панели. Это padding скролл-контейнера — при прокрутке он
     уезжает, и контент честно подныривает под стекло, а не упирается в него. */
  padding-top: var(--chrome-top);
  padding-bottom: var(--chrome-bottom);
  /* фон не задаём — просвечивает mesh с body (--app-mesh);
     обложка (.slide--cover в cover.css) перекрывает своим видео/фото */
}
/* ⚠ Именно `none`, а не `scale(1)`, хотя визуально это одно и то же.
   Любой трансформ — включая тождественный — делает элемент точкой отсчёта
   для `position: fixed` внутри него. Слайд при этом сам прокручиваемый
   контейнер, поэтому раскрытая на весь экран рамка медиа переставала держаться
   окна и вставала в НАЧАЛО прокрутки: замер на телефоне и в панели дал
   `top: -11663` при прокрутке 11663 — читатель оставался там, где читал,
   а материал раскрывался за пределами экрана.
   Анимация появления сохраняется: переход `scale(.985) → none` браузер
   интерполирует, считая `none` той же единичной матрицей. */
.slide.is-active { opacity: 1; pointer-events: auto; transform: none; }
.slide.is-exit   { opacity: 0; transform: scale(1.015); pointer-events: none; }

/* Обложка — полноэкранный видеогерой, обвязка на ней скрыта (см. nav.js) */
.slide--cover { padding: 0; }

/* Обёртка содержимого слайда, создаётся программно в main.js (см. wrapSlideContent). */
.slide__scroll { min-height: 100%; }

@media (prefers-reduced-motion: reduce) {
  .slide { transition: opacity .2s; transform: none !important; }
  body.manual-body::before { animation: none; }
}