.animate {
    opacity: 0;
    /* Transición suave para opacidad y movimiento */
    transition: opacity 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000), 
                transform 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000);
}

/* 2. El estado final (visible) que añade el JavaScript */
.animate.is-visible {
    opacity: 1;
    transform: none; /* Resetea cualquier transform inicial */
}

/* 3. Variaciones de animación (definen el estado inicial específico) */

/* Deslizar hacia arriba (el más común y profesional) */
.animate.fade-up {
    transform: translateY(30px);
}

/* Deslizar desde la izquierda */
.animate.fade-left {
    transform: translateX(-30px);
}

/* Deslizar desde la derecha */
.animate.fade-right {
    transform: translateX(30px);
}

/* Zoom de entrada (sutil, para tarjetas o imágenes) */
.animate.zoom-in {
    transform: scale(0.95);
}

/* 4. (Opcional) Retrasos para animaciones escalonadas (stagger) */
/* Úsalos para que los elementos de una grilla no aparezcan todos juntos */
.animate.delay-1 { transition-delay: 0.1s; }
.animate.delay-2 { transition-delay: 0.2s; }
.animate.delay-3 { transition-delay: 0.3s; }
.animate.delay-4 { transition-delay: 0.4s; }