/* ===== Global Fixed Background ===== */
.global-background {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    background: #0a0a0a;
}

.bg-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.6;
    will-change: transform;
    /* Remove transition for smooth JS animation */
}

.bg-orb-1 {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.6) 0%, transparent 70%);
    top: -200px;
    right: -200px;
}

.bg-orb-2 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.5) 0%, transparent 70%);
    bottom: -150px;
    left: -150px;
}

.bg-orb-3 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(236, 72, 153, 0.5) 0%, transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.bg-orb-4 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255, 206, 84, 0.4) 0%, transparent 70%);
    top: 20%;
    left: 10%;
}

.bg-orb-5 {
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.3) 0%, transparent 70%);
    bottom: 10%;
    right: 10%;
}

/* Mouse interaction states */
.mouse-active .bg-orb {
    filter: blur(100px) brightness(1.3);
    transition: filter 0.3s ease;
}

/* Keyboard interaction states */
.keyboard-press .bg-orb {
    filter: blur(120px) brightness(1.5) saturate(1.5);
    transition: filter 0.2s ease;
}