.testo-slide-in {
    /* Applica lo slide-in, facendolo durare 1 secondo */
    animation: slideIn 1s ease-out forwards; 
}

/* --- 3. Il motore dell'animazione (lo scrivi una volta sola in tutto il file!) --- */
@keyframes slideIn {
    0% {
        transform: translateX(-100px); 
        opacity: 0; 
    }
    100% {
        transform: translateX(0); 
        opacity: 1; 
    }
}

/* --- LA CLASSE "TIMBRO" PER L'IMMAGINE --- */
/* --- STATO INIZIALE: L'immagine parte nascosta e spostata a sinistra --- */
.immagine-slide-sinistra {
    opacity: 0;
    transform: translateX(-400px); 
    /* La transizione dura 1.5 secondi con un rallentamento dolce alla fine */
    transition: opacity 1.5s ease-out, transform 1.5s ease-out; 
}
@media (max-width: 991px) {
    .immagine-slide-sinistra {
        transform: translateX(-60px);
    }
}
/* --- STATO FINALE: Quando l'osservatore vede l'immagine, si attiva questa classe --- */
.immagine-slide-sinistra.visibile {
    opacity: 1;
    transform: translateX(0); /* Arriva nella sua posizione originale */
}

/* Classe da aggiungere alla tua card */
/* --- STATO INIZIALE: La card è invisibile prima di entrare nello schermo --- */
.card-animata {
    opacity: 0;
    transform: translateY(40px); /* Leggermente spostata in basso */
    transition: opacity 1.4s ease-out, transform 1.4s ease-out; /* Rende il movimento fluido */
}

/* --- STATO FINALE: Quando l'osservatore vede la card, si attiva questa classe ---. */
.card-animata.visibile {
    opacity: 1;
    transform: translateY(0); /* Ritorna alla posizione normale */
}
.card-animata.visibile:hover {
    /* La card si alza leggermente di 10 pixel quando ci vai sopra col mouse */
    transform: translateY(-20px); 
    
    /* Aggiungiamo un'ombra elegante per dare l'effetto "rilievo" */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); 
    
    /* Rendiamo il movimento del mouse fluido (es. 0.3 secondi) */
    transition: transform 0.5s ease, box-shadow 0.5s ease;
}
/* --- 1. STATO INIZIALE: La card parte sfocata e nascosta --- */
.card-blur {
    opacity: 0;
    filter: blur(10px); /* Parte sfocata */
    transform: translateY(30px);
    transition: opacity 1.4s ease-out, filter 1.4s ease-out, transform 1.4s ease-out;
}

/* --- 2. STATO FINALE: Quando l'utente scorre e la card appare a schermo --- */
.card-blur.visibile {
    opacity: 1;
    filter: blur(0px); /* Diventa perfettamente nitida */
    transform: translateY(0);
}

/* --- 3. EFFETTO AL PASSAGGIO DEL MOUSE (HOVER) --- */
/* Nota bene: si attiva solo DOPO che la card è diventata .visibile */
.card-blur.visibile:hover {
    /* La card si sposta leggermente verso l'alto di 10 pixel */
    transform: translateY(-10px); 
    
    /* Aggiunge un'ombra morbida per dare l'effetto tridimensionale di rilievo */
  
    
    /* Rende il movimento del mouse fluido e reattivo (0.3 secondi) */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-slide-alto {
    opacity: 0;
    transform: translateY(-50px); /* Parte spostata più in alto rispetto alla sua posizione */
    transition: opacity 1.3s ease-out, transform 1.3s ease-out;
}

.card-slide-alto.visibile {
    opacity: 1;
    transform: translateY(0); /* Arriva nella sua posizione corretta */
}

.card-zoom-rotate {
    opacity: 0;
    transform: scale(0.6) rotate(-5deg); /* Parte piccola e inclinata di 5 gradi */
    transition: opacity 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                transform 2.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.card-zoom-rotate.visibile {
    opacity: 1;
    transform: scale(1) rotate(0deg); /* Torna alla dimensione normale e dritta */
}

/* --- STATO INIZIALE: La card è nascosta e spostata a destra --- */
.card-giocosa-destra {
    opacity: 0;
    transform: translateX(100px); /* Spostata a destra */
    /* Usiamo una curva speciale per dare un effetto elastico/giocoso alla fine */
    transition: opacity 1.2s ease-out, transform 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* --- STATO FINALE: Quando l'utente scorre e la card appare a schermo --- */
.card-giocosa-destra.visibile {
    opacity: 1;
    transform: translateX(0); /* Ritorna nella sua posizione normale */
}

/* --- STATO INIZIALE: La card è nascosta e spostata a sinistra --- */
.card-giocosa-sinistra {
    opacity: 0;
    transform: translateX(-100px); /* Spostata a sinistra */
    /* Curva elastica per dare un effetto dinamico e giocoso alla fine */
    transition: opacity 1.2s ease-out, transform 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* --- STATO FINALE: Quando l'utente scorre e la card appare a schermo --- */
.card-giocosa-sinistra.visibile {
    opacity: 1;
    transform: translateX(0); /* Ritorna nella sua posizione normale */
}

/* --- 1. IL TESTO A SINISTRA: Parte nascosto e spostato a sinistra --- */
.sezione-lupetti-testo {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 1.4s ease-out, transform 1.4s ease-out;
}

.sezione-lupetti-testo.visibile {
    opacity: 1;
    transform: translateX(0);
}

/* --- 2. IL LUPO A DESTRA: Parte nascosto e spostato a destra con effetto elastico --- */
.sezione-lupetti-lupo {
    opacity: 0;
    transform: translateX(60px) scale(0.9);
    transition: opacity 1.5s ease-out, transform 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.sezione-lupetti-lupo.visibile {
    opacity: 1;
    transform: translateX(0) scale(1);
}
.lupetti-intro {
    position: relative;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1.5s ease-out, transform 1.5s ease-out;
}

.lupetti-intro.visibile {
    opacity: 1;
    transform: translateY(0);
}

/* --- STATO INIZIALE: L'elemento parte invisibile e nascosto in alto --- */
.animazione-giocosa-matta {
    opacity: 0;
    transform: translateY(-150px); /* Parte molto più in alto */
}

/* --- QUANDO DIVENTA VISIBILE: Scatta l'animazione del rimbalzo --- */
.animazione-giocosa-matta.visibile {
    opacity: 1;
    /* Richiamiamo un'animazione personalizzata che dura 1.2 secondi */
    animation: rimbalzoGiocoso 2.5s cubic-bezier(0.36, 1.55, 0.42, 1.27) forwards;
}

/* --- MOTORE DELL'ANIMAZIONE (Il saltello elastico) --- *//* --- MOTORE DELL'ANIMAZIONE (Il saltello elastico) --- */
@keyframes rimbalzoGiocoso {
    0% {
        transform: translateY(-150px);
        opacity: 0;
    }
    60% {
        transform: translateY(25px); /* Rimbalza oltre il punto d'arrivo */
        opacity: 1;
    }
    80% {
        transform: translateY(-10px); /* Torna un po' su */
    }
    100% {
        transform: translateY(0); /* Si ferma al centro esatto */
        opacity: 1;
    }
}

/* --- STATO INIZIALE: La card è ribaltata all'indietro in 3D e invisibile --- */
.card-3d-flip {
    opacity: 0;
    transform: perspective(1000px) rotateX(45deg) translateY(50px);
    filter: blur(5px);
    transition: opacity 2.5s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 2.5s cubic-bezier(0.16, 1, 0.3, 1), 
                filter 2.5s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity, filter;
}

/* --- STATO FINALE: Quando l'utente scorre e la card entra nel monitor --- */
.card-3d-flip.visibile {
    opacity: 1;
    transform: perspective(1000px) rotateX(0deg) translateY(0);
    filter: blur(0px);
}

.svg-anim-sinistra {
    opacity: 0;
    transform: translateX(-50px); /* Modificato da -400px */
    transition: opacity 1.5s ease-out, transform 1.5s ease-out; 
}

/* --- STATO FINALE: Quando l'osservatore vede l'immagine, si attiva questa classe --- */
.svg-anim-sinistra.visibile {
    opacity: 0.75;
    transform: translateX(0); /* Arriva nella sua posizione originale */
}

.svg-anim-destra {
    opacity: 0;
    transform: translateX(50px); /* Modificato da 400px */
    transition: opacity 1.5s ease-out, transform 1.5s ease-out; 
}

/* --- STATO FINALE: Quando l'osservatore vede l'immagine, si attiva questa classe --- */
.svg-anim-destra.visibile {
    opacity: 0.75;
    transform: translateX(0); /* Arriva nella sua posizione originale */
}

.card-animata-asso {
    opacity: 0;
    transform: translateY(40px); /* Leggermente spostata in basso */
    transition: opacity 1.4s ease-out, transform 1.4s ease-out; /* Rende il movimento fluido */
}

/* --- STATO FINALE: Quando l'osservatore vede la card, si attiva questa classe ---. */
.card-animata-asso.visibile {
    opacity: 1;
    transform: translateY(0); /* Ritorna alla posizione normale */
}
.card-animata-asso.visibile:hover {
    /* La card si alza leggermente di 10 pixel quando ci vai sopra col mouse */
    transform: translateY(-20px); 
    
    /* Aggiungiamo un'ombra elegante per dare l'effetto "rilievo" */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); 
    
    /* Rendiamo il movimento del mouse fluido (es. 0.3 secondi) */
    transition: transform 0.5s ease, box-shadow 0.5s ease;
}