/* Contenitore principale dello sfondo */
.scrolling-background-container {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150vmax; /* Lasciamo questo abbondante per la rotazione */
    height: 150vmax;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
    transform: translate(-50%, -50%) rotate(var(--rotation-angle, 22.5deg));
    
    /* Layout Flexbox per gestire le righe */
    display: flex;
    flex-direction: column;
    justify-content: center;

    /* Spazio VERTICALE fisso tra le righe */
    gap: 80px; /* VALORE FISSO: come richiesto */
}


/* Ogni riga di scorrimento */
.line {
    display: flex;
    flex-wrap: nowrap;
    
    /* Spazio ORIZZONTALE fisso tra le immagini */
    gap: 30px; /* VALORE FISSO: come richiesto */
}

/* Ogni singola "tile" (immagine) */
.tile {
    flex-shrink: 0; /* Impedisce il ridimensionamento */
    background-size: cover;
    background-position: center center;
    border-radius: 50%;
    
    /* Dimensioni fisse per le tile tonde */
    width: 200px;   /* VALORE FISSO */
    height: 200px;  /* VALORE FISSO */
}

/* Stili per le immagini "grandi" o oblunghe */
.tile-lg {
    border-radius: 125px; /* Raggio per effetto oblungo */
    
    /* Dimensioni fisse per le tile grandi */
    width: 450px;   /* VALORE FISSO */
}


/* Overlay del menu mobile */
.navbar_mobile_overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Questo colore è il fallback/sfondo principale del menu di Publii,
       se il background animato non è ancora caricato o non copre tutto. */
    background-color: rgba(0, 0, 0, 0.8); /* Colore semi-trasparente per l'overlay generale */
    z-index: 2; /* Pone l'overlay sopra la pagina, sotto il contenuto del menu */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: opacity 0.3s ease, visibility 0.3s ease; /* Transizione gestita da Publii */
    opacity: 1;
    visibility: visible;
    overflow:hidden;
}

/* Stato nascosto dell'overlay */
.navbar_mobile_overlay.is-hidden {
    opacity: 0;
    visibility: hidden;
}

/* NUOVO: Overlay tra sfondo e contenuto del menu */
.scrolling-background-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.5); /* Bianco al 50% di opacità */
    z-index: 1; /* Deve essere SOPRA lo sfondo (z-index 0) ma SOTTO il contenuto del menu (z-index 3) */
    pointer-events: none; /* Non blocca gli eventi del mouse sul contenuto sottostante */
}

/* Contenuto del menu all'interno dell'overlay */
.navbar_mobile_overlay .navbar__menu {
    position: relative; /* Necessario per applicare z-index */
    z-index: 3; /* Pone il menu sopra l'overlay dello sfondo (z-index 1) */
    background-color: transparent; /* Il tuo menu non deve avere un background che copre lo sfondo */
    width: 100%;
    max-width: 300px;
    padding: 20px;
    box-sizing: border-box;
    color: white; /* Colore del testo del tuo menu */
}