/* 3D Animated Particle Wave Background */
/* This CSS creates a stunning 3D particle wave effect similar to the image */

/* Base background setup */
.particle-wave-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -100;
}

/* Main wave background */
.particle-wave-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #0a0a2a 0%, #0d1b30 50%, #1a0a3a 100%);
}

/* Particle wave canvas */
.particle-wave-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Overlay gradients for depth and color */
.color-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 25% 25%, rgba(0, 255, 255, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(255, 0, 255, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 75% 25%, rgba(0, 255, 127, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 25% 75%, rgba(255, 127, 0, 0.15) 0%, transparent 50%);
    mix-blend-mode: screen;
}

/* Scan lines for tech effect */
.scan-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 255, 243, 0.03) 2px,
        rgba(0, 255, 243, 0.03) 4px
    );
    pointer-events: none;
}

/* Subtle vignette effect */
.vignette {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        ellipse at center,
        transparent 0%,
        rgba(0, 0, 20, 0.2) 80%,
        rgba(0, 0, 20, 0.4) 100%
    );
}

/* Animation keyframes for various effects */
@keyframes pulse {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 0.9; }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

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

/* Responsive adjustments */
@media (max-width: 768px) {
    .color-overlay {
        background: 
            radial-gradient(circle at 25% 25%, rgba(0, 255, 255, 0.1) 0%, transparent 40%),
            radial-gradient(circle at 75% 75%, rgba(255, 0, 255, 0.1) 0%, transparent 40%),
            radial-gradient(circle at 75% 25%, rgba(0, 255, 127, 0.1) 0%, transparent 40%),
            radial-gradient(circle at 25% 75%, rgba(255, 127, 0, 0.1) 0%, transparent 40%);
    }
}

@media (max-width: 480px) {
    .color-overlay {
        background: 
            radial-gradient(circle at 25% 25%, rgba(0, 255, 255, 0.08) 0%, transparent 30%),
            radial-gradient(circle at 75% 75%, rgba(255, 0, 255, 0.08) 0%, transparent 30%),
            radial-gradient(circle at 75% 25%, rgba(0, 255, 127, 0.08) 0%, transparent 30%),
            radial-gradient(circle at 25% 75%, rgba(255, 127, 0, 0.08) 0%, transparent 30%);
    }
}