.revealable {
    opacity: 0;
    transition: opacity 0.6s ease-out, transform 0.6s ease-out, filter 0.6s ease-out;
    }

.revealable.visible {
    opacity: 1;
    }

/* 1. reveal-up — montée classique */

.reveal-up {
    transform: translateY(30px);
    }

.reveal-up.visible {
    transform: translateY(0);
    }

/* 2. reveal-down — descend depuis le haut */

.reveal-down {
    transform: translateY(-30px);
    }

.reveal-down.visible {
    transform: translateY(0);
    }

/* 3. reveal-left / reveal-right — glisse latéralement */
/* Utile pour alterner gauche/droite sur une liste, par exemple via :nth-child(even) */

.reveal-left {
    transform: translateX(-40px);
    }

.reveal-left.visible {
    transform: translateX(0);
    }

.reveal-right {
    transform: translateX(40px);
    }

.reveal-right.visible {
    transform: translateX(0);
    }

/* 4. reveal-scale — zoom progressif */
/* Effet plus "doux", donne une impression de profondeur. Fonctionne bien combiné avec translateY */

.reveal-scale {
    transform: scale(0.85);
    }

.reveal-scale.visible {
    transform: scale(1);
    }

/* 5. reveal-scale-up — zoom + montée (combo) */
/* C'est probablement le plus élégant visuellement pour des cards — discret mais perceptible */

.reveal-scale-up {
    transform: translateY(20px) scale(0.9);
    }

.reveal-scale-up.visible {
    transform: translateY(0) scale(1);
    }

/* 6. reveal-blur — flou qui se dissipe */
/* Effet plus "premium", donne une sensation de mise au point */
/* Un peu plus coûteux en perf (le blur est plus lourd à calculer que transform/opacity) */

.reveal-blur {
    filter: blur(8px);
    transform: translateY(15px);
    }

.reveal-blur.visible {
    filter: blur(0);
    transform: translateY(0);
    }

/* 7. reveal-rotate — légère rotation */
/* Effet plus ludique/dynamique, à réserver à des contextes moins "corporate" */

.reveal-rotate {
    transform: translateY(20px) rotate(-4deg);
    }

.reveal-rotate.visible {
    transform: translateY(0) rotate(0deg);
    }

/* 8. reveal-flip — bascule 3D */
/* Effet plus marqué, attire l'œil — à utiliser avec parcimonie (par exemple uniquement sur le premier article d'une section) */

.reveal-flip {
    transform: perspective(800px) rotateX(25deg);
    transform-origin: top center;
    }

.reveal-flip.visible {
    transform: perspective(800px) rotateX(0deg);
    }