/* Assicuriamoci che il banner sia il punto di riferimento */
#banner {
    position: relative !important;
    overflow: hidden;
}

/* Il contenitore deve avere una dimensione reale per essere visto */
.waves-container {
    position: absolute;
    top: 50%; /* Lo posizioniamo a metà altezza */
    left: 0;
    width: 100%;
    height: 220px; /* Altezza fissa per sicurezza */
    transform: translateY(-50%); /* Centra l'animazione rispetto al testo */
    pointer-events: none;
    z-index: 1;
}

.waves {
    width: 100%;
    height: 110%;
}

@media (prefers-reduced-motion: no-preference) {
    /* Animazione delle linee */
    .parallax-lines > use {
        animation: move-forever 20s cubic-bezier(.55,.5,.45,.5) infinite;
        /* Rimuoviamo il riempimento di default degli SVG */
        fill: none !important;
    }

    /* Differenziamo le velocità per evitare l'effetto "blocco unico" */
    .parallax-lines > use:nth-child(1) { animation-delay: -2s; animation-duration: 15s; }
    .parallax-lines > use:nth-child(2) { animation-delay: -3s; animation-duration: 22s; }
    .parallax-lines > use:nth-child(3) { animation-delay: -4s; animation-duration: 30s; }
    .parallax-lines > use:nth-child(4) { animation-delay: -5s; animation-duration: 45s; }

    @keyframes move-forever {
        0% { transform: translate3d(-90px,0,0); }
        100% { transform: translate3d(85px,0,0); }
    }
}

/* Forza il testo del banner sopra le linee */
#banner .inner {
    position: relative !important;
    z-index: 10 !important;
}