/* Hiệu ứng Nebula Gradient Animation */
@keyframes nebulaPulse {
    0% {
        background: radial-gradient(circle at 20% 50%, rgba(0, 240, 255, 0.15), transparent 50%),
                    radial-gradient(circle at 80% 80%, rgba(255, 0, 255, 0.15), transparent 50%);
    }
    50% {
        background: radial-gradient(circle at 30% 60%, rgba(0, 240, 255, 0.2), transparent 50%),
                    radial-gradient(circle at 70% 70%, rgba(255, 0, 255, 0.2), transparent 50%);
    }
    100% {
        background: radial-gradient(circle at 20% 50%, rgba(0, 240, 255, 0.15), transparent 50%),
                    radial-gradient(circle at 80% 80%, rgba(255, 0, 255, 0.15), transparent 50%);
    }
}

.nebula-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    animation: nebulaPulse 8s ease-in-out infinite;
    z-index: -2;
    pointer-events: none;
}

/* Hiệu ứng Floating Particles */
@keyframes float {
    0%, 100% { transform: translateY(0px) translateX(0px); }
    25% { transform: translateY(-20px) translateX(10px); }
    50% { transform: translateY(-40px) translateX(-10px); }
    75% { transform: translateY(-20px) translateX(10px); }
}

.particle {
    position: fixed;
    width: 4px;
    height: 4px;
    background: radial-gradient(circle, rgba(0, 240, 255, 0.8), rgba(0, 240, 255, 0.2));
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.6);
    animation: float 6s infinite;
    z-index: -1;
    pointer-events: none;
}

/* Hiệu ứng Glow trên các phần tử */
@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 5px rgba(0, 240, 255, 0.5), 0 0 10px rgba(0, 240, 255, 0.3);
    }
    50% {
        box-shadow: 0 0 10px rgba(0, 240, 255, 0.8), 0 0 20px rgba(0, 240, 255, 0.5), 0 0 30px rgba(255, 0, 255, 0.3);
    }
}

.glow-element {
    animation: glow 3s ease-in-out infinite;
}

/* Hiệu ứng Scan Line */
@keyframes scanlines {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(100vh); }
}

.scanlines {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 240, 255, 0.03),
        rgba(0, 240, 255, 0.03) 1px,
        transparent 1px,
        transparent 2px
    );
    animation: scanlines 8s linear infinite;
    z-index: -1;
    pointer-events: none;
}

/* Hiệu ứng Pulse trên Button */
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(0, 240, 255, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(0, 240, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 240, 255, 0); }
}

.btn-pulse:hover {
    animation: pulse 1.5s infinite;
}

/* Hiệu ứng Hologram */
@keyframes hologram {
    0%, 100% { 
        text-shadow: 0 0 5px rgba(0, 240, 255, 0.8), 0 0 10px rgba(0, 240, 255, 0.6);
        opacity: 1;
    }
    50% { 
        text-shadow: 0 0 10px rgba(0, 240, 255, 1), 0 0 20px rgba(255, 0, 255, 0.6);
        opacity: 0.95;
    }
}

.hologram-text {
    animation: hologram 2s ease-in-out infinite;
}

/* Hiệu ứng Cyber Grid */
@keyframes gridMove {
    0% { background-position: 0 0; }
    100% { background-position: 100px 100px; }
}

.cyber-grid {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(0deg, transparent 24%, rgba(0, 240, 255, 0.05) 25%, rgba(0, 240, 255, 0.05) 26%, transparent 27%, transparent 74%, rgba(0, 240, 255, 0.05) 75%, rgba(0, 240, 255, 0.05) 76%, transparent 77%, transparent),
        linear-gradient(90deg, transparent 24%, rgba(0, 240, 255, 0.05) 25%, rgba(0, 240, 255, 0.05) 26%, transparent 27%, transparent 74%, rgba(0, 240, 255, 0.05) 75%, rgba(0, 240, 255, 0.05) 76%, transparent 77%, transparent);
    background-size: 100px 100px;
    animation: gridMove 20s linear infinite;
    z-index: -1;
    pointer-events: none;
}

/* Hiệu ứng Rainbow Border */
@keyframes rainbow {
    0% { border-color: rgba(0, 240, 255, 1); }
    25% { border-color: rgba(0, 150, 255, 1); }
    50% { border-color: rgba(255, 0, 255, 1); }
    75% { border-color: rgba(255, 0, 150, 1); }
    100% { border-color: rgba(0, 240, 255, 1); }
}

.rainbow-border {
    animation: rainbow 3s ease-in-out infinite;
}

/* Hiệu ứng Fade In từ dưới */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.6s ease-out;
}

/* Hiệu ứng Slide In từ trái */
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.slide-in-left {
    animation: slideInLeft 0.6s ease-out;
}

/* Hiệu ứng Spin */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.spin {
    animation: spin 2s linear infinite;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .particle {
        width: 2px;
        height: 2px;
    }
    
    .scanlines {
        background: repeating-linear-gradient(
            0deg,
            rgba(0, 240, 255, 0.02),
            rgba(0, 240, 255, 0.02) 1px,
            transparent 1px,
            transparent 2px
        );
    }
}