/* Живой фон и появление блоков — общие для лендинга и личного кабинета.
Разметку фона страница объявляет сама (см. комментарий ниже), поведение
включает shared/motion.js. Лежит отдельно от tokens.css, потому что токены
нужны всем, а атмосфера — только страницам с прокруткой. */
/* Разметка, которую ждёт этот файл:
*/
.backdrop {
position: fixed;
inset: 0;
z-index: -1;
overflow: hidden;
pointer-events: none;
/* Заполняется скриптом: 0 → 1 по мере прокрутки страницы. */
--p: 0;
}
.orb {
position: absolute;
border-radius: 50%;
filter: blur(90px);
/* Множитель — токен страницы стримера. Лендинг его не объявляет, поэтому
там остаётся прежние 0.5. */
opacity: calc(0.5 * var(--sp-orbs, 1));
will-change: transform;
}
/* Цвет пятен читается из токенов страницы стримера с запасным значением
лендинга. Лендинг токенов не объявляет, поэтому для него ничего не меняется;
страница стримера подставляет свои — до 09.08.2026 живой фон оставался
фиолетовым, какой бы акцент стример ни выбрал. */
.orb-1 {
width: 46vw; height: 46vw;
left: -8vw; top: -6vw;
background: radial-gradient(circle, var(--sp-glow-1, rgba(139, 92, 246, 0.75)), transparent 65%);
transform: translate3d(0, calc(var(--p) * 22vh), 0);
}
.orb-2 {
width: 38vw; height: 38vw;
right: -6vw; top: 24vh;
background: radial-gradient(circle, var(--sp-glow-2, rgba(56, 189, 248, 0.45)), transparent 65%);
transform: translate3d(0, calc(var(--p) * -34vh), 0);
}
.orb-3 {
width: 42vw; height: 42vw;
left: 22vw; top: 82vh;
background: radial-gradient(circle, var(--sp-glow-3, rgba(236, 72, 153, 0.38)), transparent 65%);
transform: translate3d(0, calc(var(--p) * -46vh), 0);
}
/* Сетка поверх пятен: даёт «интерфейсную» фактуру и гасит полосы градиента. */
.veil {
position: absolute;
inset: -50%;
opacity: var(--sp-veil, 1);
background-image:
linear-gradient(var(--sp-veil-color, rgba(139, 92, 246, 0.05)) 1px, transparent 1px),
linear-gradient(90deg, var(--sp-veil-color, rgba(139, 92, 246, 0.05)) 1px, transparent 1px);
background-size: 64px 64px;
mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 70%);
transform: translate3d(0, calc(var(--p) * -8vh), 0);
}
#dust { position: absolute; inset: 0; width: 100%; height: 100%; opacity: var(--sp-dust, 1); }
.scroll-progress {
position: fixed;
top: 0; left: 0; right: 0;
height: 2px;
z-index: 20;
background: transparent;
}
.scroll-progress span {
display: block;
height: 100%;
width: 0;
background: linear-gradient(90deg, var(--accent), hsl(190, 90%, 60%));
box-shadow: 0 0 12px var(--accent-glow);
}
/* Скрыт только при живом скрипте (класс ставит инлайн в ): страница без
JS должна показать весь текст, а не пустоту. */
.js-anim .reveal {
opacity: 0;
transform: translateY(26px);
transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.js-anim .reveal.is-in { opacity: 1; transform: none; }
/* Уважение к системной настройке: без движения остаются только смысл и цвет. */
@media (prefers-reduced-motion: reduce) {
.js-anim .reveal { opacity: 1; transform: none; transition: none; }
.orb, .veil { transform: none; }
#dust { display: none; }
}