/* ============================================================
   MVP-2026 — stage-секции и библиотека reveal-примитивов
   PLM-020…022. Правила:
   — движение только через transform / opacity / clip-path;
   — каждый примитив полностью читаем без анимации;
   — prefers-reduced-motion отключает всё разом.
   ============================================================ */

/* --- Тёмные иммерсивные секции (stage) --- */
.section--stage {
  background: var(--surface-stage);
  color: var(--stage-text);
}
.section--stage .section__title { color: var(--stage-text); }
.section--stage .section__sub,
.section--stage p { color: var(--stage-text-muted); }
.section--stage a:not(.btn) { color: var(--stage-text); }

.section--stage-soft {
  background: var(--surface-stage-soft);
  color: var(--stage-text);
}
.section--stage-soft .section__sub,
.section--stage-soft p { color: var(--stage-text-muted); }

/* Переход главы: светлая секция перетекает в тёмную и обратно.
   Ставится как отдельный разделитель между секциями. */
.chapter-fade {
  height: clamp(72px, 12vh, 160px);
  background: linear-gradient(180deg, transparent, var(--surface-stage));
  pointer-events: none;
}
.chapter-fade--out {
  background: linear-gradient(180deg, var(--surface-stage), transparent);
}

/* Свечение LED на stage-фоне — метафора продукта, используется точечно. */
.stage-glow {
  position: relative;
}
.stage-glow::before {
  content: "";
  position: absolute;
  inset: -10% -20%;
  background:
    radial-gradient(ellipse at 30% 40%, var(--led-glow-orange), transparent 55%),
    radial-gradient(ellipse at 70% 60%, var(--led-glow-red), transparent 55%),
    radial-gradient(ellipse at 50% 80%, var(--led-glow-magenta), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.stage-glow > * { position: relative; z-index: 1; }

/* --- Полноширинное медиа --- */
.media-fullbleed {
  width: 100%;
  overflow: hidden;
}
.media-fullbleed img,
.media-fullbleed video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Reveal-примитивы (активируются классом .is-inview из motion.js) --- */
.reveal-fade {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.reveal-fade.is-inview {
  opacity: 1;
  transform: none;
}

.reveal-mask {
  clip-path: inset(0 0 100% 0);
  transition: clip-path .7s cubic-bezier(.22, 1, .36, 1);
}
.reveal-mask.is-inview {
  clip-path: inset(0 0 0 0);
}

.reveal-scale {
  opacity: 0;
  transform: scale(.96);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.reveal-scale.is-inview {
  opacity: 1;
  transform: none;
}

/* Ступенчатая задержка для групп (карточки, списки). */
[data-reveal-delay="1"] { transition-delay: 80ms; }
[data-reveal-delay="2"] { transition-delay: 160ms; }
[data-reveal-delay="3"] { transition-delay: 240ms; }
[data-reveal-delay="4"] { transition-delay: 320ms; }
[data-reveal-delay="5"] { transition-delay: 400ms; }

/* --- media-depth: статичный режим по правке заказчика 23.09.2026. ---
   Фотографии не двигаются при скролле: остаётся только аккуратная
   периметральная LED-анимация карточки из main.css. */
.media-depth img,
.media-depth video {
  animation: none !important;
  transform: none !important;
  scale: 1 !important;
}

/* --- reveal-pixel: заголовок «включается» дискретными столбцами диодов ---
   steps() вместо плавности: экран не проявляется, а зажигается колонками
   кабинетов. Послесвечение — короткая вспышка, как у настоящего LED. */
.reveal-pixel { clip-path: inset(0 100% 0 0); }
.reveal-pixel.is-inview {
  clip-path: inset(0 0 0 0);
  transition: clip-path .55s steps(14, jump-none);
  animation: plm-led-afterglow .18s steps(2) .55s both;
}
@keyframes plm-led-afterglow {
  from { text-shadow: 0 0 18px rgba(254, 152, 36, .8); }
  to   { text-shadow: none; }
}

/* --- plm-scan: строка развёртки. Секция «включается» как экран —
   тонкая светящаяся линия пробегает сверху вниз один раз при появлении.
   :not(.scroll-scene): overflow:hidden на предке УБИВАЕТ position:sticky —
   pin-сцена шага пикселя переставала закрепляться и просто уезжала вверх,
   оставляя пустой чёрный прогон. Пиновым сценам сканлайн не положен. --- */
.section--stage:not(.scroll-scene) { position: relative; overflow: hidden; }
.section--stage.is-inview:not(.scroll-scene)::after {
  content: ''; position: absolute; left: 0; top: 0; height: 2px; width: 100%;
  background: linear-gradient(90deg, transparent, rgba(254,152,36,.9), transparent);
  animation: plm-scan-section .8s ease-out 1 both;
  pointer-events: none; z-index: 2;
}
@keyframes plm-scan-section { to { transform: translateY(70vh); opacity: 0; } }

/* Развёртка по фото отключена по правке заказчика: она отвлекала
   от текста карточки. Периметральная LED-анимация карточки остаётся. */
.card__media:not(.card__media--empty)::after { content: none; }
.card:hover .card__media:not(.card__media--empty)::after { animation: none; }

/* --- Reduced motion: весь смысл без движения --- */
@media (prefers-reduced-motion: reduce) {
  .reveal-fade,
  .reveal-mask,
  .reveal-scale,
  .reveal-pixel {
    opacity: 1;
    transform: none;
    clip-path: none;
    transition: none;
    animation: none;
  }
  /* motion.js при reduce вешает is-inview всем сразу — без этого гейта
     все сканлайны вспыхнули бы одновременно. */
  .section--stage.is-inview::after { animation: none; content: none; }
  .card:hover .card__media::after { animation: none; }
  [data-reveal-delay="1"],
  [data-reveal-delay="2"],
  [data-reveal-delay="3"],
  [data-reveal-delay="4"],
  [data-reveal-delay="5"] { transition-delay: 0s; }
  @supports (animation-timeline: view()) {
    .media-depth img,
    .media-depth video {
      animation: none;
      scale: 1;
    }
  }
}