/* Stato di base: elementi animabili sono nascosti/leggermente spostati */
.anim-item {
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity 0.6s ease,
        transform 0.6s ease;
}

/* Quando entrano in viewport (o in admin preview) */
.anim-item.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Varianti logicamente diverse
   Usiamo data-anim-id per distinguere i tipi
*/

/* fade-up: parte da sotto */
.anim-item[data-anim-id="fade-up"] {
    transform: translateY(20px);
}

.anim-item.is-visible[data-anim-id="fade-up"] {
    transform: translateY(0);
}

/* fade-left: parte da sinistra */
.anim-item[data-anim-id="fade-left"] {
    transform: translateX(-20px);
}

.anim-item.is-visible[data-anim-id="fade-left"] {
    transform: translateX(0);
}

/* fade-right: parte da destra */
.anim-item[data-anim-id="fade-right"] {
    transform: translateX(20px);
}

.anim-item.is-visible[data-anim-id="fade-right"] {
    transform: translateX(0);
}

/* zoom-in-soft: leggero zoom + fade */
.anim-item[data-anim-id="zoom-in-soft"] {
    transform: scale(0.96);
}

.anim-item.is-visible[data-anim-id="zoom-in-soft"] {
    transform: scale(1);
}