/**
 * Lumiverse Solutions - Universal Continuous Multi-Layered Background System
 * File: public/css/continuous-bg.css
 * Description: High-performance, viewport-fixed continuous background system with
 *              prominent ambient floating orbs, cyber micro-dots, and radar wave lines.
 *              Vividly visible behind EVERY section and card across the entire scroll depth.
 */

/* =============================================================
   1. FIXED CONTINUOUS CANVAS (VISIBLE ACROSS 100% OF SCROLL DEPTH)
============================================================= */
.website-bg {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    overflow: hidden !important;
    pointer-events: none !important;
    z-index: 0 !important;

    /* Light subtle ambient glow */
    background:
        radial-gradient(
            circle at 75% 20%,
            rgba(255, 255, 255, 0.12) 0%,
            rgba(255, 255, 255, 0.06) 35%,
            transparent 65%
        ),
        radial-gradient(
            circle at 20% 50%,
            rgba(255, 255, 255, 0.10) 0%,
            rgba(255, 255, 255, 0.04) 35%,
            transparent 65%
        ),
        radial-gradient(
            circle at 78% 80%,
            rgba(255, 255, 255, 0.11) 0%,
            rgba(255, 255, 255, 0.05) 35%,
            transparent 65%
        ),
        radial-gradient(
            circle at 50% 40%,
            rgba(255, 255, 255, 0.05) 0%,
            transparent 50%
        ),
        linear-gradient(
            140deg,
            #FCFCFC 0%,
            #F9FAFF 25%,
            #F5F7FF 55%,
            #FAFAFF 80%,
            #F8FAFF 100%
        ) !important;
}

/* =============================================================
   2. FLOATING AMBIENT ORBS (INTO THE CONTENT VIEWPORT)
============================================================= */
.website-bg .bg-circle {
    position: absolute !important;
    border-radius: 50% !important;
    filter: blur(55px) !important;
    -webkit-filter: blur(55px) !important;
    pointer-events: none !important;
    will-change: transform !important;
}

/* Orb 1: Upper-Right Ambient Sphere (Deep Purple + Electric Cyan) */
.website-bg .bg-circle-1 {
    width: 850px !important;
    height: 850px !important;
    top: -120px !important;
    right: -80px !important;
    background: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.12) 0%,
        rgba(255, 255, 255, 0.07) 45%,
        transparent 70%
    ) !important;
    animation: floatDrift1 22s ease-in-out infinite alternate !important;
}

/* Orb 2: Mid-Left Ambient Sphere (Cyber Magenta) */
.website-bg .bg-circle-2 {
    width: 820px !important;
    height: 820px !important;
    top: 32% !important;
    left: -100px !important;
    background: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.13) 0%,
        rgba(255, 255, 255, 0.06) 48%,
        transparent 70%
    ) !important;
    animation: floatDrift2 26s ease-in-out infinite alternate !important;
}

/* Orb 3: Lower-Right Ambient Sphere (Electric Cyan + Purple) */
.website-bg .bg-circle-3 {
    width: 880px !important;
    height: 880px !important;
    bottom: -120px !important;
    right: 5% !important;
    background: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.14) 0%,
        rgba(255, 255, 255, 0.07) 48%,
        transparent 70%
    ) !important;
    animation: floatDrift3 24s ease-in-out infinite alternate !important;
}

/* Orb 4: Center Upper Ambient Sphere (Lavender Accent) */
.website-bg .bg-circle-4 {
    width: 650px !important;
    height: 650px !important;
    top: 15% !important;
    left: 25% !important;
    background: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.10) 0%,
        rgba(255, 255, 255, 0.05) 50%,
        transparent 70%
    ) !important;
    animation: floatDrift1 30s ease-in-out infinite alternate !important;
}

/* Orb 5: Center Lower Ambient Sphere (Deep Indigo Accent) */
.website-bg .bg-circle-5 {
    width: 680px !important;
    height: 680px !important;
    bottom: 10% !important;
    left: 20% !important;
    background: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.11) 0%,
        rgba(255, 255, 255, 0.06) 50%,
        transparent 70%
    ) !important;
    animation: floatDrift2 28s ease-in-out infinite alternate !important;
}

/* Orb 6: Upper-Left Soft Glow */
.website-bg .bg-circle-6 {
    width: 600px !important;
    height: 600px !important;
    top: -80px !important;
    left: -80px !important;
    background: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.12) 0%,
        rgba(255, 255, 255, 0.07) 50%,
        transparent 70%
    ) !important;
    animation: floatDrift3 25s ease-in-out infinite alternate !important;
}

/* Keyframe Drifting Animations */
@keyframes floatDrift1 {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-45px, 35px) scale(1.05); }
    100% { transform: translate(30px, -25px) scale(0.96); }
}

@keyframes floatDrift2 {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(40px, -30px) scale(1.06); }
    100% { transform: translate(-25px, 25px) scale(0.95); }
}

@keyframes floatDrift3 {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-30px, -35px) scale(1.05); }
    100% { transform: translate(35px, 30px) scale(0.97); }
}

/* Subtle rotation for background wave lines */
@keyframes waveRotate {
    0% { transform: rotate(0deg); }
    50% { transform: rotate(2deg); }
    100% { transform: rotate(0deg); }
}

/* =============================================================
   3. PROCEDURAL CYBER MICRO-DOT MATRIX PATTERNS (VIVID & VISIBLE)
============================================================= */
.website-bg .dot-pattern {
    position: absolute !important;
    width: 260px !important;
    height: 260px !important;
    background-image: radial-gradient(
        rgba(255, 255, 255, 0.20) 2px,
        transparent 2px
    ) !important;
    background-size: 30px 30px !important;
    pointer-events: none !important;
}

.website-bg .dots-1 {
    top: 100px !important;
    right: 12% !important;
    opacity: 0.45 !important;
    transform: rotate(-15deg) !important;
    animation: dotFloat 30s ease-in-out infinite;
}

.website-bg .dots-2 {
    top: 40% !important;
    left: 8% !important;
    opacity: 0.45 !important;
    transform: rotate(12deg) !important;
    animation: dotFloat 30s ease-in-out infinite;
    animation-delay: 5s;
}

.website-bg .dots-3 {
    bottom: 100px !important;
    right: 14% !important;
    opacity: 0.45 !important;
    transform: rotate(-8deg) !important;
    animation: dotFloat 30s ease-in-out infinite;
    animation-delay: 10s;
}

.website-bg .dots-4 {
    top: 22% !important;
    left: 12% !important;
    opacity: 0.40 !important;
    transform: rotate(15deg) !important;
    animation: dotFloat 30s ease-in-out infinite;
    animation-delay: 15s;
}

.website-bg .dots-5 {
    bottom: 25% !important;
    left: 10% !important;
    opacity: 0.40 !important;
    transform: rotate(-10deg) !important;
    animation: dotFloat 30s ease-in-out infinite;
    animation-delay: 20s;
}

.website-bg .dots-6 {
    top: 58% !important;
    right: 10% !important;
    opacity: 0.40 !important;
    transform: rotate(8deg) !important;
    animation: dotFloat 30s ease-in-out infinite;
    animation-delay: 25s;
}

/* =============================================================
   4. CONCENTRIC CYBER RADAR ARC WAVES (PROMINENT DEPTH)
============================================================= */
.website-bg .wave-lines {
    position: absolute !important;
    width: 680px !important;
    height: 400px !important;
    opacity: 0.15 !important;
    filter: blur(2px) !important;
    background: repeating-radial-gradient(
        ellipse at 50% 100%,
        transparent 0,
        transparent 16px,
        rgba(255, 255, 255, 0.08) 17px,
        transparent 18px
    ) !important;
    pointer-events: none !important;
    animation: waveRotate 30s ease-in-out infinite;
}

.website-bg .wave-1 {
    top: 15% !important;
    right: 3% !important;
    transform: rotate(-12deg) !important;
}

.website-bg .wave-2 {
    bottom: 18% !important;
    left: 3% !important;
    transform: rotate(16deg) !important;
}

.website-bg .wave-3 {
    top: 60% !important;
    right: 8% !important;
    transform: rotate(-8deg) !important;
}

.website-bg .wave-4 {
    top: -30px !important;
    left: 2% !important;
    transform: rotate(12deg) !important;
}

/* =============================================================
   5. SEAMLESS SECTION UTILITIES & FROSTED GLASS CARDS
============================================================= */
.continuous-bg-page {
    background-color: transparent !important;
    position: relative !important;
    overflow-x: hidden !important;
}

.continuous-bg-page section,
.continuous-bg-page .vapt-section,
.continuous-bg-page .service-hero-section,
.continuous-bg-page .vapt-section-alt {
    background: transparent !important;
    border-top: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

/* Frosted glass cards that allow the background orbs and waves to shine through */
.continuous-bg-page .vapt-minimal-card,
.continuous-bg-page .vapt-benefit-card,
.continuous-bg-page .process-card,
.continuous-bg-page .vapt-scope-card,
.continuous-bg-page .vapt-service-card,
.continuous-bg-page .vapt-pricing-card,
.continuous-bg-page .vapt-faq-item,
.continuous-bg-page .vapt-takeaway-bar,
.continuous-bg-page .hero-bitrix-card {
    background: rgba(255, 255, 255, 0.82) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.85) !important;
    box-shadow: 0 10px 30px rgba(101, 40, 247, 0.05) !important;
}

.continuous-bg-page .vapt-pricing-card.featured-plan {
    background: rgba(255, 255, 255, 0.92) !important;
    border-color: rgba(177, 0, 232, 0.4) !important;
}

/* =============================================================
   6. RESPONSIVE ADAPTATIONS
============================================================= */
@media (max-width: 1024px) {
    .website-bg .bg-circle {
        filter: blur(45px) !important;
    }
    .website-bg .bg-circle-1,
    .website-bg .bg-circle-2,
    .website-bg .bg-circle-3 {
        width: 600px !important;
        height: 600px !important;
    }
    .website-bg .dot-pattern {
        width: 200px !important;
        height: 200px !important;
    }
    .website-bg .wave-lines {
        width: 500px !important;
        height: 300px !important;
    }
}

@media (max-width: 640px) {
    .website-bg .bg-circle {
        filter: blur(35px) !important;
        width: 440px !important;
        height: 440px !important;
    }
    .website-bg .dots-1,
    .website-bg .dots-3,
    .website-bg .dots-6 {
        right: 10px !important;
        opacity: 0.45 !important;
    }
    .website-bg .dots-2,
    .website-bg .dots-4,
    .website-bg .dots-5 {
        left: 10px !important;
        opacity: 0.40 !important;
    }
    .website-bg .wave-lines {
        display: none !important;
    }
}