/* =======================================================
   SISTEMA DE ANIMACIONES ULTRA PREMIUM (BLUR + 3D + CASCADA)
   ======================================================= */

/* 1. Base para elementos con scroll */
.anim-elemento {
    opacity: 0 !important;
    filter: blur(10px); /* Efecto cinemático inicial */
    transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 1.2s cubic-bezier(0.16, 1, 0.3, 1),
                filter 1.2s ease-out !important;
    will-change: opacity, transform, filter;
}

/* 2. EFECTOS DE ENTRADA CON PERSPECTIVA */
.anim-lento-izq, .anim-lento-der, .anim-lento-fade, .anim-lento-arriba {
    opacity: 0 !important;
    filter: blur(12px);
    transition: opacity 2.5s cubic-bezier(0.22, 1, 0.36, 1), 
                transform 1.8s cubic-bezier(0.22, 1, 0.36, 1),
                filter 2s ease-out !important;
    will-change: opacity, transform, filter;
}

/* Direcciones con toque 3D */
.anim-lento-izq { transform: translateX(-100px) rotateY(-8deg) !important; perspective: 1000px; }
.anim-lento-der { transform: translateX(100px) rotateY(8deg) !important; perspective: 1000px; }
.anim-lento-fade { transform: scale(0.92) !important; }
.anim-lento-arriba { transform: translateY(80px) !important; }

/* Direcciones estándar para el Scroll */
.anim-arriba { transform: translateY(70px) scale(0.95) !important; }
.anim-izquierda { transform: translateX(-60px) !important; }
.anim-derecha { transform: translateX(60px) !important; }
.anim-zoom { transform: scale(0.7) rotate(-3deg) !important; }

/* 3. Clase de Activación (Estado Final) */
.anim-visible {
    opacity: 1 !important;
    filter: blur(0) !important;
    transform: translate(0) scale(1) rotate(0) rotateY(0) !important;
}

/* 4. Clases para Retrasos en Cascada (Staggering) */
.delay-1 { transition-delay: 0.1s !important; }
.delay-2 { transition-delay: 0.25s !important; }
.delay-3 { transition-delay: 0.4s !important; }
.delay-4 { transition-delay: 0.55s !important; }