/* ============================================================================
   LUNA THEME — активируется через body[data-style="luna"]
   ----------------------------------------------------------------------------
   Параллельная тема к HYPE. Для образовательной серии «Лунная программа»
   (SciencePub): тёмный космический фон + плоские иллюстрации + крупные
   акцентные цифры + чистый текст в обычном регистре (НЕ неон, НЕ CAPS).

   Нативный вертикальный холст 1080×1920 (как HYPE), но спокойная типографика
   под стиль уже выпущенных Short #1 / #2.

   Все селекторы префиксованы [data-style="luna"] — если флаг не выставлен,
   файл фактически no-op и не трогает ни VPR-, ни HYPE-проекты.

   См. также backend/scenario_builder_luna.py и _briefs/SHORTS/CLAUDE.md.
   ========================================================================== */

/* ── Stage chrome: глубокий космос, off-white ink ──────────────────────────
   worldEl прозрачный → фон холста = background самого #stage. Дефолтный
   #stage в styles.css светлый (#fdfaf2) и переключается через
   #stage[data-theme=...]. Поэтому перебиваем явно с !important — иначе
   UI-переключатель темы (light/dark/blackboard) пересилит по specificity. */
body[data-style="luna"] #stage,
body[data-style="luna"] #stage[data-theme="light"],
body[data-style="luna"] #stage[data-theme="dark"],
body[data-style="luna"] #stage[data-theme="blackboard"],
body[data-style="luna"] #stage[data-theme="notebook"] {
  background-color: #0B0E16 !important;     /* deep space — почти чёрный с синевой */
  /* лёгкая «дымка» галактики сверху, чтобы фон не был мёртво-плоским */
  background-image:
    radial-gradient(120% 60% at 50% -10%, rgba(60, 80, 150, 0.18), rgba(11, 14, 22, 0) 60%),
    radial-gradient(90% 50% at 80% 110%, rgba(90, 50, 130, 0.14), rgba(11, 14, 22, 0) 55%) !important;
  color: #F2F5FF !important;
  /* транзишн фона (#stage из styles.css, 320ms) мешает посекундному рендеру и
     может зависать на захвате кадра — выключаем для luna */
  transition: none !important;
  --stage-ink: #F2F5FF !important;
  --stage-muted: #9AA4C0 !important;
  --arrow-color: #8FB4FF;   /* рисованные стрелки — мягкий голубой; перебивается scene.color */
}

/* ── Typography: чистый sans, обычный регистр, без неон-glow ───────────── */
body[data-style="luna"] .scene-text {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  letter-spacing: -0.015em;
  line-height: 1.12;
  /* мягкая тень для читаемости поверх тёмного фона, БЕЗ цветного свечения */
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
  /* регистр и вес управляются через JSON (scene.uppercase / scene.weight) —
     здесь ничего не форсим, в отличие от HYPE */
}

body[data-style="luna"] .scene-label {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: #9AA4C0;
}

/* ── Мягкое появление (rise + fade) — спокойнее, чем bounce HYPE ───────── */
@keyframes luna-rise {
  0%   { opacity: 0; transform: translateY(14px) scale(0.985); }
  100% { opacity: 1; transform: translateY(0)   scale(1); }
}

body[data-style="luna"]:not(.render-mode) .scene-text,
body[data-style="luna"]:not(.render-mode) .scene-raster,
body[data-style="luna"]:not(.render-mode) .scene-draw_svg {
  animation: luna-rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
  transform-origin: center center;
}

/* В render-mode анимации выключены — каждый кадр снимается заново через
   __seekRender, иначе rise проигрывался бы на каждом скриншоте. */
body[data-style="luna"].render-mode .scene-text,
body[data-style="luna"].render-mode .scene-raster,
body[data-style="luna"].render-mode .scene-draw_svg {
  animation: none !important;
}

/* ── В кадре нет говорящей головы (как в Short #1/#2) ──────────────────── */
body[data-style="luna"] #speaker-slot {
  display: none !important;
}

/* ── Output-frame в preview: вертикальный холст заполняет рамку 1:1 ──────
   Дефолтный styles.css для [data-mode="vertical"] зумит 16:9-канвас в
   420px phone-mockup (см. styles.css:565-614). Наш холст НАТИВНО 1080×1920 —
   зум не нужен, стейдж должен заполнить рамку как 9:16. */
body[data-style="luna"] #output-frame[data-mode="vertical"] {
  background: #000;
}

body[data-style="luna"] #output-frame[data-mode="vertical"] #stage-wrapper {
  width: 100% !important;
  margin: 0 !important;
}

body[data-style="luna"] #output-frame[data-mode="vertical"] #stage {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 9 / 16 !important;
}

/* ── Render-mode: стейдж заполняет весь playwright viewport (1080×1920) ───
   КРИТИЧНО (тот же баг, что лечит styles_hype.css): селекторы
   #output-frame[data-mode="vertical"] #stage выше имеют specificity (0,2,2,1),
   что ВЫШЕ чем `body.render-mode #stage` (0,1,1,1) из основного styles.css.
   Без явного сброса в render-mode стейдж остался бы в phone-mockup-рамке и
   кадр MP4 обрезался бы по краям. Поэтому в render-mode явно расширяем всё
   до 100vw/100vh. */
body[data-style="luna"].render-mode #output-frame,
body[data-style="luna"].render-mode #output-frame[data-mode="vertical"] {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: auto !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

body[data-style="luna"].render-mode #output-frame[data-mode="vertical"] #stage-wrapper {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
}

body[data-style="luna"].render-mode #output-frame[data-mode="vertical"] #stage,
body[data-style="luna"].render-mode #stage {
  width: 100vw !important;
  height: 100vh !important;
  aspect-ratio: auto !important;
  max-width: none !important;
  max-height: none !important;
  background-color: #0B0E16 !important;
  background-image:
    radial-gradient(120% 60% at 50% -10%, rgba(60, 80, 150, 0.18), rgba(11, 14, 22, 0) 60%),
    radial-gradient(90% 50% at 80% 110%, rgba(90, 50, 130, 0.14), rgba(11, 14, 22, 0) 55%) !important;
  border-radius: 0 !important;
  border: 0 !important;
}