/* assets/css/animations.css */

/* Animación de Revelación de Scroll */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 800ms cubic-bezier(0.16, 1, 0.3, 1), 
                transform 800ms cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-on-scroll.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Retardos de animación progresivos */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }
.delay-500 { transition-delay: 500ms; }

/* Animación de Pulso de Brillo (Glow Pulse) */
@keyframes glow-pulse-cyan {
    0%, 100% {
        box-shadow: 0 0 15px rgba(0, 240, 255, 0.3);
        border-color: rgba(0, 240, 255, 0.4);
    }
    50% {
        box-shadow: 0 0 30px rgba(0, 240, 255, 0.6);
        border-color: rgba(0, 240, 255, 0.8);
    }
}

@keyframes glow-pulse-magenta {
    0%, 100% {
        box-shadow: 0 0 15px rgba(255, 0, 122, 0.3);
        border-color: rgba(255, 0, 122, 0.4);
    }
    50% {
        box-shadow: 0 0 30px rgba(255, 0, 122, 0.6);
        border-color: rgba(255, 0, 122, 0.8);
    }
}

.glow-active-cyan {
    animation: glow-pulse-cyan 3s infinite ease-in-out;
}

.glow-active-magenta {
    animation: glow-pulse-magenta 3s infinite ease-in-out;
}

/* Animación de respiración de gradiente de fondo */
@keyframes bg-breathe {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    50% {
        transform: translate(5%, 5%) scale(1.1);
    }
}

.animate-bg-breathe-1 {
    animation: bg-breathe 15s infinite ease-in-out;
}

.animate-bg-breathe-2 {
    animation: bg-breathe 20s infinite ease-in-out alternate;
}

/* Rotación infinita para artes geométricos */
@keyframes slow-rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.animate-slow-rotate {
    animation: slow-rotate 40s linear infinite;
}

/* Glitch Sutil para Texto */
@keyframes text-glitch {
    0%, 100% { text-shadow: 0 0 4px rgba(0, 240, 255, 0.3); }
    50% { text-shadow: -1px 0 var(--color-neon-cyan), 1px 0 var(--color-neon-magenta), 0 0 8px rgba(0, 82, 255, 0.4); }
}

.glitch-text-hover:hover {
    animation: text-glitch 400ms ease infinite;
}

/* Flotación para elementos del Hero */
@keyframes floating-item {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.animate-floating {
    animation: floating-item 6s infinite ease-in-out;
}

/* Efecto de carga (Spinner) */
@keyframes spinner {
    to { transform: rotate(360deg); }
}

.loading-spinner {
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-top-color: var(--color-neon-cyan);
    border-radius: 50%;
    animation: spinner 0.6s linear infinite;
}