:root {
    /* Définissez vos couleurs ici */
    --gradient-color-1: #311b92;
    --gradient-color-2: #512da8;
    --gradient-color-3: #ffb300;

    /* Autres paramètres personnalisables */
    --blur-intensity: 200px;
    --blur-opacity: 1;
    --animation-duration: 20s;
}

.gradient-section {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.blur-effect {
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    filter: blur(var(--blur-intensity));
    background: linear-gradient(
        45deg,
        var(--gradient-color-1),
        var(--gradient-color-2),
        var(--gradient-color-3)
    );
    opacity: var(--blur-opacity);
    transform: translate(-50%, -50%);
    animation: moveGradient var(--animation-duration) infinite alternate ease-in-out;
}

.blur-effect-light {
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    filter: blur(var(--blur-intensity));
    background: linear-gradient(
        45deg,
        var(--gradient-color-1),
        var(--gradient-color-2),
        var(--gradient-color-3)
    );
    opacity: var(--blur-opacity);
    transform: translate(-50%, -50%);
    animation: moveGradient var(--animation-duration) infinite alternate ease-in-out;
}

@keyframes moveGradient {
    0% {
        left: 25%;
        top: 25%;
    }
    50% {
        left: 75%;
        top: 75%;
    }
    100% {
        left: 25%;
        top: 75%;
    }
}