/* --- MOTORE ANIMAZIONI GLOBALE --- */

/* Stato iniziale invisibile per qualsiasi cosa abbia data-anim */
[data-anim] {
    opacity: 0;
    animation-duration: 1.6s;
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1);
}

/* Attivazione animazioni standard */
[data-anim].visible[data-anim="up"] { animation-name: fadeInUpCustom; }
[data-anim].visible[data-anim="left"] { animation-name: fadeInLeftCustom; }
[data-anim].visible[data-anim="right"] { animation-name: fadeInRightCustom; }
[data-anim].visible[data-anim="fade"] { animation-name: fadeInCustom; }

/* --- ANIMAZIONE SLIDE-DOWN (Drop-in) --- */

/* Stato iniziale specifico */
[data-anim="slide-down"] {
    opacity: 0;
}

/* Attivazione specifica */
[data-anim].visible[data-anim="slide-down"] {
    animation-name: dropInCustom;
    animation-duration: 1s;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
}

/* --- KEYFRAMES --- */

@keyframes fadeInUpCustom {
    from { opacity: 0; transform: translate3d(0, 100px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes fadeInLeftCustom {
    from { opacity: 0; transform: translate3d(-100px, 0, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes fadeInRightCustom {
    from { opacity: 0; transform: translate3d(100px, 0, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes fadeInCustom {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes dropInCustom {
    from {
        opacity: 0;
        transform: translateY(-100px);
    }
    to {
        opacity: 1;
        transform: translate(0px);
    }
}

/* --- UTILITY CLASSES --- */

/* Classe contenitore per mascherare l'effetto drop-in */
.mask {
    overflow: hidden;
}