/*
 * Animate On Scroll
 *
 * Fa partire le animazioni di animate.css (https://animate.style, v4.1.1)
 * quando l'elemento entra nello schermo, invece che al caricamento.
 *
 *   <div data-animation-type="animate__fadeInLeft">...</div>
 *   <div data-animation-type="animate__zoomIn animate__delay-1s">...</div>
 *
 * Nell'attributo va la classe dell'animazione, non nel class: lo script la
 * aggiunge insieme ad animate__animated quando l'elemento diventa visibile.
 * Metterla subito nel class non funziona in modo affidabile, perche' animate.css
 * separa il nome dell'animazione (animate__fadeInLeft) dalla sua durata
 * (animate__animated): se il nome arriva prima, l'animazione "gira" a durata
 * zero e quando arriva la durata risulta gia' conclusa.
 *
 * Elenco completo delle animazioni: https://animate.style
 */

/*
 * Le animazioni d'ingresso partono da elemento invisibile: le nascondiamo gia'
 * dal primo disegno della pagina, altrimenti l'elemento si vedrebbe fermo,
 * sparirebbe all'arrivo della classe e poi rientrerebbe.
 *
 * Solo gli ingressi (nome con "In": fadeIn, slideInUp, zoomIn, jackInTheBox...).
 * Gli effetti di richiamo (pulse, shakeX, tada...) partono da elemento visibile
 * e nasconderli li farebbe comparire di colpo.
 */
[data-animation-type*="In"]:not(.animate__animated) {
    opacity: 0;
}

/*
 * Chi ha chiesto al sistema di ridurre le animazioni vede tutto subito.
 * animate.css accorcia gia' da sola le animazioni a 1ms in questo caso.
 */
@media (prefers-reduced-motion: reduce) {
    [data-animation-type*="In"]:not(.animate__animated) {
        opacity: 1;
    }
}