/* ============================================================
   sensim ambient.css — живой фон приложения (канонический блок).

   Цветные формы разной геометрии медленно дрейфуют под стеклянными
   панелями — переливы цвета сквозь frosted-glass. Только transform-
   анимации (GPU), blur запечён в элементе один раз.

   Использование: контейнер с классом .ambient-bg + N форм .amb-shape:
     <div class="ambient-bg" aria-hidden="true">
         <span class="amb-shape amb-1"></span> ... <span class="amb-shape amb-6"></span>
     </div>

   Копии этого блока (инлайн, для boot-страниц без AssetLoader):
   index.html (#app-loading-veil, critical CSS), login.html, activate.html,
   recover.html. Править синхронно — см. AGENTS/project/reference/design.md.
   ============================================================ */

.ambient-bg {
    position: absolute; inset: 0; z-index: 0;
    overflow: hidden; pointer-events: none;
}
.amb-shape {
    position: absolute; display: block;
    will-change: transform;
    transform: translateZ(0);
}
/* Каждая форма: свой цвет/геометрия/траектория/период. Палитра — как у
   статичной авроры (--bg-aurora): бренд-синий, янтарь, фиолет, бирюза. */
.amb-1 { /* бренд-синий круг — верхний правый дрейф */
    width: 44vmax; height: 44vmax; right: -14vmax; top: -18vmax;
    border-radius: 50%;
    background: radial-gradient(circle at 42% 38%, rgba(21,101,216,.34), rgba(21,101,216,0) 68%);
    filter: blur(38px);
    animation: amb-drift-1 44s ease-in-out infinite alternate;
}
.amb-2 { /* янтарный мягкий прямоугольник — нижний левый */
    width: 40vmax; height: 34vmax; left: -12vmax; bottom: -16vmax;
    border-radius: 42% 58% 55% 45% / 55% 48% 52% 45%;
    background: radial-gradient(ellipse at 50% 55%, rgba(228,172,62,.36), rgba(228,172,62,0) 66%);
    filter: blur(42px);
    animation: amb-drift-2 52s ease-in-out infinite alternate;
}
.amb-3 { /* фиолетовый — верхний левый, вытянутый */
    width: 34vmax; height: 26vmax; left: 4vw; top: -12vmax;
    border-radius: 58% 42% 46% 54% / 48% 56% 44% 52%;
    background: radial-gradient(ellipse at 46% 44%, rgba(123,97,196,.26), rgba(123,97,196,0) 68%);
    filter: blur(36px);
    animation: amb-drift-3 47s ease-in-out infinite alternate;
}
.amb-4 { /* бирюзовый — нижний правый */
    width: 30vmax; height: 26vmax; right: 8vw; bottom: -13vmax;
    border-radius: 45% 55% 60% 40% / 52% 44% 56% 48%;
    background: radial-gradient(ellipse at 52% 48%, rgba(76,195,165,.24), rgba(76,195,165,0) 66%);
    filter: blur(34px);
    animation: amb-drift-4 56s ease-in-out infinite alternate;
}
.amb-5 { /* небесный — центр, медленный большой обход */
    width: 24vmax; height: 24vmax; left: 38vw; top: 26vh;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 46%, rgba(56,189,248,.20), rgba(56,189,248,0) 66%);
    filter: blur(30px);
    animation: amb-drift-5 38s ease-in-out infinite alternate;
}
.amb-6 { /* розовый акцент — правый край, еле заметный */
    width: 20vmax; height: 20vmax; right: 2vw; top: 34vh;
    border-radius: 60% 40% 50% 50% / 46% 54% 46% 54%;
    background: radial-gradient(circle at 48% 50%, rgba(236,72,153,.13), rgba(236,72,153,0) 68%);
    filter: blur(28px);
    animation: amb-drift-6 61s ease-in-out infinite alternate;
}
@keyframes amb-drift-1 {
    0%   { transform: translate(0, 0) scale(1) rotate(0deg); }
    50%  { transform: translate(-9vw, 7vh) scale(1.12) rotate(8deg); }
    100% { transform: translate(-4vw, -3vh) scale(.94) rotate(-6deg); }
}
@keyframes amb-drift-2 {
    0%   { transform: translate(0, 0) scale(1) rotate(0deg); }
    50%  { transform: translate(10vw, -6vh) scale(1.1) rotate(-7deg); }
    100% { transform: translate(3vw, -10vh) scale(.96) rotate(5deg); }
}
@keyframes amb-drift-3 {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(7vw, 9vh) scale(1.14); }
    100% { transform: translate(-5vw, 4vh) scale(.92); }
}
@keyframes amb-drift-4 {
    0%   { transform: translate(0, 0) scale(1) rotate(0deg); }
    50%  { transform: translate(-8vw, -8vh) scale(1.08) rotate(6deg); }
    100% { transform: translate(5vw, -4vh) scale(.95) rotate(-5deg); }
}
@keyframes amb-drift-5 {
    0%   { transform: translate(0, 0) scale(1); }
    33%  { transform: translate(-12vw, 6vh) scale(1.15); }
    66%  { transform: translate(9vw, -7vh) scale(.9); }
    100% { transform: translate(0, 0) scale(1); }
}
@keyframes amb-drift-6 {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(-6vw, -10vh) scale(1.2); }
    100% { transform: translate(4vw, 5vh) scale(.92); }
}

/* Слои приложения над фоном задаются в theme.css (rail z-60 десктоп / 630
   мобильная, shell-main position:relative) — здесь НЕ дублируем: этот файл
   грузится после theme.css и перекрыл бы мобильный z-index рельса. */

/* При открытой модалке/шторке дрейф фона замораживаем: backdrop-blur оверлея
   и окна иначе пересэмплирует движущиеся формы каждый кадр — переходы
   «залипают». Заморозка незаметна (дрейф очень медленный). */
body:has(.channel-modal-overlay.open) .amb-shape,
body:has(.msheet-overlay) .amb-shape { animation-play-state: paused; }

/* Мобильные: фон облегчаем — меньше форм и размытия (GPU-бюджет).
   Условие — как у мобильной версии интерфейса (mobileDetect.js). */
@media (orientation: portrait), (hover: none) and (pointer: coarse) {
    .amb-4, .amb-5, .amb-6 { display: none; }
    .amb-1 { filter: blur(24px); }
    .amb-2 { filter: blur(26px); }
    .amb-3 { filter: blur(22px); }
}

/* Уважение к reduced-motion: статичная аврора без дрейфа */
@media (prefers-reduced-motion: reduce) {
    .amb-shape { animation: none !important; }
}