.global-dynamic-bg {
    --ambient-x: 0;
    --ambient-y: 0;
    --ambient-cursor-x: 50%;
    --ambient-cursor-y: 42%;
    --ambient-presence: 0;
    position: fixed;
    inset: 0;
    z-index: -10;
    pointer-events: none;
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 12%, rgba(37, 180, 174, 0.12), transparent 34%),
        radial-gradient(circle at 82% 16%, rgba(73, 125, 176, 0.09), transparent 36%),
        linear-gradient(180deg, #f8fbff 0%, #f2f7fb 52%, #eef5f3 100%);
    isolation: isolate;
}

.global-dynamic-bg::before {
    content: "";
    position: absolute;
    inset: -18%;
    background:
        radial-gradient(ellipse at 24% 32%, rgba(37, 180, 174, 0.11), transparent 46%),
        radial-gradient(ellipse at 72% 28%, rgba(73, 125, 176, 0.09), transparent 44%),
        radial-gradient(ellipse at 48% 78%, rgba(33, 105, 92, 0.07), transparent 48%);
    filter: blur(70px);
    opacity: 0.86;
    transform:
        translate3d(calc(var(--ambient-x) * 16px), calc(var(--ambient-y) * 12px), 0)
        scale(1.04);
    animation: ambient-aurora-drift 96s ease-in-out infinite alternate;
}

.global-dynamic-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            circle at var(--ambient-cursor-x) var(--ambient-cursor-y),
            rgba(31, 143, 138, calc(0.035 + var(--ambient-presence) * 0.055)),
            rgba(73, 125, 176, calc(0.014 + var(--ambient-presence) * 0.022)) 18%,
            transparent 42%
        );
    filter: blur(34px);
    opacity: 0.76;
    mix-blend-mode: multiply;
    transition: opacity 1.2s ease;
}

.circuit-board-field,
.aurora-intelligence-field,
.neural-fog-field,
.ambient-response-field,
.star-layer,
.nebula-glow {
    position: absolute;
    inset: -20%;
    will-change: transform, opacity;
}

.circuit-board-field {
    inset: -16%;
    background:
        radial-gradient(circle at 14% 22%, rgba(31, 143, 138, 0.18) 0 2px, transparent 3px),
        radial-gradient(circle at 38% 48%, rgba(73, 125, 176, 0.16) 0 2px, transparent 3px),
        radial-gradient(circle at 64% 28%, rgba(31, 143, 138, 0.15) 0 2px, transparent 3px),
        radial-gradient(circle at 82% 70%, rgba(73, 125, 176, 0.14) 0 2px, transparent 3px),
        linear-gradient(90deg, transparent 0 22%, rgba(31, 143, 138, 0.09) 22.4% 22.9%, transparent 23.3% 100%),
        linear-gradient(180deg, transparent 0 54%, rgba(73, 125, 176, 0.08) 54.4% 54.9%, transparent 55.3% 100%),
        linear-gradient(135deg, transparent 0 47%, rgba(31, 143, 138, 0.055) 47.4% 48.1%, transparent 48.5% 100%);
    background-size:
        260px 220px,
        320px 260px,
        360px 240px,
        300px 280px,
        260px 260px,
        300px 300px,
        180px 180px;
    background-position:
        8px 14px,
        44px 78px,
        100px 22px,
        24px 104px,
        0 0,
        18px 12px,
        0 0;
    opacity: 0.46;
    mask-image:
        radial-gradient(ellipse at 50% 42%, rgba(0, 0, 0, 0.86), rgba(0, 0, 0, 0.5) 42%, transparent 82%);
    transform:
        translate3d(calc(var(--ambient-x) * 8px), calc(var(--ambient-y) * 6px), 0)
        scale(1.02);
    animation: circuit-board-drift 118s ease-in-out infinite alternate;
}

.circuit-board-field::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, transparent, rgba(31, 143, 138, 0.08), transparent),
        linear-gradient(180deg, transparent, rgba(73, 125, 176, 0.055), transparent);
    background-size: 340px 100%, 100% 320px;
    opacity: calc(0.42 + var(--ambient-presence) * 0.18);
    transform:
        translate3d(calc(var(--ambient-x) * -10px), calc(var(--ambient-y) * 8px), 0);
    animation: circuit-board-current 136s ease-in-out infinite alternate;
}

.aurora-intelligence-field {
    background:
        conic-gradient(
            from 210deg at 52% 48%,
            transparent 0deg,
            rgba(35, 191, 184, 0.08) 42deg,
            rgba(55, 117, 160, 0.07) 98deg,
            transparent 154deg,
            rgba(31, 122, 106, 0.06) 224deg,
            transparent 310deg
        );
    filter: blur(92px);
    opacity: 0.62;
    mix-blend-mode: multiply;
    transform:
        translate3d(calc(var(--ambient-x) * -18px), calc(var(--ambient-y) * 14px), 0)
        rotate(0.001deg);
    animation: ambient-gradient-breathe 124s ease-in-out infinite alternate;
}

.neural-fog-field {
    background:
        radial-gradient(ellipse at 28% 62%, rgba(83, 177, 191, 0.075), transparent 42%),
        radial-gradient(ellipse at 66% 46%, rgba(42, 146, 130, 0.06), transparent 44%),
        radial-gradient(ellipse at 54% 20%, rgba(71, 106, 150, 0.06), transparent 38%);
    filter: blur(58px);
    opacity: 0.78;
    transform:
        translate3d(calc(var(--ambient-x) * 10px), calc(var(--ambient-y) * -10px), 0)
        scale(1.02);
    animation: neural-fog-drift 148s ease-in-out infinite alternate;
}

.ambient-response-field {
    inset: -8%;
    background:
        linear-gradient(115deg, transparent 18%, rgba(31, 143, 138, 0.04), transparent 58%),
        linear-gradient(245deg, transparent 24%, rgba(68, 126, 176, 0.032), transparent 66%);
    filter: blur(46px);
    opacity: calc(0.58 + var(--ambient-presence) * 0.24);
    transform:
        translate3d(calc(var(--ambient-x) * 12px), calc(var(--ambient-y) * 8px), 0)
        scale(calc(1.01 + var(--ambient-presence) * 0.012));
    animation: ambient-current 112s ease-in-out infinite alternate;
}

.star-layer,
.nebula-glow {
    display: none;
}

.star-layer {
    inset: -12%;
}

.layer-1 {
    background-image:
        radial-gradient(circle, rgba(255,255,255,0.95) 0 1px, transparent 1.6px),
        radial-gradient(circle, rgba(155, 131, 255, 0.72) 0 1px, transparent 1.8px);
    background-size: 92px 92px, 148px 148px;
    background-position: 8px 14px, 46px 70px;
    animation: star-drift-slow 92s linear infinite;
}

.layer-2 {
    background-image:
        radial-gradient(circle, rgba(36, 198, 184, 0.82) 0 1px, transparent 1.7px),
        radial-gradient(circle, rgba(241, 183, 66, 0.62) 0 1px, transparent 1.8px);
    background-size: 138px 138px, 210px 210px;
    background-position: 70px 20px, 18px 98px;
    opacity: 0.72;
    animation: star-drift-mid 64s linear infinite;
}

.layer-3 {
    background-image:
        radial-gradient(circle, rgba(255,255,255,0.8) 0 1px, transparent 1.7px),
        radial-gradient(circle, rgba(255, 115, 95, 0.62) 0 1px, transparent 1.8px);
    background-size: 64px 64px, 176px 176px;
    background-position: 32px 22px, 108px 44px;
    opacity: 0.44;
    animation: star-twinkle 5.5s ease-in-out infinite alternate;
}

[data-theme="dark"] .global-dynamic-bg {
    background:
        linear-gradient(180deg, #040812 0%, #07111d 56%, #080f18 100%);
}

[data-theme="dark"] .global-dynamic-bg::before,
[data-theme="dark"] .global-dynamic-bg::after {
    display: none;
}

[data-theme="dark"] .aurora-intelligence-field,
[data-theme="dark"] .circuit-board-field,
[data-theme="dark"] .neural-fog-field,
[data-theme="dark"] .ambient-response-field {
    display: none;
}

[data-theme="dark"] .star-layer,
[data-theme="dark"] .nebula-glow {
    display: block;
}

[data-theme="dark"] .nebula-glow {
    inset: 0;
    background:
        linear-gradient(115deg, rgba(36, 198, 184, 0.16), transparent 28%),
        linear-gradient(245deg, rgba(155, 131, 255, 0.16), transparent 30%),
        linear-gradient(180deg, transparent 0 56%, rgba(255, 115, 95, 0.1) 100%);
    opacity: 0.72;
}

@keyframes ambient-aurora-drift {
    0% {
        transform:
            translate3d(calc(var(--ambient-x) * 16px), calc(var(--ambient-y) * 12px), 0)
            scale(1.04);
    }
    100% {
        transform:
            translate3d(calc(26px + var(--ambient-x) * 16px), calc(-18px + var(--ambient-y) * 12px), 0)
            scale(1.08);
    }
}

@keyframes ambient-gradient-breathe {
    0% {
        transform:
            translate3d(calc(var(--ambient-x) * -18px), calc(var(--ambient-y) * 14px), 0)
            rotate(-3deg)
            scale(1);
    }
    100% {
        transform:
            translate3d(calc(22px + var(--ambient-x) * -18px), calc(16px + var(--ambient-y) * 14px), 0)
            rotate(4deg)
            scale(1.05);
    }
}

@keyframes neural-fog-drift {
    0% {
        transform:
            translate3d(calc(var(--ambient-x) * 10px), calc(var(--ambient-y) * -10px), 0)
            scale(1.02);
    }
    100% {
        transform:
            translate3d(calc(-18px + var(--ambient-x) * 10px), calc(20px + var(--ambient-y) * -10px), 0)
            scale(1.06);
    }
}

@keyframes ambient-current {
    0% {
        transform:
            translate3d(calc(var(--ambient-x) * 12px), calc(var(--ambient-y) * 8px), 0)
            scale(calc(1.01 + var(--ambient-presence) * 0.012));
    }
    100% {
        transform:
            translate3d(calc(16px + var(--ambient-x) * 12px), calc(-12px + var(--ambient-y) * 8px), 0)
            scale(calc(1.025 + var(--ambient-presence) * 0.012));
    }
}

@keyframes circuit-board-drift {
    0% {
        background-position:
            8px 14px,
            44px 78px,
            100px 22px,
            24px 104px,
            0 0,
            18px 12px,
            0 0;
        transform:
            translate3d(calc(var(--ambient-x) * 8px), calc(var(--ambient-y) * 6px), 0)
            scale(1.02);
    }
    100% {
        background-position:
            -18px 32px,
            70px 58px,
            124px 44px,
            4px 82px,
            26px 18px,
            -14px 34px,
            22px -18px;
        transform:
            translate3d(calc(18px + var(--ambient-x) * 8px), calc(-12px + var(--ambient-y) * 6px), 0)
            scale(1.035);
    }
}

@keyframes circuit-board-current {
    0% {
        background-position: -120px 0, 0 -110px;
    }
    100% {
        background-position: 140px 0, 0 130px;
    }
}

@keyframes star-drift-slow {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-92px, 46px, 0); }
}

@keyframes star-drift-mid {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(138px, -69px, 0); }
}

@keyframes star-twinkle {
    0% { opacity: 0.28; }
    100% { opacity: 0.62; }
}

@media (prefers-reduced-motion: reduce) {
    .global-dynamic-bg::before,
    .circuit-board-field,
    .circuit-board-field::before,
    .aurora-intelligence-field,
    .neural-fog-field,
    .ambient-response-field,
    .star-layer {
        animation: none;
    }
}