/* hero-gradient-options.css - Diverse opzioni per il gradient hero con #8572ab */

/* OPZIONE 1: Gradient con viola prominente (Raccomandato) */
.funky-bg-option1 {
    background: linear-gradient(45deg, #8572ab, #6b5b95, var(--primary), var(--secondary));
    background-size: 400% 400%;
    animation: gradientShift 8s ease infinite;
    position: relative;
}

/* OPZIONE 2: Viola come colore dominante */
.funky-bg-option2 {
    background: linear-gradient(135deg, #8572ab 0%, #a593c2 25%, var(--primary) 70%, var(--secondary) 100%);
    background-size: 400% 400%;
    animation: gradientShift 10s ease infinite;
    position: relative;
}

/* OPZIONE 3: Gradient circolare con viola al centro */
.funky-bg-option3 {
    background: radial-gradient(circle at 30% 40%, #8572ab, var(--primary), var(--secondary), var(--accent));
    background-size: 400% 400%;
    animation: gradientShift 12s ease infinite;
    position: relative;
}

/* OPZIONE 4: Gradient diagonale con transizioni smooth */
.funky-bg-option4 {
    background: linear-gradient(120deg, #8572ab 0%, #9684b8 20%, var(--primary) 50%, var(--secondary) 80%, var(--accent) 100%);
    background-size: 400% 400%;
    animation: gradientShift 9s ease infinite;
    position: relative;
}

/* OPZIONE 5: Viola con effetto metallico */
.funky-bg-option5 {
    background: linear-gradient(45deg, 
        #8572ab 0%, 
        #7a6ba0 15%, 
        #9684b8 30%, 
        var(--primary) 60%, 
        var(--secondary) 85%, 
        var(--accent) 100%);
    background-size: 500% 500%;
    animation: gradientShift 15s ease infinite;
    position: relative;
}

/* OPZIONE 6: Viola pastello soft */
.funky-bg-option6 {
    background: linear-gradient(60deg, 
        #8572ab, 
        #b8a9d9, 
        #ffc3d9, 
        var(--secondary), 
        var(--accent));
    background-size: 400% 400%;
    animation: gradientShift 11s ease infinite;
    position: relative;
}

/* Animazione migliorata per tutti i gradient */
@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    25% { background-position: 100% 0%; }
    50% { background-position: 100% 100%; }
    75% { background-position: 0% 100%; }
    100% { background-position: 0% 50%; }
}

/* Overlay pattern opzionale per aggiungere texture */
.hero-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M20 20c0 0 0-8 0-8s8 0 8 0 0 8 0 8-8 0-8 0Z'/%3E%3C/g%3E%3C/svg%3E") repeat;
    pointer-events: none;
}

/* Colori CSS custom per il viola */
:root {
    --hero-purple: #8572ab;
    --hero-purple-dark: #6b5b95;
    --hero-purple-light: #a593c2;
    --hero-purple-pale: #b8a9d9;
}

/* Come applicare una delle opzioni:
   Cambia la classe nel tuo HTML da "funky-bg" a una delle opzioni sopra
   
   Esempio:
   <section id="home" class="hero-section funky-bg-option1">
   
   Oppure sovrascrivi il CSS esistente aggiungendo questa regola al tuo main.css:
   
   .funky-bg {
       background: linear-gradient(45deg, #8572ab, #6b5b95, var(--primary), var(--secondary)) !important;
   }
*/