/* ============================================================
   A.L.E.X. — сцена главной (круг 1140, композиция владельца 26.08).
   Вертикальный хром-герой «A» по центру с отражением (оно В КАДРЕ),
   лозунг и два CTA под знаком; «металл стекает вниз» — плавный
   градиент от сцены в ровный графит и тонкие металлические
   полоски-разделители между секциями. Фон рабочих блоков с текстом
   остаётся РОВНЫМ (канон 24.08) — сплошного металла под текстом нет,
   и текстура hero--metal здесь НЕ дублируется: сцена стоит на
   фотографическом кадре, а не на CSS-градиентах металла.

   Правило файла — как у hub.css (урок #894): самостоятельный модуль
   со своими токенами и запасными var(--x, …); цвета только токенами,
   значения — ровно в трёх блоках ниже. Подключается ТОЛЬКО на
   главной (extra_css), остальные страницы его не грузят.
   ============================================================ */

/* ---------- 1. Токены сцены ---------- */

:root {
  /* Светлая тема: тон поля светлого кадра (сэмпл краёв кадра,
     f0e9e0 — усреднение углов 248/241/233 и 230/221/214). */
  --scene-bg:      #F0E9E0;
  /* Полоска-разделитель: серебро + латунный блик по центру. */
  --scene-rule:    rgba(22, 24, 28, .18);
  --scene-rule-hi: rgba(184, 134, 11, .38);
}

[data-theme="dark"] {
  /* Тёмная тема: поле вертикального эталона — чистый чёрный. */
  --scene-bg:      #000000;
  --scene-rule:    rgba(154, 165, 177, .26);
  --scene-rule-hi: rgba(212, 175, 55, .45);
}

/* Браузер без JS (инлайн-скрипт темы не отработал): тёмная — базовая. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --scene-bg:      #000000;
    --scene-rule:    rgba(154, 165, 177, .26);
    --scene-rule-hi: rgba(212, 175, 55, .45);
  }
}

/* ---------- 2. Сцена ---------- */

.hero.hero--scene {
  /* Плавный вход: шапка стоит на ровном --bg, сцена — на поле кадра.
     Градиент входа обязан закончиться ДО верхнего края кадра (он равен
     верхнему отступу сцены), иначе кадр темнее собственного фона и его
     прямоугольник читается — поймано зумом скрина 390. */
  background: linear-gradient(180deg, var(--bg, #0B0D10) 0,
              var(--scene-bg) clamp(20px, 4vw, 48px), var(--scene-bg) 100%);
  text-align: center;
  padding: clamp(20px, 4vw, 48px) 0 0;
  border-bottom: 0;
}

.hero--scene .scene-in {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Знак: вертикальный кадр по центру, отражение у подножия — в кадре.
   Зеркалить и перекрашивать кадр нельзя (буква несимметрична). */
.scene-mark {
  position: relative;
  display: block;
  line-height: 0;
}
.scene-mark img {
  width: min(64vw, 400px);
  height: auto;
}

/* Кадр темы: тёмный — базовый, светлый включается светлой темой.
   Скрытый кадр не имеет layout-бокса, и loading="lazy" его не качает. */
.scene-mark--light { display: none; }
[data-theme="light"] .scene-mark--dark { display: none; }
[data-theme="light"] .scene-mark--light { display: block; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .scene-mark--dark { display: none; }
  :root:not([data-theme]) .scene-mark--light { display: block; }
}

/* Края кадров растворяем В ФОН СЦЕНЫ поверх кадра (виньетка CSS):
   у светлого кроп теснее знака (в правой трети исходника знак не
   помещался целиком), у тёмного на границе кропа обрезается свечение
   вокруг буквы и без виньетки читается прямоугольник. Сами кадры не
   редактировались. */
.scene-mark::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, var(--scene-bg) 0%, transparent 22%,
                    transparent 78%, var(--scene-bg) 100%),
    linear-gradient(180deg, var(--scene-bg) 0%, transparent 15%,
                    transparent 85%, var(--scene-bg) 100%);
}

/* ---------- 2а. Светлая тема: геометрия знака = тёмная (круг 1152) ----------
   Кадры тем разных пропорций (тёмный 1080x1446 с отражением, светлый
   1080x1166 с тенью), а рендерились одной шириной — знак светлой темы
   стоял ниже, крупнее и левее центра. Контейнер светлого кадра держит
   КОРОБКУ ТЁМНОГО (пропорция 1080:1446), а кадр внутри поставлен так,
   что вершина, основание и центр буквы совпадают с тёмной темой
   (замеры по маске: тёмная буква y=268..1012 в 1446; светлая вершина
   y=264, ножки y=1204 в окне 1300x1403, буква центрована в кропе).
   Пиксели кадров не правились — только кроп и позиция. Тёмная тема
   этим блоком не задета: селекторы только --light. */
.scene-mark--light {
  width: min(64vw, 400px);
}
/* Высота коробки = пропорция тёмного кадра (1446/1080); padding-top
   вместо aspect-ratio — работает и в старых браузерах. */
.scene-mark--light::before {
  content: "";
  display: block;
  padding-top: 133.889%;
}
.scene-mark--light img {
  position: absolute;
  left: 50%;
  top: 4.09%;
  transform: translateX(-50%);
  width: 95.27%;
  height: auto;
}
/* Виньетка светлого — по краям КАДРА внутри коробки (кадр занимает
   2.4%..97.6% ширины и 4.1%..80.9% высоты контейнера). */
.scene-mark--light::after {
  background:
    linear-gradient(90deg, var(--scene-bg) 2%, transparent 24%,
                    transparent 76%, var(--scene-bg) 98%),
    linear-gradient(180deg, var(--scene-bg) 4%, transparent 16%,
                    transparent 69%, var(--scene-bg) 81%);
}

/* Лозунг и CTA — под знаком, по центру, вокруг воздух. */
.hero--scene .kicker { margin-top: clamp(14px, 2.5vw, 22px); }
.hero--scene h1 {
  max-width: 21ch;
  margin: .35em auto 0;
}
.hero--scene .cta-pair {
  justify-content: center;
  margin-top: clamp(18px, 3vw, 28px);
  /* Отступа вниз сцена не держит: ниже сразу «стекание» металла. */
  margin-bottom: 0;
  padding-bottom: clamp(28px, 4vw, 44px);
}

/* ---------- 3. «Металл стекает вниз» ---------- */

/* Плавный градиент от поля сцены в ровный графит страницы (--bg).
   Дальше фон всех рабочих блоков — ровный var(--bg), как и был. */
.scene-flow {
  height: clamp(90px, 12vw, 150px);
  background: linear-gradient(180deg, var(--scene-bg) 0%, var(--bg, #0B0D10) 100%);
}

/* Тонкая металлическая полоска-разделитель между секциями главной:
   серебро с латунным бликом по центру, 2px, к краям сходит на нет. */
.rule-metal {
  height: 2px;
  max-width: min(88%, 1040px);
  margin: 0 auto;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--scene-rule) 22%,
    var(--scene-rule-hi) 50%,
    var(--scene-rule) 78%,
    transparent 100%);
}

/* ---------- 4. Мобайл 390: знак по центру, текст под ним ---------- */

@media (max-width: 560px) {
  .scene-mark img { width: min(78vw, 320px); }
  /* Светлая коробка сужается вместе с тёмным кадром; кадр внутри —
     те же проценты, геометрия тем совпадает и на 390. */
  .scene-mark--light { width: min(78vw, 320px); }
  .scene-mark--light img { width: 95.27%; }
  .hero--scene h1 { font-size: clamp(1.65rem, 7.4vw, 2.1rem); }
  .hero--scene .cta-pair { width: 100%; }
}