.fp-vc-api-fetching-data-ui {
    --fp-container-width: 100%;
    --fp-max-width: 500px;
    --fp-aspect-ratio: 1 / 1;

    --fp-primary-color: #ffffff;
    --fp-secondary-color: #e2e8f0;
    --fp-muted-color: #64748b;
    --fp-soft-color: #f8fafc;
    --fp-background-color: transparent;

    --fp-info-color: #0f3a2c;
    --fp-warning-color: #20634d;
    --fp-danger-color: #082119;
    --fp-accent-color: #164e3b;
    --fp-text-color: #0f172a;

    display: flex;
    justify-content: center;
    width: var(--fp-container-width);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.fp-vc-api-fetching-data-ui-container {
    width: 100%;
    max-width: var(--fp-max-width);
    background-color: var(--fp-background-color);
}

.fp-vc-api-fetching-data-ui-stage {
    aspect-ratio: var(--fp-aspect-ratio);
    background-color: var(--fp-primary-color);
    border: 1px solid var(--fp-secondary-color);
    border-radius: 24px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.04), inset 0 0 0 4px var(--fp-soft-color);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.fp-vc-api-fetching-data-ui-glow {
    position: absolute;
    width: 60%;
    height: 60%;
    background: radial-gradient(circle, rgba(22, 78, 59, 0.08) 0%, transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: fp-vc-api-fetching-data-ui-breathe 4s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

.fp-vc-api-fetching-data-ui-ring-container {
    position: absolute;
    width: 65%;
    height: 65%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px dashed var(--fp-secondary-color);
    animation: fp-vc-api-fetching-data-ui-spin 30s linear infinite;
    z-index: 2;
    pointer-events: none;
}

.fp-vc-api-fetching-data-ui-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
}

.fp-vc-api-fetching-data-ui-center-node {
    position: relative;
    width: 80px;
    height: 80px;
    background-color: var(--fp-primary-color);
    border: 2px solid var(--fp-secondary-color);
    border-radius: 20px;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 25px rgba(15, 58, 44, 0.1);
    transition: border-color 0.3s ease;
}

.fp-vc-api-fetching-data-ui-center-node svg {
    width: 40px;
    height: 40px;
    fill: var(--fp-info-color);
}

.fp-vc-api-fetching-data-ui-status-panel {
    position: absolute;
    bottom: 24px;
    background-color: var(--fp-primary-color);
    border: 1px solid var(--fp-secondary-color);
    padding: 10px 20px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 5;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}

.fp-vc-api-fetching-data-ui-status-dot {
    width: 8px;
    height: 8px;
    background-color: var(--fp-accent-color);
    border-radius: 50%;
    animation: fp-vc-api-fetching-data-ui-pulse 2s ease-in-out infinite;
}

.fp-vc-api-fetching-data-ui-status-text {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--fp-text-color);
    text-transform: uppercase;
}

@keyframes fp-vc-api-fetching-data-ui-breathe {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
    50% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
}

@keyframes fp-vc-api-fetching-data-ui-spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes fp-vc-api-fetching-data-ui-pulse {
    0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(22, 78, 59, 0.4); }
    50% { opacity: 0.6; transform: scale(1.1); box-shadow: 0 0 0 6px rgba(22, 78, 59, 0); }
}

@media (max-width: 480px) {
    .fp-vc-api-fetching-data-ui-stage { border-radius: 16px; }
    .fp-vc-api-fetching-data-ui-ring-container { width: 75%; height: 75%; }
    .fp-vc-api-fetching-data-ui-center-node { width: 64px; height: 64px; border-radius: 16px; }
    .fp-vc-api-fetching-data-ui-center-node svg { width: 32px; height: 32px; }
    .fp-vc-api-fetching-data-ui-status-panel { bottom: 16px; padding: 8px 16px; }
    .fp-vc-api-fetching-data-ui-status-text { font-size: 0.65rem; }
}

document.querySelectorAll('.fp-vc-api-fetching-data-ui').forEach(root => {
    const canvas = root.querySelector('.fp-vc-api-fetching-data-ui-canvas');
    if (!canvas) return;

    const ctx = canvas.getContext('2d', { alpha: true });
    const centerNode = root.querySelector('.fp-vc-api-fetching-data-ui-center-node');
    
    let animationFrameId;
    let isRunning = false;
    let lastTime = 0;

    let width, height, cx, cy;
    
    const nodesCount = 5;
    let orbitAngle = 0;
    const dataSources = ['NYSE', 'NASDAQ', 'CRUNCHBASE', 'PITCHBOOK', 'CB INSIGHTS'];
    const connections = [];

    const pineDark = '#0f3a2c';
    const pineAccent = '#164e3b';
    const pineSoft = '#20634d';
    const colorMuted = '#64748b';

    function fp_vc_api_fetching_data_ui_resize() {
        if (!canvas.parentElement) return;
        const rect = canvas.parentElement.getBoundingClientRect();
        width = rect.width;
        height = rect.height;
        canvas.width = width * window.devicePixelRatio;
        canvas.height = height * window.devicePixelRatio;
        ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
        cx = width / 2;
        cy = height / 2;
    }

    function fp_easeOutExpo(x) {
        return x === 1 ? 1 : 1 - Math.pow(2, -10 * x);
    }

    function fp_easeOutElastic(x) {
        const c4 = (2 * Math.PI) / 3;
        return x === 0 ? 0 : x === 1 ? 1 : Math.pow(2, -10 * x) * Math.sin((x * 10 - 0.75) * c4) + 1;
    }

    class fp_vc_Connection {
        constructor(nodeIndex) {
            this.nodeIndex = nodeIndex;
            this.progress = 0;
            this.state = 'extending';
            this.delay = Math.random() * 1000;
            this.speed = 0.0015; 
        }

        update(dt) {
            if (this.delay > 0) {
                this.delay -= dt;
                return;
            }

            if (this.state === 'extending') {
                this.progress += this.speed * dt;
                if (this.progress >= 1) {
                    this.progress = 1;
                    this.state = 'grabbing';
                    this.delay = 300 + Math.random() * 200;
                }
            } else if (this.state === 'grabbing') {
                this.state = 'snapping';
                this.progress = 0;
            } else if (this.state === 'snapping') {
                this.progress += (this.speed * 1.5) * dt;
                if (this.progress >= 1) {
                    this.state = 'extending';
                    this.progress = 0;
                    this.delay = 1000 + Math.random() * 2000;
                    this.nodeIndex = Math.floor(Math.random() * nodesCount);
                }
            }
        }

        draw(ctx, targetX, targetY) {
            if (this.delay > 0 && this.state === 'extending') return;

            let renderProgress = 0;
            ctx.beginPath();
            ctx.moveTo(cx, cy);

            if (this.state === 'extending') {
                renderProgress = fp_easeOutExpo(this.progress);
                const currentX = cx + (targetX - cx) * renderProgress;
                const currentY = cy + (targetY - cy) * renderProgress;
                
                ctx.lineTo(currentX, currentY);
                ctx.lineWidth = 1.5;
                ctx.strokeStyle = pineSoft;
                ctx.setLineDash([4, 4]);
                ctx.stroke();
                
                ctx.beginPath();
                ctx.arc(currentX, currentY, 3, 0, Math.PI * 2);
                ctx.fillStyle = pineSoft;
                ctx.fill();

            } else if (this.state === 'snapping') {
                const elasticFactor = fp_easeOutElastic(this.progress);
                const currentX = targetX - (targetX - cx) * elasticFactor;
                const currentY = targetY - (targetY - cy) * elasticFactor;

                ctx.lineTo(currentX, currentY);
                ctx.lineWidth = 2.5;
                ctx.strokeStyle = pineDark;
                ctx.setLineDash([]);
                ctx.stroke();

                ctx.beginPath();
                ctx.arc(currentX, currentY, 5, 0, Math.PI * 2);
                ctx.fillStyle = pineAccent;
                ctx.shadowColor = pineAccent;
                ctx.shadowBlur = 8;
                ctx.fill();
                ctx.shadowBlur = 0;
            }
        }
    }

    function fp_vc_api_fetching_data_ui_init() {
        connections.length = 0;
        for(let i=0; i<3; i++) {
            connections.push(new fp_vc_Connection(Math.floor(Math.random() * nodesCount)));
        }
    }

    function fp_vc_api_fetching_data_ui_loop(timestamp) {
        if (!isRunning) return;
        
        const dt = timestamp - lastTime || 0;
        lastTime = timestamp;

        ctx.clearRect(0, 0, width, height);

        orbitAngle -= 0.0003 * dt;

        const orbitRadius = Math.min(width, height) * 0.32;

        const nodePositions = [];
        for (let i = 0; i < nodesCount; i++) {
            const angle = orbitAngle + (i * (Math.PI * 2) / nodesCount);
            const nx = cx + Math.cos(angle) * orbitRadius;
            const ny = cy + Math.sin(angle) * orbitRadius;
            nodePositions.push({x: nx, y: ny, name: dataSources[i]});

            ctx.beginPath();
            ctx.arc(nx, ny, 8, 0, Math.PI * 2);
            ctx.fillStyle = '#ffffff';
            ctx.fill();
            ctx.lineWidth = 2;
            ctx.strokeStyle = pineDark;
            ctx.stroke();

            ctx.font = '600 9px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif';
            ctx.fillStyle = colorMuted;
            ctx.textAlign = 'center';
            ctx.fillText(dataSources[i], nx, ny - 14);
        }

        let isSnapping = connections.some(c => c.state === 'snapping' && c.progress < 0.5);
        if (isSnapping) {
            centerNode.style.borderColor = pineAccent;
            centerNode.style.transform = 'scale(0.97)';
        } else {
            centerNode.style.borderColor = 'var(--fp-secondary-color)';
            centerNode.style.transform = 'scale(1)';
        }

        connections.forEach(conn => {
            conn.update(dt);
            const target = nodePositions[conn.nodeIndex];
            if (target) {
                conn.draw(ctx, target.x, target.y);
            }
        });

        animationFrameId = requestAnimationFrame(fp_vc_api_fetching_data_ui_loop);
    }

    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                if (!isRunning && document.visibilityState !== "hidden") {
                    isRunning = true;
                    lastTime = performance.now();
                    animationFrameId = requestAnimationFrame(fp_vc_api_fetching_data_ui_loop);
                }
            } else {
                isRunning = false;
                cancelAnimationFrame(animationFrameId);
            }
        });
    });

    function fp_vc_api_fetching_data_ui_handleVisibility() {
        if (document.visibilityState === "hidden") {
            isRunning = false;
            cancelAnimationFrame(animationFrameId);
        } else if (!isRunning && root.getBoundingClientRect().top < window.innerHeight && root.getBoundingClientRect().bottom > 0) {
            isRunning = true;
            lastTime = performance.now();
            animationFrameId = requestAnimationFrame(fp_vc_api_fetching_data_ui_loop);
        }
    }

    function fp_vc_api_fetching_data_ui_checkDOM() {
        if (!document.body.contains(root)) {
            isRunning = false;
            cancelAnimationFrame(animationFrameId);
            window.removeEventListener('resize', fp_vc_api_fetching_data_ui_resize);
            document.removeEventListener('visibilitychange', fp_vc_api_fetching_data_ui_handleVisibility);
            observer.disconnect();
            return true;
        }
        return false;
    }

    window.addEventListener('resize', fp_vc_api_fetching_data_ui_resize);
    document.addEventListener('visibilitychange', fp_vc_api_fetching_data_ui_handleVisibility);
    
    fp_vc_api_fetching_data_ui_resize();
    fp_vc_api_fetching_data_ui_init();
    observer.observe(root);
    
    const cleanupInterval = setInterval(() => {
        if (fp_vc_api_fetching_data_ui_checkDOM()) {
            clearInterval(cleanupInterval);
        }
    }, 2000);
});