/* ============================================================
   A.L.E.X. — ПЕРВЫЙ ЭКРАН ВНУТРЕННИХ СТРАНИЦ
   (задача 1834, слово владельца 07.09.2026 20:45: «на других страницах
   на первом экране фон день/ночь и одна буква А большая над заголовком
   в воздухе + кнопка Хрисы»).

   ТРИ ВЕЩИ И НИ ОДНОЙ БОЛЬШЕ:
     1) НЕБО ПО ТЕМЕ. Ночью звёзды рисует `assets/js/zvezdy.js` (круг 1364,
        свой слой `.zv-nebo`) — здесь ночная половина только не мешает ему.
        Днём звёзд нет по построению (zvezdy.js прячет слой в светлой теме),
        и до этого круга светлая тема оставалась голым металлом: «дня» на
        первом экране не было вовсе. Здесь он и появляется — светлое небо
        мягким светом, слоем `.pe-nebo`.
     2) ЗНАК «А» НАД ЗАГОЛОВКОМ, «В ВОЗДУХЕ» — `.pe-znak`: та же монограмма
        `alex-znak-a.svg`, что у водяного знака металл-канона, но НЕ в углу
        и не водяная: над H1, крупно, с мягкой тенью и медленным дыханием.
     3) КНОПКА ХРИСЫ ПОД СТРОКОЙ — `.pe-hrisa`: та же кнопка, что плавает
        внизу справа, и то же окно (`hrisa-vsyudu.js` ловит обе метки).

   ПОЧЕМУ СВОЙ ЭЛЕМЕНТ, А НЕ ПСЕВДОЭЛЕМЕНТ ХИРО. Все три псевдоэлемента
   геройской зоны заняты и уже воевали за вес: `::before` хиро — металл-канон
   (`.hero:not(.hero--scene)::before`, вес 0-2-0) против атмосферы
   (`.hero--metal::before`, вес 0-1-0) — металл побеждает, и дневное пятно
   атмосферы на бою не видно; `::after` — искры атмосферы; `::before`
   контейнера — водяной знак. Круг 1364 (звёзды) вышел из этой войны своим
   элементом `.zv-nebo`, и здесь ровно тот же выход. Война за псевдоэлементы
   уже дважды стоила кругам слоёв — третий раз не нужен.

   ВОДЯНОЙ ЗНАК В УГЛУ СНЯТ (§4). Владелец просит ОДИН большой знак; знак в
   углу и знак над заголовком на одном экране — это два знака. Снимаем не
   удалением правила металл-канона (он общий и живёт своей жизнью), а
   отменой `content` там, где стоит новый знак: признак по содержимому.

   ВЕС И БАТАРЕЯ. Ни картинок сверх уже лежащей маски (745 байт), ни канваса,
   ни JS: небо и дыхание — CSS-градиенты и две CSS-анимации, композитор
   считает их на GPU. При «уменьшить движение» дыхание и небо статичны (§6).
   ============================================================ */

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

:root {
  /* Знак над заголовком: он смысловой, а не водяной, — плотнее водяного
     (--mtl-znak-* металл-канона), но всё ещё «в воздухе», не плашкой. */
  /* ДЕВИЗ ПОД ЗАГОЛОВКОМ ДЛИННОЙ СТРАНИЦЫ (задача 1950, п.4; ставит
     сборщик build.pervyi_ekran, текст — единое поле словаря главной):
     мелко, золотом, без анимации, одна-две строки. Цвет — то же золото, что
     у девиза подвала (style2.css .pdv-deviz).

     ЗОЛОТО ЗДЕСЬ ТЕМАТИЧЕСКОЕ, А НЕ НОЧНОЕ (идея О2 круга 2230). Прибитый
     #D4AF37 — ночная редакция акцента, и днём она давала 2,01:1 на фоне
     #FAFAF7 при норме 4,5:1. Боевой замер контраста круга 2093 встал именно
     на этой паре и только на ней: protokol-390-kontrast-BOY-20260916T152802
     .txt:36,41 — «pe-deviz … 2.03:1», единственное красное всего обхода.
     Теперь берётся токен темы --accent-tekst: днём #856108 (5,41:1), ночью
     он сам равен --accent, то есть тому же #D4AF37 (9,25:1). Нового цвета в
     стиль-гид круг не вводит (правило Н7), ночная картинка не меняется. */
  --pe-deviz: var(--accent-tekst, #D4AF37);
  --pe-znak-1: rgba(22, 24, 28, .30);
  --pe-znak-2: rgba(184, 134, 11, .46);
  --pe-znak-3: rgba(22, 24, 28, .14);
  --pe-ten:    rgba(22, 24, 28, .22);

  /* Дневное небо: светлая высь, тёплый свет слева сверху, мягкая дымка у
     горизонта. Ночью все три прозрачны — слой есть, а видно его нет. */
  --pe-nebo-1: transparent;
  --pe-nebo-2: transparent;
  --pe-nebo-3: transparent;
}

[data-theme="light"] {
  --pe-znak-1: rgba(22, 24, 28, .26);
  --pe-znak-2: rgba(184, 134, 11, .52);
  --pe-znak-3: rgba(22, 24, 28, .10);
  --pe-ten:    rgba(22, 24, 28, .16);

  --pe-nebo-1: rgba(207, 226, 245, .62);   /* высь: холодная голубизна */
  --pe-nebo-2: rgba(255, 247, 230, .78);   /* свет: тёплое солнце через окно */
  --pe-nebo-3: rgba(255, 253, 248, .55);   /* дымка у нижней кромки */
}

/* Тема не выбрана руками — идём за системой (тот же приём, что у металла). */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --pe-znak-1: rgba(22, 24, 28, .26);
    --pe-znak-2: rgba(184, 134, 11, .52);
    --pe-znak-3: rgba(22, 24, 28, .10);
    --pe-ten:    rgba(22, 24, 28, .16);
    --pe-nebo-1: rgba(207, 226, 245, .62);
    --pe-nebo-2: rgba(255, 247, 230, .78);
    --pe-nebo-3: rgba(255, 253, 248, .55);
  }
}

/* ---------- 2. Небо первого экрана ----------

   Слой лежит ПОД текстом (z-index: -1 внутри изолированного хиро) и ПОВЕРХ
   текстуры металла (у неё -2). Ночью прозрачен целиком: небо ночи — звёзды
   `zvezdy.js`, и второго ночного слоя не нужно. */

.hero--metal > .pe-nebo,
.page-hero > .pe-nebo {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(80% 70% at 18% -6%, var(--pe-nebo-2) 0%, transparent 62%),
    radial-gradient(120% 96% at 62% 112%, var(--pe-nebo-3) 0%, transparent 58%),
    linear-gradient(178deg, var(--pe-nebo-1) 0%, transparent 74%);
}

/* Свет дышит: очень медленно и очень мало — «мягкий свет», а не мигание.
   Одна анимация прозрачности на слой; композитор считает её без главного
   потока, ЦП в простое остаётся свободным (требование Г1 круга 1364). */
[data-theme="light"] .hero--metal > .pe-nebo,
[data-theme="light"] .page-hero > .pe-nebo {
  animation: pe-svet 24s ease-in-out infinite;
}

@keyframes pe-svet {
  0%, 100% { opacity: .86; }
  50%      { opacity: 1; }
}

/* ---------- 3. Знак «А» над заголовком ---------- */

.pe-znak {
  display: block;
  width: clamp(80px, 11vw, 150px);
  aspect-ratio: 1 / 1;
  margin: 0 0 .35rem;
  pointer-events: none;
  background:
    linear-gradient(155deg,
      var(--pe-znak-1) 0%,
      var(--pe-znak-2) 44%,
      var(--pe-znak-3) 100%);
  -webkit-mask: url("/assets/img/alex-znak-a.svg") no-repeat center / contain;
  mask: url("/assets/img/alex-znak-a.svg") no-repeat center / contain;
  /* «В воздухе» — мягкая тень под знаком; она же и делает воздух. */
  filter: drop-shadow(0 10px 14px var(--pe-ten));
  animation: pe-dyhanie 9s ease-in-out infinite;
  will-change: transform;
}

/* Дыхание: подъём на 6 px и обратно. Никакого масштабирования — оно тянет
   за собой перерисовку маски; transform композитор считает даром. */
@keyframes pe-dyhanie {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* Браузер без масок (mask/-webkit-mask) показал бы вместо знака цветной
   квадрат. Такому знак не нужен вовсе — страница остаётся как была. */
@supports not ((-webkit-mask-image: url("/assets/img/alex-znak-a.svg")) or
               (mask-image: url("/assets/img/alex-znak-a.svg"))) {
  .pe-znak { display: none; }
}

/* ---------- 4. Водяной знак в углу снят там, где стоит новый ----------

   Металл-канон (metall.css §5) вешает водяной знак на `> .container::before`
   хиро. Правило здесь весит больше (0-3-0 против 0-2-0) и отменяет его РОВНО
   у тех хиро, которым сборщик поставил класс `hero--pe`, — то есть у тех, где
   стоит новый знак. Хиро без нового знака остаётся с прежним водяным знаком
   и не меняется ни на пиксель.

   ПОЧЕМУ КЛАСС, А НЕ `:has(.pe-znak)`. Селектор `:has` сказал бы то же самое
   и красивее, но браузер, который его не понимает, показал бы ДВА знака —
   новый над заголовком и старый в углу, — то есть ровно то, что владелец
   просит убрать. Класс понимают все, и цена ошибки здесь выше цены красоты. */

.hero.hero--pe > .container::before,
.page-hero.hero--pe > .container::before { content: none; }

/* ---------- 5. Кнопка Хрисы под строкой ----------

   Живёт в `.cta-pair` рядом с главным действием страницы и выглядит как
   призрачная кнопка витрины — второе по важности действие, а не первое:
   первое остаётся у страницы («Пройти диагностику» и её родня). Знак «А»
   в кнопке — тот же, что на плавающей (hrisa-vsyudu.css). */

.pe-hrisa { display: inline-flex; align-items: center; gap: .5rem; }

/* Знак в кнопке — МАСКОЙ, а не буквой. Русская «А» текстом внутри `<main>`
   английской страницы — это разнобой языков, и дозор языков закрывает такую
   выкладку (сорок строк «кириллица в зеркале» на первой же попытке круга).
   Маска говорит то же самое и на всех трёх языках одинаково. */
.pe-hrisa__znak {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  flex: 0 0 auto;
  background: var(--accent, #D4AF37);
  -webkit-mask: url("/assets/img/alex-znak-a.svg") no-repeat center / contain;
  mask: url("/assets/img/alex-znak-a.svg") no-repeat center / contain;
}

/* ---------- 6. Меньше движения — всё стоит ----------

   Системная настройка и ручка витрины (`data-kmf-motion="less"`, komfort.css)
   означают одно и то же, и обе обязаны гасить обе анимации: и дыхание знака,
   и дыхание света. Слой при этом ОСТАЁТСЯ — «статичная картинка», а не пустой
   экран: постановка просит именно статичную, а не снятую сцену. */

@media (prefers-reduced-motion: reduce) {
  .pe-znak,
  .hero--metal > .pe-nebo,
  .page-hero > .pe-nebo,
  [data-theme="light"] .hero--metal > .pe-nebo,
  [data-theme="light"] .page-hero > .pe-nebo { animation: none; }
  .pe-znak { transform: none; }
}

[data-kmf-motion="less"] .pe-znak,
[data-kmf-motion="less"] .hero--metal > .pe-nebo,
[data-kmf-motion="less"] .page-hero > .pe-nebo { animation: none; }
[data-kmf-motion="less"] .pe-znak { transform: none; }

/* ---------- 7. Телефон ----------

   На узком экране знак меньше и тень тише: 116 px над заголовком съели бы
   треть первого экрана телефона, а ради этого круга гость и приходит из
   поиска — ему нужен заголовок, а не украшение. */

@media (max-width: 640px) {
  .pe-znak {
    width: clamp(58px, 18vw, 88px);
    filter: drop-shadow(0 6px 10px var(--pe-ten));
  }
}

/* ---------- 8. Печать ----------
   Ни неба, ни дыхания на бумаге (тем же правилом, что metall.css §23). */

@media print {
  .hero--metal > .pe-nebo, .page-hero > .pe-nebo { display: none; }
  .pe-znak { animation: none; filter: none; }
}

/* ============================================================
   9. КНОПКА ХРИСЫ — В КАДРЕ БЕЗ ПРОКРУТКИ (задача 1847, идея О1 владельца)
   ============================================================

   ЧТО БЫЛО. Круг 1834 поставил кнопку под строкой и проверил, что она ЕСТЬ.
   Она и была — ниже сгиба: щуп круга 1847 по всем 219 страницам нашёл 53
   замера, где низ кнопки уходит за нижнюю кромку окна (44 на ноутбуке
   1440×900, 9 на телефоне 390×844; худший перелёт 153 px). Гость из поиска
   видел заголовок и три абзаца, а кнопку — только плавающую в углу, то есть
   ровно то состояние, ради ухода от которого заводился круг 1834.

   ПОЧЕМУ ПЕРЕЛЕТАЛО. Три слагаемых, все три — про воздух, а не про слова:
     · знак 150 px + отступ хиро 72 px сверху съедали 220 px до заголовка;
     · заголовок в геройской сетке ограничен 18ch и на длинной фразе
       разворачивался в ПЯТЬ строк по 64 px — 320 px под один заголовок;
     · между строкой и парой действий стояли ещё 16 + 32 px.
   Тексты при этом трогать нельзя (граница круга) — и не нужно: перелёт
   лечится вертикалью.

   ПРАВИЛА ЗДЕСЬ УЗКИЕ ПО ПОСТРОЕНИЮ. Каждое висит на `.hero--pe` — то есть
   ровно на тех секциях, которым первый экран поставил сборщик. Страница без
   нового первого экрана (главная, карты сайта, «О A.L.E.X.») не меняется ни
   на пиксель, и это проверяет щуп по всему дереву, а не по пяти страницам.

   ВЫСОТА ОКНА — В ЕДИНИЦАХ, А НЕ В ДОГАДКАХ. Знак и отступы считаются от
   `vh`: на низком окне (900 px ноутбука) они ужимаются сами, на высоком
   мониторе остаются прежними. Ограничитель `min()` внутри `clamp()` — чтобы
   ширина знака никогда не выросла выше того, что помещается по высоте. */

/* 9.1. Воздух вокруг первого экрана. Отступ хиро — от высоты окна: 72 px
        сверху на окне 900 px это 8 % экрана, отданных пустоте. */
.hero.hero--pe,
.page-hero.hero--pe {
  padding-top: clamp(.75rem, 2.2vh, 2rem);
  padding-bottom: clamp(.75rem, 2.2vh, 2rem);
}

/* 9.2. Знак остаётся большим, но перестаёт спорить с заголовком за экран.
        На 1440×900 это 72 px вместо 150 (8vh), на широком и высоком
        мониторе — до 118 px. Дыхание, тень и маска не трогаются. */
.hero--pe .pe-znak {
  width: clamp(56px, min(7vw, 8vh), 118px);
  margin-bottom: .15rem;
}

/* 9.3. Заголовок и строки: воздух между ними — тот же ритм, но на шаг тише.
        Строки НЕ режутся и не прячутся: меняются только поля. */
.hero--pe .kicker { margin-bottom: .3rem; }
.hero--pe h1 { margin-bottom: .24em; }
.hero--pe .lead { margin-bottom: .22rem; }
.hero--pe .cta-pair { margin-top: .8rem; }

/* 9.4. ДЛИННЫЙ ЗАГОЛОВОК — НА ШАГ МЕНЬШЕ ШРИФТ (п.1 файла владельца).
        Класс ставит сборщик по числу знаков в H1 (build.PE_DLINNYY_POROG =
        48): CSS считать знаки не умеет, а адрес страницы про длину заголовка
        ничего не говорит. Вместе с кеглем растёт мера строки — 22ch вместо
        18ch: иначе более мелкий шрифт дал бы то же число строк, только ниже,
        и экономии не вышло бы вовсе. Текст остаётся целым — режется только
        кегль. */
.hero--pe-dlinno h1 {
  font-size: clamp(1.5rem, 3.8vw, 2.35rem);
  max-width: 22ch;
}

/* 9.5. Телефон 390×844. Здесь пара действий не строка, а столбик из трёх
        кнопок, и каждая лишняя высота стоит целой кнопки. Знак меньше (но не
        меньше 40 px — иначе это уже не знак, а точка), кнопки ниже на
        полсантиметра, поля строк тише. */
@media (max-width: 640px) {
  .hero--pe .pe-znak { width: clamp(40px, min(11vw, 4vh), 72px); }
  .hero--pe .lead { margin-bottom: .22rem; }
  .hero--pe .cta-pair { margin-top: .5rem; gap: 8px; }
  .hero--pe .cta-pair .btn { min-height: 44px; padding-top: .55rem; padding-bottom: .55rem; }
  .hero--pe .kicker { margin-bottom: .3rem; }
}

/* ---------- 10. Deviz pod zagolovkom (zadacha 1950, p.4) ---------- */
.hero--pe .pe-deviz {
  margin: 8px 0 14px; font-size: 14px; line-height: 1.45; letter-spacing: .02em;
  color: var(--pe-deviz, #D4AF37); max-width: 40em;
}
@media (max-width: 760px) { .hero--pe .pe-deviz { font-size: 13px; margin: 6px 0 12px; } }