/* ... al final de tu archivo ... */

/* --- Animación para el fondo de gradiente --- */
@layer base {
    .animated-gradient {
        background-size: 200% 200%;
        animation: gradient-animation 10s ease infinite;
    }
}

@keyframes gradient-animation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* --- Clases para animaciones de scroll con JS --- */
@layer utilities {
    .fade-in-up {
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    }
    .fade-in-up.is-visible {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ... al final de tu archivo ... */

/* --- Estilos para el Blob Interactivo --- */
@layer utilities {
    .hero-blob {
        transition: transform 0.2s ease-out;
    }
}

/* --- Estilos para el efecto Glassmorphism --- */
@layer components {
    .glass-card {
        @apply bg-white/50 dark:bg-gray-900/50 backdrop-blur-lg border border-white/20 rounded-2xl shadow-lg hover:shadow-2xl hover:-translate-y-2;
    }
}