/* Interactive Background for Stock Market Site */
body {
    position: relative;
    overflow-x: clip;
}

.interactive-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 30%, #334155 50%, #1e293b 70%, #0f172a 100%);
    background-size: 200% 200%;
    animation: backgroundShift 20s ease infinite;
    /* Removed will-change to reduce memory consumption - background animation is lightweight */
    transform: translateZ(0); /* Force GPU acceleration */
}

@keyframes backgroundShift {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

/* Static Grid Pattern with Neon - Covers whole page */
.grid-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(rgba(0, 191, 255, 0.15) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 191, 255, 0.15) 1px, transparent 1px);
    background-size: 50px 50px;
    background-position: 0 0;
    opacity: 0.4;
    box-shadow: inset 0 0 200px rgba(0, 191, 255, 0.1);
    /* No animation - static grid */
}

/* Static Lines (no animation) */
.chart-line {
    position: absolute;
    height: 3px;
    background: linear-gradient(90deg, 
        transparent 0%,
        rgba(0, 255, 136, 0.4) 20%,
        rgba(0, 191, 255, 0.8) 50%,
        rgba(0, 255, 136, 0.4) 80%,
        transparent 100%);
    opacity: 0.6;
    filter: blur(1px);
    box-shadow: 
        0 0 10px rgba(0, 191, 255, 0.8),
        0 0 20px rgba(0, 255, 136, 0.6);
    /* No animation - static lines */
}

.neon-line {
    background: linear-gradient(90deg, 
        transparent 0%,
        rgba(255, 0, 128, 0.3) 20%,
        rgba(0, 191, 255, 0.9) 50%,
        rgba(0, 255, 136, 0.5) 80%,
        transparent 100%);
    box-shadow: 
        0 0 15px rgba(0, 191, 255, 1),
        0 0 25px rgba(0, 255, 136, 0.8),
        0 0 35px rgba(255, 0, 128, 0.6);
}

.chart-line::before {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    background: rgba(0, 191, 255, 1);
    border-radius: 50%;
    top: -3.5px;
    left: 0;
    box-shadow: 
        0 0 15px rgba(0, 191, 255, 1),
        0 0 25px rgba(0, 191, 255, 0.8),
        0 0 35px rgba(0, 191, 255, 0.6);
    animation: dotGlow 2s infinite ease-in-out;
}

@keyframes dotGlow {
    0%, 100% {
        box-shadow: 
            0 0 15px rgba(0, 191, 255, 1),
            0 0 25px rgba(0, 191, 255, 0.8),
            0 0 35px rgba(0, 191, 255, 0.6);
        transform: scale(1);
    }
    50% {
        box-shadow: 
            0 0 20px rgba(0, 191, 255, 1),
            0 0 35px rgba(0, 191, 255, 0.9),
            0 0 50px rgba(0, 191, 255, 0.7);
        transform: scale(1.2);
    }
}

@keyframes lineMove {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    10% {
        opacity: 0.6;
    }
    90% {
        opacity: 0.6;
    }
    100% {
        transform: translateX(100vw);
        opacity: 0;
    }
}

/* Floating Particles with Neon Effect */
.particle {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    filter: blur(0.5px);
}

.neon-particle {
    animation: neonPulseBlue 2s infinite ease-in-out;
}

.particle.neon-blue-dot {
    background: rgba(0, 191, 255, 0.9);
    box-shadow: 
        0 0 10px rgba(0, 191, 255, 1),
        0 0 20px rgba(0, 191, 255, 0.8),
        0 0 30px rgba(0, 191, 255, 0.6);
    animation: neonPulseBlue 2s infinite ease-in-out;
}

.particle.neon-red-dot {
    background: rgba(255, 0, 128, 0.9);
    box-shadow: 
        0 0 10px rgba(255, 0, 128, 1),
        0 0 20px rgba(255, 0, 128, 0.8),
        0 0 30px rgba(255, 0, 128, 0.6);
    animation: neonPulseRed 2s infinite ease-in-out;
}

@keyframes neonPulseBlue {
    0%, 100% {
        box-shadow: 
            0 0 10px rgba(0, 191, 255, 1),
            0 0 20px rgba(0, 191, 255, 0.8),
            0 0 30px rgba(0, 191, 255, 0.6),
            0 0 40px rgba(0, 191, 255, 0.4);
        transform: scale(1);
    }
    50% {
        box-shadow: 
            0 0 15px rgba(0, 191, 255, 1),
            0 0 30px rgba(0, 191, 255, 0.9),
            0 0 45px rgba(0, 191, 255, 0.7),
            0 0 60px rgba(0, 191, 255, 0.5);
        transform: scale(1.3);
    }
}

@keyframes neonPulseRed {
    0%, 100% {
        box-shadow: 
            0 0 10px rgba(255, 0, 128, 1),
            0 0 20px rgba(255, 0, 128, 0.8),
            0 0 30px rgba(255, 0, 128, 0.6),
            0 0 40px rgba(255, 0, 128, 0.4);
        transform: scale(1);
    }
    50% {
        box-shadow: 
            0 0 15px rgba(255, 0, 128, 1),
            0 0 30px rgba(255, 0, 128, 0.9),
            0 0 45px rgba(255, 0, 128, 0.7),
            0 0 60px rgba(255, 0, 128, 0.5);
        transform: scale(1.3);
    }
}

/* Static Data Flow Lines (no animation) */
.data-flow {
    position: absolute;
    width: 3px;
    height: 120px;
    background: linear-gradient(180deg, 
        transparent 0%,
        rgba(0, 255, 136, 0.3) 30%,
        rgba(0, 191, 255, 0.8) 50%,
        rgba(0, 255, 136, 0.3) 70%,
        transparent 100%);
    opacity: 0.7;
    box-shadow: 
        0 0 10px rgba(0, 255, 136, 0.8),
        0 0 20px rgba(0, 191, 255, 0.6);
    filter: blur(1px);
    /* No animation - static lines */
}

.neon-flow {
    box-shadow: 
        0 0 15px rgba(0, 255, 136, 1),
        0 0 25px rgba(0, 191, 255, 0.8),
        0 0 35px rgba(0, 255, 136, 0.6);
}

@keyframes dataFlow {
    0% {
        transform: translateY(-120px);
        opacity: 0;
    }
    20% {
        opacity: 0.7;
    }
    80% {
        opacity: 0.7;
    }
    100% {
        transform: translateY(100vh);
        opacity: 0;
    }
}

/* Moving Dots (Price Indicators) with Neon and Trails */
.price-dot {
    position: absolute;
    width: 8px;
    height: 8px;
    background: rgba(255, 0, 128, 1);
    border-radius: 50%;
    box-shadow: 
        0 0 15px rgba(255, 0, 128, 1),
        0 0 25px rgba(255, 0, 128, 0.8),
        0 0 35px rgba(255, 0, 128, 0.6),
        0 0 50px rgba(255, 0, 128, 0.4);
    animation: neonDotPulse 2s infinite ease-in-out;
    z-index: 10;
}

.price-dot.green {
    background: rgba(0, 255, 136, 1);
    box-shadow: 
        0 0 15px rgba(0, 255, 136, 1),
        0 0 25px rgba(0, 255, 136, 0.8),
        0 0 35px rgba(0, 255, 136, 0.6),
        0 0 50px rgba(0, 255, 136, 0.4);
}

.price-dot.purple {
    background: rgba(139, 0, 255, 1);
    box-shadow: 
        0 0 15px rgba(139, 0, 255, 1),
        0 0 25px rgba(139, 0, 255, 0.8),
        0 0 35px rgba(139, 0, 255, 0.6),
        0 0 50px rgba(139, 0, 255, 0.4);
}

.neon-dot {
    filter: blur(0.5px);
}

@keyframes neonDotPulse {
    0%, 100% {
        box-shadow: 
            0 0 15px rgba(255, 0, 128, 1),
            0 0 25px rgba(255, 0, 128, 0.8),
            0 0 35px rgba(255, 0, 128, 0.6),
            0 0 50px rgba(255, 0, 128, 0.4);
        transform: scale(1);
    }
    50% {
        box-shadow: 
            0 0 20px rgba(255, 0, 128, 1),
            0 0 35px rgba(255, 0, 128, 0.9),
            0 0 50px rgba(255, 0, 128, 0.7),
            0 0 70px rgba(255, 0, 128, 0.5);
        transform: scale(1.3);
    }
}

.price-dot.green {
    animation: neonDotPulseGreen 2s infinite ease-in-out;
}

.price-dot.purple {
    animation: neonDotPulsePurple 2s infinite ease-in-out;
}

@keyframes neonDotPulseGreen {
    0%, 100% {
        box-shadow: 
            0 0 15px rgba(0, 255, 136, 1),
            0 0 25px rgba(0, 255, 136, 0.8),
            0 0 35px rgba(0, 255, 136, 0.6),
            0 0 50px rgba(0, 255, 136, 0.4);
        transform: scale(1);
    }
    50% {
        box-shadow: 
            0 0 20px rgba(0, 255, 136, 1),
            0 0 35px rgba(0, 255, 136, 0.9),
            0 0 50px rgba(0, 255, 136, 0.7),
            0 0 70px rgba(0, 255, 136, 0.5);
        transform: scale(1.3);
    }
}

@keyframes neonDotPulsePurple {
    0%, 100% {
        box-shadow: 
            0 0 15px rgba(139, 0, 255, 1),
            0 0 25px rgba(139, 0, 255, 0.8),
            0 0 35px rgba(139, 0, 255, 0.6),
            0 0 50px rgba(139, 0, 255, 0.4);
        transform: scale(1);
    }
    50% {
        box-shadow: 
            0 0 20px rgba(139, 0, 255, 1),
            0 0 35px rgba(139, 0, 255, 0.9),
            0 0 50px rgba(139, 0, 255, 0.7),
            0 0 70px rgba(139, 0, 255, 0.5);
        transform: scale(1.3);
    }
}

.price-dot-trail {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9;
    overflow: visible;
}

.trail-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.trail-svg path {
    transition: opacity 0.3s ease-out;
}

/* Static Connection Lines (no animation) */
.connection-line {
    position: absolute;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(0, 191, 255, 0.4) 20%, 
        rgba(0, 255, 136, 0.8) 50%, 
        rgba(0, 191, 255, 0.4) 80%, 
        transparent 100%);
    box-shadow: 
        0 0 10px rgba(0, 191, 255, 0.6),
        0 0 20px rgba(0, 255, 136, 0.4);
    filter: blur(1px);
    /* No animation - static lines */
}

.neon-connection {
    box-shadow: 
        0 0 15px rgba(0, 191, 255, 0.8),
        0 0 25px rgba(0, 255, 136, 0.6),
        0 0 35px rgba(255, 0, 128, 0.4);
}

@keyframes connectionPulse {
    0%, 100% {
        opacity: 0.4;
        transform: scaleX(0.8);
        box-shadow: 
            0 0 10px rgba(0, 191, 255, 0.6),
            0 0 20px rgba(0, 255, 136, 0.4);
    }
    50% {
        opacity: 0.8;
        transform: scaleX(1);
        box-shadow: 
            0 0 20px rgba(0, 191, 255, 1),
            0 0 35px rgba(0, 255, 136, 0.8),
            0 0 50px rgba(255, 0, 128, 0.6);
    }
}

/* Wave Pattern removed - was causing light green section at bottom */

/* Glowing Orbs with Neon */
.glow-orb {
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, 
        rgba(0, 191, 255, 0.4) 0%, 
        rgba(0, 255, 136, 0.3) 30%,
        rgba(255, 0, 128, 0.2) 60%,
        transparent 80%);
    filter: blur(80px);
    animation: orbFloat 25s ease-in-out infinite, neonOrbPulse 4s ease-in-out infinite;
    box-shadow: 
        0 0 100px rgba(0, 191, 255, 0.6),
        0 0 150px rgba(0, 255, 136, 0.4),
        0 0 200px rgba(255, 0, 128, 0.3);
}

.neon-orb {
    box-shadow: 
        0 0 120px rgba(0, 191, 255, 0.8),
        0 0 180px rgba(0, 255, 136, 0.6),
        0 0 240px rgba(255, 0, 128, 0.4);
}

@keyframes orbFloat {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    33% {
        transform: translate(150px, 150px) scale(1.3);
    }
    66% {
        transform: translate(-150px, 100px) scale(0.9);
    }
}

@keyframes neonOrbPulse {
    0%, 100% {
        opacity: 0.6;
        filter: blur(80px);
    }
    50% {
        opacity: 0.9;
        filter: blur(100px);
    }
}

/* Ensure content is above background */
.app-layout,
.main-wrapper,
.container {
    position: relative;
    z-index: 1;
}

/* ==========================================================================
   Phones / touch devices: replace heavy animated background with a stable
   static gradient. The combination of position:fixed + animated
   background-position + blur(80px) orbs + the mobile browser URL bar
   showing/hiding causes visible flicker on most phones, so we strip the
   animations out entirely on small / touch screens.
   ========================================================================== */
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
    .interactive-background {
        background: linear-gradient(160deg, #0b1224 0%, #111c33 45%, #0b1224 100%);
        background-size: 100% 100%;
        background-attachment: scroll;
        animation: none !important;
        transform: none; /* avoid Safari compositor flicker with the address bar */
        opacity: 1;
    }

    .grid-pattern {
        opacity: 0.22;
        box-shadow: none;
    }

    /* These are the expensive layers — hide on phones */
    .glow-orb,
    .particle,
    .chart-line,
    .data-flow,
    .price-dot,
    .price-dot-trail,
    .connection-line,
    .oscillating-line-container {
        display: none !important;
    }
}

/* Oscillating Lines (Flexible lines that follow leading point) */
.oscillating-line-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
}

.oscillating-line-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
}

/* Performance optimization */
/* Removed global will-change to reduce memory consumption */
/* GPU acceleration is handled via transform: translateZ(0) on specific elements */