/* purple-only-gradient.css - Solo sfumature del viola #8572ab */

/* OPZIONE 1: Gradient viola classico (Raccomandato) */
.funky-bg-purple-only1 {
    background: 
        linear-gradient(45deg, rgba(133, 114, 171, 0.8), rgba(150, 132, 184, 0.8), rgba(165, 147, 194, 0.8), rgba(184, 169, 217, 0.8)),
        url('/static/img/background.png');
    background-size: 200% 200%, 400px 400px;
    background-repeat: no-repeat, repeat;
    background-position: center, center;
    animation: gradientShift 8s ease infinite;
    position: relative;
}
/* OPZIONE 2: Viola con sfumature più scure */
.funky-bg-purple-only2 {
    background: linear-gradient(135deg, #6b5b95 0%, #8572ab 30%, #9684b8 70%, #a593c2 100%);
    background-size: 400% 400%;
    animation: gradientShift 10s ease infinite;
    position: relative;
}

/* OPZIONE 3: Gradient radiale viola */
.funky-bg-purple-only3 {
    background: radial-gradient(circle at 40% 30%, #8572ab, #9684b8, #a593c2, #b8a9d9);
    background-size: 400% 400%;
    animation: gradientShift 12s ease infinite;
    position: relative;
}

/* OPZIONE 4: Viola con transizioni molto soft */
.funky-bg-purple-only4 {
    background: linear-gradient(120deg, 
        #8572ab 0%, 
        #8f7fb1 25%, 
        #9684b8 50%, 
        #a593c2 75%, 
        #b8a9d9 100%);
    background-size: 400% 400%;
    animation: gradientShift 9s ease infinite;
    position: relative;
}

/* OPZIONE 5: Viola intenso con sfumature profonde */
.funky-bg-purple-only5 {
    background: linear-gradient(60deg, 
        #6b5b95 0%, 
        #8572ab 20%, 
        #9684b8 40%, 
        #a593c2 60%, 
        #b8a9d9 80%, 
        #c7b8dc 100%);
    background-size: 500% 500%;
    animation: gradientShift 15s ease infinite;
    position: relative;
}

/* OPZIONE 6: Viola pastello delicato */
.funky-bg-purple-only6 {
    background: linear-gradient(90deg, 
        #a593c2, 
        #b8a9d9, 
        #c7b8dc, 
        #d6c9e3);
    background-size: 400% 400%;
    animation: gradientShift 11s ease infinite;
    position: relative;
}

/* OPZIONE 7: Viola scuro intenso */
.funky-bg-purple-only7 {
    background: linear-gradient(45deg, 
        #5a4d7c, 
        #6b5b95, 
        #8572ab, 
        #9684b8);
    background-size: 400% 400%;
    animation: gradientShift 8s ease infinite;
    position: relative;
}

/* OPZIONE 8: Viola con effetto metallico */
.funky-bg-purple-only8 {
    background: linear-gradient(135deg, 
        #8572ab 0%, 
        #7a6ba0 20%, 
        #9684b8 40%, 
        #8f7fb1 60%, 
        #a593c2 80%, 
        #9684b8 100%);
    background-size: 400% 400%;
    animation: gradientShift 12s ease infinite;
    position: relative;
}

/* Palette colori viola personalizzata */
:root {
    --purple-darkest: #5a4d7c;
    --purple-dark: #6b5b95;
    --purple-main: #8572ab;
    --purple-medium: #9684b8;
    --purple-light: #a593c2;
    --purple-lighter: #b8a9d9;
    --purple-lightest: #c7b8dc;
    --purple-pale: #d6c9e3;
}


/* Animazione ottimizzata per il viola - movimento diagonale */
@keyframes gradientShift {
    0% { background-position: 0% 50%, center; }
    25% { background-position: 50% 0%, center; }
    50% { background-position: 50% 50%, center; }
    75% { background-position: 0% 50%, center; }
    100% { background-position: 0% 50%, center; }
}

/* Per applicare, aggiungi al tuo main.css: */
/*
.funky-bg {
    background: linear-gradient(45deg, #8572ab, #9684b8, #a593c2, #b8a9d9) !important;
}
*/

/* Oppure cambia la classe HTML:
<section id="home" class="hero-section funky-bg-purple-only1">
*/