.gradient-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: linear-gradient(120deg, var(--color-bg1), var(--color-bg2));
    z-index: 0;
}

.gradients-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    filter: blur(80px);
    -webkit-filter: blur(80px);
}

.g1, .g2, .g3, .g4, .g5, .interactive {
    position: absolute;
    border-radius: 50%;
}

.g1 {
    background: radial-gradient(circle, rgba(var(--color1), 0.5) 0, rgba(var(--color1), 0) 70%) no-repeat;
    width: 55%;
    height: 55%;
    top: -10%;
    left: -5%;
    opacity: 0.8;
    mix-blend-mode: soft-light;
    animation: float1 20s ease-in-out infinite;
}

.g2 {
    background: radial-gradient(circle, rgba(var(--color2), 0.45) 0, rgba(var(--color2), 0) 70%) no-repeat;
    width: 50%;
    height: 50%;
    top: 40%;
    right: -10%;
    opacity: 0.8;
    mix-blend-mode: soft-light;
    animation: float2 25s ease-in-out infinite;
}

.g3 {
    background: radial-gradient(circle, rgba(var(--color3), 0.45) 0, rgba(var(--color3), 0) 70%) no-repeat;
    width: 45%;
    height: 45%;
    bottom: -10%;
    left: 10%;
    opacity: 0.75;
    mix-blend-mode: soft-light;
    animation: float3 22s ease-in-out infinite;
}

.g4 {
    background: radial-gradient(circle, rgba(var(--color4), 0.4) 0, rgba(var(--color4), 0) 70%) no-repeat;
    width: 40%;
    height: 40%;
    top: 30%;
    left: 30%;
    opacity: 0.7;
    mix-blend-mode: soft-light;
    animation: float1 18s ease-in-out infinite reverse;
}

.g5 {
    background: radial-gradient(circle, rgba(var(--color5), 0.4) 0, rgba(var(--color5), 0) 70%) no-repeat;
    width: 35%;
    height: 35%;
    top: 20%;
    left: 50%;
    opacity: 0.7;
    mix-blend-mode: soft-light;
    animation: float2 15s ease-in-out infinite reverse;
}

.interactive {
    background: radial-gradient(circle, rgba(var(--color-interactive), 0.5) 0, rgba(var(--color-interactive), 0) 60%) no-repeat;
    width: 60%;
    height: 60%;
    top: 20%;
    left: 20%;
    opacity: 0.75;
    mix-blend-mode: soft-light;
    pointer-events: none;
}

@keyframes float1 {
    0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); }
    25% { transform: translate(80px, -60px) scale(1.15) rotate(5deg); }
    50% { transform: translate(-40px, 80px) scale(0.9) rotate(-3deg); }
    75% { transform: translate(-90px, -30px) scale(1.1) rotate(7deg); }
}

@keyframes float2 {
    0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); }
    25% { transform: translate(-70px, 90px) scale(0.85) rotate(-5deg); }
    50% { transform: translate(100px, -40px) scale(1.2) rotate(3deg); }
    75% { transform: translate(30px, -80px) scale(0.95) rotate(-7deg); }
}

@keyframes float3 {
    0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); }
    33% { transform: translate(90px, -70px) scale(1.2) rotate(4deg); }
    66% { transform: translate(-80px, 60px) scale(0.85) rotate(-4deg); }
}