/* Entrata Slide (slideInFromRight) */
@keyframes In1 {
    /* Stato Iniziale: Inizia leggermente fuori dallo schermo a destra e invisibile */
    from {
        /* Trasla l'immagine del 100% della sua larghezza verso destra */
        transform: translateX(100%); 
        opacity: 0;
    }
    /* Stato Finale: Ritorna alla sua posizione originale e diventa completamente visibile */
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Uscita Slide (slideOutToRight) */
@keyframes Out1 {
    /* Stato Iniziale: Visibile e in posizione originale */
    from {
        opacity: 1;
        transform: translateX(0);
    }
    /* Stato Finale: Invisibile e traslata fuori a destra */
    to {
        opacity: 0;
        transform: translateX(100%);
    }
}

/* Entrata Rotazione (rotateInBottomRight) */
@keyframes In2 {
    /* Stato Iniziale: Invisibile e ruotata di 90 gradi */
    from {
        opacity: 0;
        transform: rotate(90deg); /* L'immagine inizia ruotata */
        transform-origin: 100% 100%;
    }
    /* Stato Finale: Visibile e in posizione normale */
    to {
        opacity: 1;
        transform: rotate(0deg); /* L'immagine ritorna dritta */
        transform-origin: 100% 100%;
    }
}

/* Uscita Rotazione (rotateOutBottomRight) */
@keyframes Out2 {
    from {
        opacity: 1;
        transform: rotate(0deg);
        transform-origin: 100% 100%;
    }
    to {
        opacity: 0;
        transform: rotate(-90deg);
        transform-origin: 100% 100%;
    }
}

/* Entrata Zoom-In e Rotazione (In3) */
@keyframes In3 {
    /* Stato Iniziale: Molto piccolo, ruotato, invisibile e posizionato in basso a sinistra */
    from {
        opacity: 0;
        transform: scale(0.1) rotate(-10deg); /* Inizia al 10% della dimensione, ruotato */
        /* Impostiamo l'origine nell'angolo in basso a sinistra (0% 0%) */
        transform-origin: 0% 0%;  
    }
    /* Stato Finale: Visibile, dimensione normale e dritto */
    to {
        opacity: 1;
        transform: scale(1) rotate(0deg); 
        transform-origin: 0% 0%; 
    }
}

/* Uscita Zoom-Out e Dissolvenza (Out3) */
@keyframes Out3 {
    /* Stato Iniziale: Visibile e dimensione normale */
    from {
        opacity: 1;
        transform: scale(1) rotate(0deg);
        transform-origin: 0% 0%; 
    }
    /* Stato Finale: Rimpicciolito, sbiadito e leggermente ruotato per un effetto più naturale */
    to {
        opacity: 0;
        transform: scale(0) rotate(10deg); /* Rimpicciolisce completamente e ruota leggermente */
        transform-origin: 0% 0%; 
    }
}