/* SESSION TESTS — AURA (Now Playing)
   Динамический фон под обложку играющего трека Spotify, как экран
   блокировки iPhone / Apple Music. Управляется scripts/aura-bg.js:
   палитра приходит в --aura-c1..c4 / --aura-accent / --aura-veil на body.
   Состояние — body[data-aura="idle|playing|paused"]. */

/* ── Регистрация анимируемых CSS-переменных (@property) ─────────── */
@property --aura-c1 { syntax: '<color>'; inherits: true; initial-value: #e9e9ef; }
@property --aura-c2 { syntax: '<color>'; inherits: true; initial-value: #6f707c; }
@property --aura-c3 { syntax: '<color>'; inherits: true; initial-value: #b9bcc7; }
@property --aura-c4 { syntax: '<color>'; inherits: true; initial-value: #3d3e48; }
@property --aura-accent { syntax: '<color>'; inherits: true; initial-value: #ffffff; }
@property --aura-accent2 { syntax: '<color>'; inherits: true; initial-value: #d8d9e0; }
@property --aura-accent-contrast { syntax: '<color>'; inherits: true; initial-value: #0b0b0e; }
@property --aura-base-mid { syntax: '<color>'; inherits: true; initial-value: #1a1a22; }
@property --aura-base-fog { syntax: '<color>'; inherits: true; initial-value: #cfcfd8; }
@property --aura-veil { syntax: '<number>'; inherits: true; initial-value: 0.44; }

/* ── Дефолтные значения (до первого запуска aura-bg.js) ──────────── */
body[data-theme="aura"] {
    --aura-c1: #e9e9ef;
    --aura-c2: #6f707c;
    --aura-c3: #b9bcc7;
    --aura-c4: #3d3e48;
    --aura-accent: #ffffff;
    --aura-accent2: #d8d9e0;
    --aura-accent-contrast: #0b0b0e;
    --aura-base-mid: #1a1a22;
    --aura-base-fog: #cfcfd8;
    --aura-veil: 0.44;
    --aura-glass: 0.5;
    --aura-glass-header: 0.42;
    background: #0b0b0e;
    transition:
        --aura-c1 1.5s ease,
        --aura-c2 1.5s ease,
        --aura-c3 1.5s ease,
        --aura-c4 1.5s ease,
        --aura-accent 1.5s ease,
        --aura-accent2 1.5s ease,
        --aura-accent-contrast 1.5s ease,
        --aura-base-mid 1.6s ease,
        --aura-base-fog 1.6s ease,
        --aura-veil 1.5s ease;
}

/* Не рисуем чужие слои: CRT, скан-линии, матрица, abstract-фигуры */
body[data-theme="aura"]::before,
body[data-theme="aura"]::after { content: none !important; }
body[data-theme="aura"] #matrix-bg,
body[data-theme="aura"] #abstract-canvas { display: none !important; }

/* ── Слой фона ───────────────────────────────────────────────────── */
#aura-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
    background: #0b0b0e;
    --aura-fallback: 0;
}

#aura-bg .aura-base {
    position: absolute;
    inset: 0;
    background: linear-gradient(163deg, #0a0a0e 0%, var(--aura-base-mid, #1a1a22) 44%, var(--aura-base-fog, #cfcfd8) 130%);
}

#aura-bg .aura-veil {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, var(--aura-veil, 0.44));
}

#aura-bg .aura-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 120% at 50% 38%, transparent 55%, rgba(0, 0, 0, 0.5) 100%);
}

#aura-bg .aura-grain {
    position: absolute;
    inset: 0;
    opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='1'/%3E%3C/svg%3E");
}

/* ── Серо-белые блики для idle-состояния ─────────────────────────── */
#aura-bg .aura-mists {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.4s ease;
}
body[data-aura="idle"] #aura-bg .aura-mists { opacity: 1; }

#aura-bg .aura-mist {
    position: absolute;
    border-radius: 50%;
    will-change: transform;
}
#aura-bg .aura-mist:nth-child(1) {
    width: 48vmax; height: 48vmax; left: 6vmax; top: 8vmax;
    background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.16), transparent 68%);
    animation: auraMistFloat 26s ease-in-out infinite alternate;
}
#aura-bg .aura-mist:nth-child(2) {
    width: 40vmax; height: 40vmax; right: 4vmax; top: 26vmax;
    background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.12), transparent 66%);
    animation: auraMistFloat 32s ease-in-out infinite alternate-reverse;
}
#aura-bg .aura-mist:nth-child(3) {
    width: 34vmax; height: 34vmax; left: 34vmax; bottom: -6vmax;
    background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.1), transparent 66%);
    animation: auraMistFloat 38s ease-in-out infinite alternate;
}

/* ── Blob'ы (палитра обложки) ────────────────────────────────────── */
#aura-bg .aura-blobs,
#aura-bg .aura-blobs-b {
    position: absolute;
    inset: 0;
}
#aura-bg .aura-blobs-b { display: none; }

#aura-bg .aura-blob {
    position: absolute;
    border-radius: 50%;
    will-change: transform, opacity;
}
#aura-bg .aura-blob:nth-child(1) {
    width: 66vmax; height: 66vmax; left: -14vmax; top: -16vmax;
    background: radial-gradient(circle at 50% 50%, var(--aura-c1), transparent 68%);
    animation: auraDriftCalm 40s ease-in-out infinite alternate;
}
#aura-bg .aura-blob:nth-child(2) {
    width: 56vmax; height: 56vmax; right: -12vmax; top: -6vmax;
    background: radial-gradient(circle at 50% 50%, var(--aura-c2), transparent 68%);
    animation: auraDriftCalm 44s ease-in-out infinite alternate-reverse;
}
#aura-bg .aura-blob:nth-child(3) {
    width: 52vmax; height: 52vmax; left: -8vmax; bottom: -14vmax;
    background: radial-gradient(circle at 50% 50%, var(--aura-c3), transparent 68%);
    animation: auraDriftCalm 38s ease-in-out infinite alternate;
}
#aura-bg .aura-blob:nth-child(4) {
    width: 48vmax; height: 48vmax; right: -6vmax; bottom: -10vmax;
    background: radial-gradient(circle at 50% 50%, var(--aura-c4), transparent 68%);
    animation: auraDriftCalm 42s ease-in-out infinite alternate-reverse;
}

/* playing — чуть живее */
body[data-aura="playing"] #aura-bg .aura-blob:nth-child(1) { animation-name: auraDriftLive; animation-duration: 24s; }
body[data-aura="playing"] #aura-bg .aura-blob:nth-child(2) { animation-name: auraDriftLive; animation-duration: 28s; }
body[data-aura="playing"] #aura-bg .aura-blob:nth-child(3) { animation-name: auraDriftLive; animation-duration: 22s; }
body[data-aura="playing"] #aura-bg .aura-blob:nth-child(4) { animation-name: auraDriftLive; animation-duration: 26s; }

/* paused / idle — движение спокойное */
body[data-aura="paused"] #aura-bg .aura-blob:nth-child(1),
body[data-aura="idle"] #aura-bg .aura-blob:nth-child(1) { animation-name: auraDriftCalm; animation-duration: 52s; }
body[data-aura="paused"] #aura-bg .aura-blob:nth-child(2),
body[data-aura="idle"] #aura-bg .aura-blob:nth-child(2) { animation-name: auraDriftCalm; animation-duration: 58s; }
body[data-aura="paused"] #aura-bg .aura-blob:nth-child(3),
body[data-aura="idle"] #aura-bg .aura-blob:nth-child(3) { animation-name: auraDriftCalm; animation-duration: 49s; }
body[data-aura="paused"] #aura-bg .aura-blob:nth-child(4),
body[data-aura="idle"] #aura-bg .aura-blob:nth-child(4) { animation-name: auraDriftCalm; animation-duration: 55s; }

@keyframes auraDriftCalm {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(6vw, 4vh) scale(1.06); }
}
@keyframes auraDriftLive {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(-5vw, 5vh) scale(1.1); }
    100% { transform: translate(6vw, -3vh) scale(1.04); }
}
@keyframes auraMistFloat {
    0%   { transform: translate(0, 0); opacity: 0.7; }
    100% { transform: translate(5vw, 4vh); opacity: 1; }
}

/* Вкладка скрыта — всё на паузе */
body[data-aura-hidden="true"] #aura-bg .aura-blob,
body[data-aura-hidden="true"] #aura-bg .aura-mist {
    animation-play-state: paused !important;
}

/* ── Fallback без @property: кроссфейд двух слоёв A/B ────────────── */
body[data-aura-fallback] #aura-bg .aura-blobs,
body[data-aura-fallback] #aura-bg .aura-blobs-b {
    display: block;
    transition: opacity 1.4s ease;
}
body[data-aura-fallback] #aura-bg .aura-blobs  { opacity: 1; }
body[data-aura-fallback] #aura-bg .aura-blobs-b { opacity: 0; }
body[data-aura-fallback].aura-live-b #aura-bg .aura-blobs  { opacity: 0; }
body[data-aura-fallback].aura-live-b #aura-bg .aura-blobs-b { opacity: 1; }
body[data-aura-fallback].performance-mode #aura-bg .aura-blobs,
body[data-aura-fallback].performance-mode #aura-bg .aura-blobs-b {
    transition: opacity 0.01s;
}

/* ── Производительность ──────────────────────────────────────────── */
body.performance-mode[data-theme="aura"] #aura-bg .aura-blob,
body.performance-mode[data-theme="aura"] #aura-bg .aura-mist {
    animation: none !important;
}

/* ── Стеклянный UI: шапка, плеер, модалки, карточки ──────────────── */
body[data-theme="aura"] .st-header {
    background: rgba(13, 15, 21, var(--aura-glass-header, 0.42));
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-bottom-color: rgba(255, 255, 255, 0.1);
}
body[data-theme="aura"] .st-player {
    background: rgba(16, 18, 26, var(--aura-glass, 0.55));
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border-color: rgba(255, 255, 255, 0.16);
}
body[data-theme="aura"] .st-modal-card {
    background: rgba(18, 20, 29, var(--aura-glass, 0.6));
    backdrop-filter: blur(22px) saturate(140%);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    border-color: rgba(255, 255, 255, 0.14);
}
body[data-theme="aura"] .ig-note-modal-card {
    background: rgba(18, 20, 29, var(--aura-glass, 0.6));
    backdrop-filter: blur(22px) saturate(140%);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    border-color: rgba(255, 255, 255, 0.14);
}
body[data-theme="aura"] .card,
body[data-theme="aura"] .hero,
body[data-theme="aura"] .score-card,
body[data-theme="aura"] .section {
    background: rgba(16, 18, 26, var(--aura-glass, 0.48));
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
}
body.performance-mode[data-theme="aura"] .st-header,
body.performance-mode[data-theme="aura"] .st-player,
body.performance-mode[data-theme="aura"] .st-modal-card,
body.performance-mode[data-theme="aura"] .ig-note-modal-card,
body.performance-mode[data-theme="aura"] .card,
body.performance-mode[data-theme="aura"] .hero,
body.performance-mode[data-theme="aura"] .score-card,
body.performance-mode[data-theme="aura"] .section {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(12, 14, 20, 0.88);
}

/* Контент поверх blobs остаётся читаемым */
body[data-theme="aura"] .st-main,
body[data-theme="aura"] #app-view {
    position: relative;
    z-index: 0;
}