/* Cyber Animations Premium */
@keyframes cyberPulse {
    0%, 100% {
        text-shadow: 0 0 5px var(--neon-cyan), 0 0 10px var(--neon-cyan);
    }
    50% {
        text-shadow: 0 0 20px var(--neon-cyan), 0 0 30px var(--neon-purple);
    }
}

@keyframes matrixRain {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(100%);
        opacity: 0;
    }
}

@keyframes hologram {
    0%, 100% {
        opacity: 0.8;
        filter: blur(0);
    }
    50% {
        opacity: 1;
        filter: blur(2px);
    }
}

@keyframes dataTransfer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

@keyframes spin3D {
    0% {
        transform: rotateY(0deg);
    }
    100% {
        transform: rotateY(360deg);
    }
}

@keyframes neonFlicker {
    0%, 100% {
        opacity: 1;
        text-shadow: 0 0 5px var(--neon-cyan), 0 0 10px var(--neon-cyan);
    }
    50% {
        opacity: 0.8;
        text-shadow: 0 0 15px var(--neon-cyan), 0 0 25px var(--neon-purple);
    }
}

/* Clases de animación */
.cyber-pulse {
    animation: cyberPulse 2s ease-in-out infinite;
}

.hologram-effect {
    animation: hologram 3s ease-in-out infinite;
}

.data-stream-effect {
    background: linear-gradient(90deg, transparent, var(--neon-cyan), var(--neon-purple), transparent);
    background-size: 200% 100%;
    animation: dataTransfer 2s linear infinite;
}

/* Cyber Loading Spinner */
.cyber-spinner {
    width: 60px;
    height: 60px;
    border: 2px solid rgba(0, 243, 255, 0.2);
    border-top: 2px solid var(--neon-cyan);
    border-right: 2px solid var(--neon-purple);
    border-radius: 50%;
    animation: spin3D 1s linear infinite;
    box-shadow: 0 0 20px rgba(0, 243, 255, 0.5);
}

.cyber-spinner::before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border-radius: 50%;
    background: linear-gradient(45deg, var(--neon-cyan), var(--neon-purple), var(--neon-pink));
    opacity: 0.3;
    filter: blur(10px);
    animation: spin3D 2s linear infinite reverse;
}

/* Hover Effects Cyber */
.hover-cyber {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-cyber:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 0 30px rgba(0, 243, 255, 0.5);
    filter: brightness(1.1);
}

/* Click Effect */
.cyber-click {
    animation: cyberClick 0.3s ease-out;
}

@keyframes cyberClick {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(0.95);
        box-shadow: 0 0 40px var(--neon-cyan);
    }
    100% {
        transform: scale(1);
    }
}