/* Stato iniziale: elementi invisibili e spostati */
.reveal {
    opacity: 0;
    will-change: transform, opacity;
    /* Aumentiamo a 1.2 secondi per una rotazione più fluida */
    /* Usiamo una curva "ease-out" più dolce (0.33, 1, 0.68, 1) */
    transition: transform 1.2s cubic-bezier(0.33, 1, 0.68, 1), 
                opacity 1.2s cubic-bezier(0.33, 1, 0.68, 1);
}

/* Variante: Entrata da sinistra */
.reveal.from-left {
    transform: translateX(-100px);
}

/* Variante: Entrata con rotazione (15 gradi) */
.reveal.rotate-in {
    /* Riduciamo lo spostamento X se la rotazione sembra troppo brusca */
    transform: translateX(-80px) rotate(-10deg);
}

/* Variante: Entrata angolata a 45 gradi (dal basso-sinistra) */
.reveal.angle-45 {
    transform: translateX(-150px) translateY(150px) rotate(-45deg);
}

/* Stato finale: quando l'elemento entra nella viewport */
.reveal.active {
    opacity: 1;
    transform: translateX(0) rotate(0deg);
}

/* Opzionale: Delay per elementi in sequenza (es. card affiancate) */
.delay-1 { transition-delay: 0.3s; }
.delay-2 { transition-delay: 0.6s; }
.delay-3 { transition-delay: 0.9s; }
.delay-4 { transition-delay: 0.8s; }
.delay-5 { transition-delay: 1.2s; }
.delay-6 { transition-delay: 1.5s; }