/* Premium Background Animations for NEURO UPLINK 5.0 */
/* Subtle, high-quality animations that enhance without distracting */

/* ===== SUBTLE PARTICLE BACKGROUND ===== */
.particle-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
    overflow: hidden;
}

/* Floating particles */
@keyframes particle-float {
    0% {
        transform: translateY(0) translateX(0) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 0.3;
    }
    90% {
        opacity: 0.3;
    }
    100% {
        transform: translateY(-100px) translateX(50px) rotate(180deg);
        opacity: 0;
    }
}

.particle {
    position: absolute;
    width: 2px;
    height: 2px;
    background: rgba(0, 240, 255, 0.4);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.6);
    animation: particle-float 15s linear infinite;
}

.particle:nth-child(2n) {
    background: rgba(157, 78, 221, 0.3);
    box-shadow: 0 0 10px rgba(157, 78, 221, 0.5);
    animation-duration: 18s;
    animation-delay: -3s;
}

.particle:nth-child(3n) {
    background: rgba(255, 158, 0, 0.3);
    box-shadow: 0 0 10px rgba(255, 158, 0, 0.5);
    animation-duration: 20s;
    animation-delay: -5s;
}

/* ===== ENERGY WAVES ===== */
@keyframes energy-wave {
    0% {
        transform: translateX(-100%) scaleY(0.5);
        opacity: 0;
    }
    50% {
        opacity: 0.1;
    }
    100% {
        transform: translateX(100%) scaleY(0.5);
        opacity: 0;
    }
}

.energy-waves {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
    overflow: hidden;
}

.wave {
    position: absolute;
    width: 200%;
    height: 100px;
    background: linear-gradient(90deg, 
        transparent,
        rgba(0, 240, 255, 0.1),
        rgba(157, 78, 221, 0.1),
        rgba(255, 158, 0, 0.1),
        transparent
    );
    filter: blur(20px);
    animation: energy-wave 20s linear infinite;
}

.wave:nth-child(2) {
    top: 30%;
    animation-duration: 25s;
    animation-delay: -5s;
    opacity: 0.07;
}

.wave:nth-child(3) {
    top: 70%;
    animation-duration: 30s;
    animation-delay: -10s;
    opacity: 0.05;
}

/* ===== PULSING GLOW ORBS ===== */
@keyframes orb-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.05;
    }
    50% {
        transform: scale(1.5);
        opacity: 0.1;
    }
}

.glow-orbs {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
}

.orb {
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    filter: blur(80px);
    animation: orb-pulse 15s ease-in-out infinite;
}

.orb-cyan {
    background: radial-gradient(circle, 
        rgba(0, 240, 255, 0.2) 0%,
        rgba(0, 240, 255, 0.05) 50%,
        transparent 70%
    );
    top: 20%;
    left: 10%;
    animation-delay: 0s;
}

.orb-violet {
    background: radial-gradient(circle, 
        rgba(157, 78, 221, 0.15) 0%,
        rgba(157, 78, 221, 0.03) 50%,
        transparent 70%
    );
    top: 60%;
    left: 80%;
    animation-duration: 20s;
    animation-delay: -5s;
}

.orb-orange {
    background: radial-gradient(circle, 
        rgba(255, 158, 0, 0.12) 0%,
        rgba(255, 158, 0, 0.02) 50%,
        transparent 70%
    );
    top: 80%;
    left: 20%;
    animation-duration: 25s;
    animation-delay: -10s;
}

/* ===== SUBTLE GRID ANIMATION ===== */
@keyframes grid-shift {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 100px 100px;
    }
}

.grid-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -2;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 80px 80px;
    animation: grid-shift 60s linear infinite;
    opacity: 0.2;
}

/* ===== STARS TWINKLE ===== */
@keyframes star-twinkle {
    0%, 100% {
        opacity: 0.2;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}

.stars-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -2;
}

.star {
    position: absolute;
    width: 2px;
    height: 2px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 0 10px white;
    animation: star-twinkle 3s ease-in-out infinite;
}

/* ===== CYBER CIRCUIT LINES ===== */
@keyframes circuit-glow {
    0%, 100% {
        stroke-dashoffset: 1000;
        opacity: 0.3;
    }
    50% {
        opacity: 0.6;
    }
}

.circuit-svg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
    opacity: 0.1;
}

.circuit-path {
    fill: none;
    stroke: url(#cyber-gradient);
    stroke-width: 0.5;
    stroke-dasharray: 10, 5;
    animation: circuit-glow 20s linear infinite;
}

/* ===== LIQUID METAL EFFECT ===== */
@keyframes liquid-flow {
    0% {
        background-position: 0% 50%;
        filter: hue-rotate(0deg);
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
        filter: hue-rotate(360deg);
    }
}

.liquid-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -3;
    background: linear-gradient(45deg, 
        rgba(10, 10, 20, 0.9) 0%,
        rgba(20, 20, 40, 0.7) 25%,
        rgba(30, 30, 60, 0.5) 50%,
        rgba(20, 20, 40, 0.7) 75%,
        rgba(10, 10, 20, 0.9) 100%
    );
    background-size: 400% 400%;
    animation: liquid-flow 40s ease infinite;
    opacity: 0.3;
}

/* ===== NEURAL NETWORK CONNECTIONS ===== */
@keyframes neural-pulse {
    0% {
        stroke-opacity: 0.1;
        stroke-width: 0.5;
    }
    50% {
        stroke-opacity: 0.3;
        stroke-width: 1;
    }
    100% {
        stroke-opacity: 0.1;
        stroke-width: 0.5;
    }
}

.neural-svg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
    opacity: 0.15;
}

.neural-path {
    fill: none;
    stroke: #00F0FF;
    stroke-width: 0.5;
    stroke-dasharray: 5, 5;
    animation: neural-pulse 10s ease-in-out infinite;
}

.neural-path:nth-child(2n) {
    stroke: #9D4EDD;
    animation-delay: -2s;
}

.neural-path:nth-child(3n) {
    stroke: #FF9E00;
    animation-delay: -4s;
}

/* ===== FLOATING GEOMETRIC SHAPES ===== */
@keyframes shape-float {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 0.1;
    }
    25% {
        transform: translate(50px, -30px) rotate(90deg);
        opacity: 0.15;
    }
    50% {
        transform: translate(0, -60px) rotate(180deg);
        opacity: 0.1;
    }
    75% {
        transform: translate(-50px, -30px) rotate(270deg);
        opacity: 0.15;
    }
}

.floating-shapes {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
}

.shape {
    position: absolute;
    opacity: 0.1;
    animation: shape-float 30s ease-in-out infinite;
    filter: blur(10px);
}

.shape-triangle {
    width: 100px;
    height: 100px;
    background: linear-gradient(45deg, #00F0FF, #9D4EDD);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.shape-circle {
    width: 80px;
    height: 80px;
    background: radial-gradient(circle, #FF9E00, transparent 70%);
    border-radius: 50%;
    animation-delay: -10s;
    top: 70%;
    left: 80%;
}

.shape-square {
    width: 60px;
    height: 60px;
    background: linear-gradient(45deg, #9D4EDD, #00F0FF);
    animation-delay: -20s;
    top: 30%;
    left: 20%;
}

/* ===== SCAN LINES (PREMIUM VERSION) ===== */
@keyframes premium-scan {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 0 100px;
    }
}

.premium-scanlines {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9998;
    background: repeating-linear-gradient(
        0deg,
        transparent 0%,
        transparent 1px,
        rgba(0, 240, 255, 0.02) 1px,
        rgba(0, 240, 255, 0.02) 2px
    );
    background-size: 100% 100px;
    animation: premium-scan 20s linear infinite;
    opacity: 0.1;
}

/* ===== THEME-SPECIFIC ADJUSTMENTS ===== */

/* Dark theme (cyberpunk) */
.theme-dark .particle {
    animation-duration: 12s;
    opacity: 0.4;
}

.theme-dark .wave {
    opacity: 0.08;
}

/* Light theme (sunrise) */
.theme-light .particle {
    background: rgba(0, 140, 255, 0.2);
    box-shadow: 0 0 10px rgba(0, 140, 255, 0.4);
}

.theme-light .orb-cyan {
    background: radial-gradient(circle, 
        rgba(0, 140, 255, 0.15) 0%,
        rgba(0, 140, 255, 0.03) 50%,
        transparent 70%
    );
}

.theme-light .grid-bg {
    background-image: 
        linear-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */
@media (prefers-reduced-motion: reduce) {
    .particle, .wave, .orb, .grid-bg, .star,
    .circuit-path, .liquid-bg, .neural-path,
    .shape, .premium-scanlines {
        animation: none !important;
    }
}

@media (max-width: 768px) {
    .particle {
        width: 1px;
        height: 1px;
    }
    
    .orb {
        width: 200px;
        height: 200px;
        filter: blur(60px);
    }
    
    .shape {
        width: 50px;
        height: 50px;
    }
}

/* ===== UTILITY CLASSES ===== */
.bg-animated {
    position: relative;
    overflow: hidden;
}

.bg-animated::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
}

/* Smooth transitions for theme changes */
* {
    transition: background-color 0.5s ease,
                color 0.5s ease,
                border-color 0.5s ease,
                box-shadow 0.5s ease;
}