/* ============================================================
   КОСМОС ТЁМНОЙ ПОЛОСЫ
   Вынесено из portfolio.css 31.08.2026: тот же фон понадобился
   второй раз — под блоком примеров на странице услуги. Держать
   две копии полутора сотен строк ровно то, ради чего заводился
   сборщик, поэтому слои переехали сюда и получили имена, не
   привязанные к портфолио.

   Что здесь лежит:
     .dark-band     — токены тёмной темы и заливка. Объявлены на
                      дорожке, а не в :root: внутри полосы --fg,
                      --line и акценты разрешаются в тёмные, за её
                      пределами страница остаётся белой.
     .header.is-dark — шапка над полосой. Белая плашка поверх
                      космоса читается обрывом кадра.
     .cosmos__aura   — обойма слоёв: темнота, звёзды, свет, дымка.

   Порядок слоёв = глубина. Скрипт (scripts/cosmos.js) пишет на
   секцию --bg-dark, --bg-stars, --bg-haze по мере прокрутки.
   ============================================================ */

.dark-band{
  --bg:         #04050b;
  --fg:         #ffffff;
  --fg-lead:    #c7cbd8;
  --fg-mute:    rgba(255,255,255,.55);
  --line:       rgba(255,255,255,.30);
  --line-soft:  rgba(255,255,255,.14);
  --accent-1:   #2f96e0;
  --accent-2:   #a04fe0;
  --metric:     #86c98d;

  /* Поверхности и тени добавлены 31.08.2026, когда полосу поставили
     второй раз — под блок примеров. Портфолио этих токенов не трогает
     (его плитки собраны на своих градиентах стекла), а любому обычному
     блоку они нужны: карточка на `--surface` внутри полосы иначе
     остаётся белой и лежит на космосе бельевой заплатой.

     Значения полупрозрачные, а не глухие: сквозь них должны читаться
     звёзды — иначе полоса перестаёт быть глубиной и становится
     тёмной плашкой. Тени сняты по той же причине: на чёрном фоне
     тень не видна, а только съедает кадры. */
  --surface:     rgba(255,255,255,.055);
  --surface-2:   rgba(255,255,255,.04);
  --accent-wash: rgba(47,150,224,.16);
  --accent-line: rgba(255,255,255,.28);
  --shadow-card: none;
  --shadow-lift: none;

  /* Луч заголовка внутри полосы — тех же цветов, что у портфолио
     в тёмной версии: на космосе акцентная фиолетовая черта тонет,
     там ядро должно быть белым. */
  --beam-core:  #ffffff;
  --beam-edge:  #9fb4ff;
  --beam-glow:  rgba(140,165,255,.85);

  background:var(--bg);
  color:var(--fg);
}

/* ============================================================
   ШАПКА НАД ТЁМНОЙ ПОЛОСОЙ
   Сцена прилипает под шапку и уходит под неё. Шапка светлая, и
   белая плашка поверх космоса читается как обрыв кадра, поэтому
   на время прохода полосы она перекрашивается. Класс ставит
   скрипт по перекрытию шапки и дорожки.
   ============================================================ */
.header.is-dark{
  --fg:          #ffffff;
  --fg-lead:     #c7cbd8;
  --fg-mute:     rgba(255,255,255,.55);
  --line:        rgba(255,255,255,.22);
  --accent-line: rgba(255,255,255,.34);
  /* бургер залит --surface: на белом это белый круг, над полосой он
     превратился бы в светлое пятно посреди космоса */
  --surface:     rgba(255,255,255,.07);
  color:var(--fg);
}
.header.is-dark.is-scrolled{
  background:rgba(4,5,11,.72);
  border-bottom-color:rgba(255,255,255,.10);
}

.cosmos__aura{
  position:absolute;
  inset:-6% -4%;
  z-index:-1;
  overflow:hidden;
  pointer-events:none;

  /* Подложка вылезает вверх на 6% и заходит на секцию выше. Кромка у неё
     жёсткая, и на светлом соседе она читалась прямой линией поперёк
     экрана. Маска растворяет ровно эту нависающую часть: 6% вылета от
     полной высоты 112% — это первые 5.4%, берём с запасом до 8%.
     Видимой части портфолио маска не касается. */
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 8%);
          mask-image:linear-gradient(180deg, transparent 0, #000 8%);
}

/* Темнота. Первая ступень: страница уже почти чёрная, поэтому «стемнеть»
   можно только уйдя ниже фона — отсюда цвет темнее `--bg` и виньетка,
   которая закрывается от краёв. Без неё блок не читается как вход
   в космос, он просто лежит на том же фоне, что и всё остальное. */
.cosmos__deep{
  position:absolute;
  inset:0;
  background:
    radial-gradient(118% 86% at 52% 42%, transparent 34%, rgba(0,1,5,.62) 76%, rgba(0,1,5,.88) 100%),
    linear-gradient(180deg, rgba(0,1,5,.5), rgba(0,1,5,.72));
  opacity:var(--bg-dark, 1);
  pointer-events:none;
}
/* Туманность, а не пятно.
   Раньше здесь лежали три размытых круга по всей ширине — ровный градиент
   без структуры. По референсу свет собран у правого края и имеет строение:
   волокна, зерно и редкие искры. Цвет по всем слоям один, холодный синий:
   разные температуры в одном облаке сразу читаются как неон. */
.aura{
  position:absolute;
  border-radius:50%;
  mix-blend-mode:screen;
  will-change:transform;
  opacity:var(--bg-haze, 1);
}
.aura--core{
  right:-17%; top:-12%;
  width:58%; height:124%;
  background:radial-gradient(closest-side,
    rgba(66,104,234,.52),
    rgba(60,96,222,.21) 46%,
    rgba(50,84,200,.06) 68%,
    transparent 82%);
  filter:blur(66px);
  animation:aura-a 30s ease-in-out infinite alternate;
}
.aura--high{
  right:-4%; top:-30%;
  width:34%; height:70%;
  background:radial-gradient(closest-side, rgba(78,124,240,.34), rgba(78,124,240,.09) 56%, transparent 78%);
  filter:blur(58px);
  animation:aura-b 25s ease-in-out infinite alternate;
}
.aura--low{
  right:-9%; bottom:-26%;
  width:42%; height:72%;
  background:radial-gradient(closest-side, rgba(58,110,228,.30), rgba(58,110,228,.08) 58%, transparent 80%);
  filter:blur(70px);
  animation:aura-c 34s ease-in-out infinite alternate;
}

/* Фиолетовый — второй голос, не второй источник света.
   Прозрачность вдвое ниже, чем у синего ядра, и посажен он к нижней
   кромке облака, а не в центр. Если дать ему равную силу, синий и
   фиолетовый начинают спорить и читаются как неон. Оттенок из палитры
   (`--accent-2`), только чуть холоднее — тем же семейством, что
   сине-фиолетовый градиент в h1. */
.aura--violet{
  right:-12%; bottom:-8%;
  width:38%; height:66%;
  background:radial-gradient(closest-side, rgba(132,74,214,.26), rgba(132,74,214,.07) 54%, transparent 78%);
  filter:blur(74px);
  animation:aura-d 38s ease-in-out infinite alternate;
}
/* Ход был 2.5vw за 64s — это примерно полпикселя в секунду, глазом такое
   не читается вовсе, свет выглядел приклеенным. Держим 3–4 px/s: заметно,
   если смотреть, и не отвлекает, если не смотреть. */
@keyframes aura-a{ to{ transform:translate3d(-5vw,-3.2vw,0) scale(1.10); } }
@keyframes aura-b{ to{ transform:translate3d(-4vw,5vw,0)    scale(.91); } }
@keyframes aura-c{ to{ transform:translate3d(-4.6vw,-4.4vw,0) scale(1.08); } }
@keyframes aura-d{ to{ transform:translate3d(-3.6vw,-4.2vw,0) scale(1.07); } }

/* Дымка живёт на своём полотне.
   Была на трёх слоях feTurbulence: шум там статичный, двигать его можно
   только сдвигом всей картинки, а сдвиг упирается в край слоя — потому
   ход и стоял 2.8vw за 88s, то есть полпикселя в секунду. Глазом такое
   не читается, дымка выглядела приклеенной картинкой.
   На canvas текстура замощаемая, поэтому течёт бесконечно и с любой
   скоростью. Заодно ушли три отфильтрованных полотна по полтора
   мегапикселя каждое. Полотно намеренно низкого разрешения: дымка
   мягкая, пикселей не видно, а заливка выходит вчетверо дешевле. */
.haze{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  mix-blend-mode:screen;
  pointer-events:none;
  opacity:var(--bg-haze, 1);
}

/* Звёздное поле — самый дальний слой, под дымкой.
   Полотно вместо стопки отфильтрованных слоёв: только так мерцает
   каждая звезда отдельно. В SVG звезда это пиксель фильтра, его не
   поднять поштучно, гасить можно лишь поле целиком. */
.stars{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  mix-blend-mode:screen;
  pointer-events:none;
  opacity:var(--bg-stars, 1);
}

@media (prefers-reduced-motion:reduce){
  .cosmos__aura *{ animation:none; }
}