/* Brand canvas shared by panels and mobile dialog backdrops. */
:root {
    --aion-rail-gap: 8px;
    --aion-canvas-light:
        radial-gradient(ellipse at 44% -12%, #ffffffed 0%, #ffffff00 43%),
        radial-gradient(ellipse at 100% 5%, #7497ffb8 0%, #7497ff00 53%),
        radial-gradient(ellipse at -8% 78%, #41cfe2a8 0%, #41cfe200 47%),
        radial-gradient(ellipse at 72% 112%, #7edba9a6 0%, #7edba900 42%),
        radial-gradient(ellipse at 12% -8%, #a99bf880 0%, #a99bf800 48%),
        linear-gradient(135deg, #e9efff, #e2f4f9 54%, #e8e5ff);
    --aion-canvas-dark:
        radial-gradient(ellipse at 88% -10%, #3653bc80 0%, #3653bc00 50%),
        radial-gradient(ellipse at -12% 82%, #15945459 0%, #15945400 45%),
        radial-gradient(ellipse at 82% 112%, #403ca366 0%, #403ca300 40%),
        radial-gradient(ellipse at 4% -15%, #6e46ad70 0%, #6e46ad00 44%),
        linear-gradient(140deg, #10162e, #0c1522 54%, #171a35);
    --aion-edge-light: #fffffff0;
    --aion-edge-dark: #adc5ff70;
    --aion-glow-light: 0 18px 60px #25358024, 0 0 32px #ffffffb3, 0 0 64px #4c91ff45, 0 14px 70px #36c8b52e;
    --aion-glow-dark: 0 16px 44px #0005, 0 0 22px #879cff33, 0 0 48px #4350c538, 0 12px 56px #15945426;
    --aion-drift-light:
        radial-gradient(ellipse at 5% 18%, #6158b878 0%, transparent 52%),
        radial-gradient(ellipse at 100% 58%, #22985966 0%, transparent 48%),
        radial-gradient(ellipse at 34% 106%, #4b60d280 0%, transparent 45%);
    --aion-drift-dark:
        radial-gradient(ellipse at 90% 5%, #8756dc99 0%, transparent 48%),
        radial-gradient(ellipse at 4% 65%, #00a44880 0%, transparent 48%),
        radial-gradient(ellipse at 68% 100%, #3d53ce8c 0%, transparent 46%);
}

/* A slightly deeper surround balances the large white desktop workspace. */
@media (min-width: 1280px) {
    :root {
        --aion-canvas-light:
            radial-gradient(ellipse at 44% -12%, #ffffff99 0%, #ffffff00 43%),
            radial-gradient(ellipse at 100% 5%, #647bce99 0%, #647bce00 53%),
            radial-gradient(ellipse at -8% 78%, #3ba37e70 0%, #3ba37e00 47%),
            radial-gradient(ellipse at 72% 112%, #74a9b380 0%, #74a9b300 42%),
            radial-gradient(ellipse at 12% -8%, #8171b880 0%, #8171b800 48%),
            linear-gradient(135deg, #cdd5e9, #bfd8d9 54%, #cbc7e2);
    }
}

/* Narrow surrounds need much less light, especially beside the floating dock. */
@media (max-width: 1279px) {
    :root {
        --aion-canvas-dark:
            radial-gradient(ellipse at 100% 0%, #354fa842 0%, #354fa800 46%),
            radial-gradient(ellipse at -8% 85%, #14834a33 0%, #14834a00 44%),
            radial-gradient(ellipse at 10% -12%, #68429d42 0%, #68429d00 42%),
            linear-gradient(145deg, #12162b, #0d191e 58%, #18172e);
        --aion-edge-dark: #a5b5e84d;
        --aion-glow-dark: 0 6px 20px #0003, 0 0 12px #768beb24, 0 0 22px #15945412;
    }
}

/* One non-interactive layer, behind the opaque workspace; only compositor
   properties move. No animated blur, shadows, or repainting gradients. */
.studio-shell {
    --aion-drift: var(--aion-drift-light);
    --aion-drift-low: .12;
    --aion-drift-high: .28;
    isolation: isolate;
}
.studio-shell.aion-panel-shell--dark {
    --aion-drift: var(--aion-drift-dark);
    --aion-drift-low: .3;
    --aion-drift-high: .65;
}
.studio-shell::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background: var(--aion-drift);
    opacity: var(--aion-drift-low);
    transform: scale(1.06);
    contain: strict;
}
@media (max-width: 1279px) {
    .studio-shell.aion-panel-shell--dark {
        --aion-drift-low: .12;
        --aion-drift-high: .3;
    }
}
@media (prefers-reduced-motion: no-preference) {
    .studio-shell::after {
        animation: aion-ambient-drift 24s ease-in-out infinite alternate;
    }
}
@keyframes aion-ambient-drift {
    from { opacity: var(--aion-drift-low); transform: translate3d(-2%, 1%, 0) scale(1.06); }
    50% { opacity: var(--aion-drift-high); transform: translate3d(1%, -2%, 0) scale(1.1); }
    to { opacity: var(--aion-drift-low); transform: translate3d(2%, 2%, 0) scale(1.06); }
}