/* ============================================================
   Фон финального блока – анимационная сцена «северное сияние»
   (форма волны взята из каталога, demos/sofia-aurora), но цвета,
   зерно и рябь – ровно те же, что на первом экране сайта.
   Отрисовка – js/outro-scene.js.

   Раскладка. Полотно НЕ в потоке: .outro__scene – абсолютная
   обертка на всю секцию, а само полотно внутри нее залипает
   (sticky top 0, высота экрана). Иначе полотно добавило бы
   секции лишние 100svh, и js/outro.js посчитал бы высоту
   проезда с ошибкой – строка поехала бы не туда.

   Полотно ниже строки по z-index и не ловит указатель: клик и
   прокрутка проходят сквозь него.
   ============================================================ */

.outro__scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* своего overflow здесь быть НЕ должно: любое обрезание у прямого предка
     залипающего элемента ломает залипание, а обрезать и так есть чему –
     у .outro стоит overflow: clip */
  pointer-events: none;
}

.outro__gl {
  position: sticky;
  top: 0;
  display: block;
  width: 100%;
  height: 100svh;
  /* Полотно проявляется, когда сцена сделала первый кадр: до этого под
     строкой должен лежать ровный тон блока, а не пустое белое полотно */
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
}
.outro[data-scene="on"] .outro__gl { opacity: 1; }

/* Строка обязана лежать ВЫШЕ сцены. Позиционирование НЕ трогаем – его ставит
   css/outro.css и на узких экранах снимает совсем (там проезда нет). Но
   z-index работает только у позиционированного элемента, поэтому там, где
   залипание снято, ставим relative: рамка та же, что у static, а порядок
   слоев появляется */
.outro__pin { z-index: 1; }
@media (max-width: 768px) {
  .outro__pin { position: relative; }
}
@media (prefers-reduced-motion: reduce) {
  .outro__pin { position: relative; }
}

/* Запасной путь без WebGL: полотно снимаем совсем. Под строкой остается
   собственный фон блока – тон страницы, он же светлеет при инверсии */
.outro[data-scene="off"] .outro__gl { display: none; }

@media (prefers-reduced-motion: reduce) {
  .outro__gl { transition: none; }
}


/* ============================================================
   Сцена как фон ВСЕГО экрана.

   Границу на стыке подбором цвета убрать нельзя: сцена живая, ее верхний тон
   все время разный, и любая заливка соседнего блока рано или поздно с ней
   расходится – клиент видела полосу, которая «спустя время пропадает».
   Поэтому при подходе к блоку полотно закрепляется на весь экран и становится
   фоном страницы, а соседние блоки делаются прозрачными. Стыка не остается
   вовсе – это и есть просьба «сразу смена всего сайта на этот фон».
   ============================================================ */
:root[data-outro="on"] .outro__scene {
  position: fixed;
  /* inset: 0 БЕЗ height: полотно держится и за верх, и за низ видимой области.
     Прежняя высота 100dvh отменяла привязку к низу, и когда Safari на iPhone
     сворачивает адресную строку, видимая область становится выше полотна – снизу
     открывался фон холста, это и была черная полоса. */
  inset: 0;
  z-index: 0;
}
/* соседи пропускают сцену насквозь, свои заливки снимаем */
:root[data-outro="on"] .about,
:root[data-outro="on"] .competence,
:root[data-outro="on"] .outro { background-color: transparent !important; }
/* содержимое соседей остается поверх полотна */
:root[data-outro="on"] .about, 
:root[data-outro="on"] .competence { position: relative; z-index: 1; }
/* ТОЛЬКО слой, без position: родное правило .outro__pin – position: sticky,
   и именно им строка держится в центре экрана, пока блок проезжает. Мой
   relative его перебивал, и строка уезжала вверх вместе с блоком. */
:root[data-outro="on"] .outro__pin { z-index: 2; }



/* «В начало» появляется, только когда сцена встала окончательно (признак
   data-outro-ready ставит js/outro-top.js по полной занятости экрана). */
.outro__top { opacity: 0; pointer-events: none; transition: opacity .45s ease; }
:root[data-outro-ready="yes"] .outro__top { opacity: 1; pointer-events: auto; }


/* Центрирование сюда ставить НЕЛЬЗЯ. Буквы этой строки влетают СПРАВА и упруго
   встают на место – движение ведет js/outro.js по своим координатам. Правила
   align-items/justify-content на .outro__pin и margin-inline/text-align на
   строке перебивали их, и буквы стали появляться сверху. Проверено: после
   снятия движение справа вернулось. */



/* Содержимое блока НЕ закрепляем и его положение НЕ трогаем. Буквы этой строки
   влетают справа, и координаты им считает js/outro.js от положения блока: любая
   фиксация .outro__pin, flex-колонка или свой отступ у строки сбивают счет –
   движение уезжало влево и шло рвано. Проверено дважды: как только правки
   положения сняты, влет справа возвращается. Здесь допустимы только цвет,
   кегль и слои, но не геометрия.  */


/* iPhone: под нижней строкой оставалась черная лента. Причина – viewport-fit=cover
   рисует страницу под домашней полосой, а полотно сцены закреплено высотой
   100dvh: в зоне safe-area его уже нет, и там просвечивает фон холста. Полотну
   отдаем всю высоту вместе с safe-area, а блоку – отступ под полосу, чтобы
   нижняя строка не пряталась под ней. Только узкие экраны, ПК не касается. */
@media (max-width: 1099px) {
  /* Высоту полотну на телефоне НЕ задаем: bottom: auto из прежней попытки
     отвязывал его от низа, и полоса оставалась. Держится за inset: 0 выше. */
  /* Отступ под домашнюю полосу СНЯТ: он открывал снизу фон блока, и это была та
     самая черная полоса. Полотно сцены и так покрывает всю видимую область. */
}


/* Страховка от полосы при рывке прокрутки на iPhone: пока последний блок на
   экране, холст красим тоном самой сцены. Полотно и так покрывает видимую
   область, но при инерционной прокрутке Safari успевает показать фон под ней. */
@media (max-width: 1099px) {
  :root[data-outro="on"],
  :root[data-outro="on"] body { background-color: #26262a !important; }
  /* нижняя строка не должна прятаться под домашней полосой */
  :root[data-outro="on"] .outro__meta { bottom: calc(clamp(28px, 4.5svh, 56px) + env(safe-area-inset-bottom)); }
}