/* === 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 ───────────────────────────────────────────── */
.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) перекрывает своим видео/фото */
}
.slide.is-active { opacity: 1; pointer-events: auto; transform: scale(1); }
.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; }
}