.fp-biopharma-data-flow-pipeline-ui {
    --fp-container-width: 100%;
    --fp-max-width: 600px;
    --fp-aspect-ratio: 1 / 1;
    
    --fp-primary-color: #ffffff; 
    --fp-secondary-color: #f8fafc; 
    --fp-muted-color: #64748b; 
    --fp-soft-color: #e0f2fe; 
    --fp-background-color: transparent;
    
    --fp-info-color: #bae6fd; 
    --fp-warning-color: #7dd3fc; 
    --fp-danger-color: #0ea5e9; 
    --fp-accent-color: #38bdf8; 
    --fp-text-color: #0f172a; 

    width: var(--fp-container-width);
    max-width: var(--fp-max-width);
    margin: 0 auto;
    background: var(--fp-background-color);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    box-sizing: border-box;
    position: relative;
}

.fp-biopharma-data-flow-pipeline-ui * {
    box-sizing: inherit;
}

.fp-biopharma-data-flow-pipeline-ui-stage {
    aspect-ratio: var(--fp-aspect-ratio);
    background: var(--fp-primary-color);
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 40px -10px rgba(15, 23, 42, 0.05);
    border: 1px solid var(--fp-soft-color);
}

.fp-biopharma-data-flow-pipeline-ui-grid {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-size: 40px 40px;
    background-image: 
        linear-gradient(to right, rgba(224, 242, 254, 0.5) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(224, 242, 254, 0.5) 1px, transparent 1px);
    z-index: 0;
}

.fp-biopharma-data-flow-pipeline-ui-ambient {
    position: absolute;
    width: 120%;
    height: 120%;
    background: radial-gradient(circle at 70% 50%, rgba(56, 189, 248, 0.08) 0%, transparent 60%);
    animation: fp-biopharma-data-flow-pipeline-ui-breathe 4s ease-in-out infinite alternate;
    z-index: 1;
    pointer-events: none;
}

@keyframes fp-biopharma-data-flow-pipeline-ui-breathe {
    0% { transform: scale(0.9); opacity: 0.5; }
    100% { transform: scale(1.1); opacity: 1; }
}

.fp-biopharma-data-flow-pipeline-ui-svg-container {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 2;
    pointer-events: none;
}

.fp-biopharma-data-flow-pipeline-ui-path {
    fill: none;
    stroke: var(--fp-soft-color);
    stroke-width: 4;
    stroke-linecap: round;
}

.fp-biopharma-data-flow-pipeline-ui-path-inner {
    fill: none;
    stroke: var(--fp-info-color);
    stroke-width: 2;
    stroke-dasharray: 4 8;
    animation: fp-biopharma-data-flow-pipeline-ui-dash 20s linear infinite;
}

@keyframes fp-biopharma-data-flow-pipeline-ui-dash {
    to { stroke-dashoffset: -1000; }
}

.fp-biopharma-data-flow-pipeline-ui-node-layer {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 3;
}

.fp-biopharma-data-flow-pipeline-ui-node {
    position: absolute;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.fp-biopharma-data-flow-pipeline-ui-node.source-1 { top: 25%; left: 20%; }
.fp-biopharma-data-flow-pipeline-ui-node.source-2 { top: 75%; left: 20%; }
.fp-biopharma-data-flow-pipeline-ui-node.hub { top: 50%; left: 80%; }

.fp-biopharma-data-flow-pipeline-ui-icon-box {
    width: 48px;
    height: 48px;
    background: var(--fp-primary-color);
    border: 2px solid var(--fp-accent-color);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--fp-danger-color);
    box-shadow: 0 4px 12px rgba(56, 189, 248, 0.15);
    position: relative;
}

.fp-biopharma-data-flow-pipeline-ui-node-label {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--fp-text-color);
    letter-spacing: 0.05em;
    background: var(--fp-primary-color);
    padding: 2px 8px;
    border-radius: 100px;
    border: 1px solid var(--fp-soft-color);
    text-transform: uppercase;
}

.fp-biopharma-data-flow-pipeline-ui-hub-core {
    width: 80px;
    height: 80px;
    background: var(--fp-primary-color);
    border: 3px solid var(--fp-text-color);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1);
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 2;
}

.fp-biopharma-data-flow-pipeline-ui-hub-ring {
    position: absolute;
    top: -15px; left: -15px; right: -15px; bottom: -15px;
    border: 2px dashed var(--fp-accent-color);
    border-radius: 50%;
    animation: fp-biopharma-data-flow-pipeline-ui-spin 8s linear infinite;
    opacity: 0.6;
    z-index: 1;
}

@keyframes fp-biopharma-data-flow-pipeline-ui-spin {
    100% { transform: rotate(360deg); }
}

.fp-biopharma-data-flow-pipeline-ui-hub-val {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--fp-text-color);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.fp-biopharma-data-flow-pipeline-ui-hub-unit {
    font-size: 0.55rem;
    font-weight: 700;
    color: var(--fp-muted-color);
    letter-spacing: 0.1em;
    margin-top: 2px;
}

.fp-biopharma-data-flow-pipeline-ui-node.hub.is-receiving .fp-biopharma-data-flow-pipeline-ui-hub-core {
    transform: scale(1.1);
    border-color: var(--fp-danger-color);
    box-shadow: 0 0 20px rgba(14, 165, 233, 0.4), inset 0 0 10px rgba(14, 165, 233, 0.2);
    background: #f0f9ff;
}

.fp-biopharma-data-flow-pipeline-ui-node.hub.is-receiving .fp-biopharma-data-flow-pipeline-ui-hub-val {
    color: var(--fp-danger-color);
}

.fp-biopharma-data-flow-pipeline-ui-particles {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 4;
    pointer-events: none;
}

.fp-biopharma-data-flow-pipeline-ui-particle {
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--fp-accent-color);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 10px var(--fp-accent-color), 0 0 4px #ffffff;
    will-change: left, top;
}

.fp-biopharma-data-flow-pipeline-ui-particle.type-b {
    background: var(--fp-danger-color);
    box-shadow: 0 0 10px var(--fp-danger-color), 0 0 4px #ffffff;
    width: 6px; height: 6px;
}

.fp-biopharma-data-flow-pipeline-ui-header {
    position: absolute;
    top: 20px; left: 20px; right: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 5;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 8px 16px;
    border-radius: 12px;
    border: 1px solid var(--fp-soft-color);
}

.fp-biopharma-data-flow-pipeline-ui-title {
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--fp-text-color);
    letter-spacing: 0.05em;
}

.fp-biopharma-data-flow-pipeline-ui-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--fp-danger-color);
}

.fp-biopharma-data-flow-pipeline-ui-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--fp-danger-color);
    animation: fp-biopharma-data-flow-pipeline-ui-pulse 1s infinite;
}

@keyframes fp-biopharma-data-flow-pipeline-ui-pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 8px var(--fp-danger-color); }
    50% { opacity: 0.4; box-shadow: none; }
}

@media (max-width: 480px) {
    .fp-biopharma-data-flow-pipeline-ui-node.source-1 { top: 20%; left: 20%; }
    .fp-biopharma-data-flow-pipeline-ui-node.source-2 { top: 80%; left: 20%; }
    .fp-biopharma-data-flow-pipeline-ui-hub-core { width: 65px; height: 65px; }
    .fp-biopharma-data-flow-pipeline-ui-hub-val { font-size: 1.2rem; }
    .fp-biopharma-data-flow-pipeline-ui-icon-box { width: 36px; height: 36px; }
    .fp-biopharma-data-flow-pipeline-ui-icon-box svg { width: 18px; height: 18px; }
}

(function() {
    document.querySelectorAll('.fp-biopharma-data-flow-pipeline-ui').forEach(root => {
        const particleContainer = root.querySelector('#fp-biopharma-data-flow-pipeline-ui-particles');
        const hubNode = root.querySelector('#fp-biopharma-data-flow-pipeline-ui-hub');
        const valDisplay = root.querySelector('#fp-biopharma-data-flow-pipeline-ui-val');

        if (!particleContainer || !hubNode || !valDisplay) return;

        let animationFrameId;
        let particles = [];
        let totalData = 1.20; 
        let lastSpawnTime = 0;

        const path1 = { p0: {x:20, y:25}, p1: {x:50, y:25}, p2: {x:50, y:50}, p3: {x:80, y:50} };
        const path2 = { p0: {x:20, y:75}, p1: {x:50, y:75}, p2: {x:50, y:50}, p3: {x:80, y:50} };

        function fp_biopharma_data_flow_pipeline_ui_bezier(t, p) {
            const cX = 3 * (p.p1.x - p.p0.x);
            const bX = 3 * (p.p2.x - p.p1.x) - cX;
            const aX = p.p3.x - p.p0.x - cX - bX;
            const cY = 3 * (p.p1.y - p.p0.y);
            const bY = 3 * (p.p2.y - p.p1.y) - cY;
            const aY = p.p3.y - p.p0.y - cY - bY;
            
            const x = (aX * Math.pow(t, 3)) + (bX * Math.pow(t, 2)) + (cX * t) + p.p0.x;
            const y = (aY * Math.pow(t, 3)) + (bY * Math.pow(t, 2)) + (cY * t) + p.p0.y;
            return { x, y };
        }

        function fp_biopharma_data_flow_pipeline_ui_spawnParticle() {
            const el = document.createElement('div');
            const isPath1 = Math.random() > 0.5;
            const typeClass = Math.random() > 0.7 ? 'type-b' : '';
            el.className = `fp-biopharma-data-flow-pipeline-ui-particle ${typeClass}`;
            
            particleContainer.appendChild(el);
            
            particles.push({
                el: el,
                t: 0,
                path: isPath1 ? path1 : path2,
                speed: 0.006 + (Math.random() * 0.004) 
            });
        }

        function fp_biopharma_data_flow_pipeline_ui_hubSpike() {
            hubNode.classList.add('is-receiving');
            
            totalData += 0.01;
            valDisplay.textContent = totalData.toFixed(2);

            setTimeout(() => {
                if (document.body.contains(root)) {
                    hubNode.classList.remove('is-receiving');
                }
            }, 150);
        }

        function fp_biopharma_data_flow_pipeline_ui_loop(timestamp) {
            if (!document.body.contains(root)) {
                cancelAnimationFrame(animationFrameId);
                observer.disconnect();
                document.removeEventListener('visibilitychange', fp_biopharma_data_flow_pipeline_ui_handleVisibilityChange);
                return;
            }

            if (document.visibilityState === 'visible') {
                if (timestamp - lastSpawnTime > 400) { 
                    fp_biopharma_data_flow_pipeline_ui_spawnParticle();
                    lastSpawnTime = timestamp;
                    
                    if(Math.random() > 0.8) {
                        setTimeout(fp_biopharma_data_flow_pipeline_ui_spawnParticle, 100);
                    }
                }

                for (let i = particles.length - 1; i >= 0; i--) {
                    let p = particles[i];
                    p.t += p.speed;
                    
                    if (p.t >= 1) {
                        p.el.remove();
                        particles.splice(i, 1);
                        fp_biopharma_data_flow_pipeline_ui_hubSpike();
                    } else {
                        const pos = fp_biopharma_data_flow_pipeline_ui_bezier(p.t, p.path);
                        p.el.style.left = pos.x + '%';
                        p.el.style.top = pos.y + '%';
                    }
                }
            }

            animationFrameId = requestAnimationFrame(fp_biopharma_data_flow_pipeline_ui_loop);
        }

        function fp_biopharma_data_flow_pipeline_ui_handleVisibilityChange() {
            if (document.visibilityState === 'hidden') {
                if (animationFrameId) {
                    cancelAnimationFrame(animationFrameId);
                    animationFrameId = null;
                }
            } else {
                if (!animationFrameId) {
                    lastSpawnTime = performance.now();
                    animationFrameId = requestAnimationFrame(fp_biopharma_data_flow_pipeline_ui_loop);
                }
            }
        }

        document.addEventListener('visibilitychange', fp_biopharma_data_flow_pipeline_ui_handleVisibilityChange);

        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    if (!animationFrameId && document.visibilityState === 'visible') {
                        lastSpawnTime = performance.now();
                        animationFrameId = requestAnimationFrame(fp_biopharma_data_flow_pipeline_ui_loop);
                    }
                } else {
                    if (animationFrameId) {
                        cancelAnimationFrame(animationFrameId);
                        animationFrameId = null;
                    }
                }
            });
        }, { threshold: 0.1 });

        observer.observe(root);
    });
})();