.fp-coaching-mentoring-ai-neural-sync-ui {
    /* ━━━━━━━━━━━━━━━━━━
       LAYOUT & SIZING SYSTEM
       ━━━━━━━━━━━━━━━━━━ */
    --fp-container-width: 100%;
    --fp-max-width: 500px;
    --fp-aspect-ratio: 1 / 1;

    /* ━━━━━━━━━━━━━━━━━━
       COLOR SYSTEM (Lavender Soft Glass)
       ━━━━━━━━━━━━━━━━━━ */
    --fp-primary-color: #F9F8F6; /* Putih Tulang (Bone White) */
    --fp-secondary-color: #EAE6EC; /* Soft Lavender Tint */
    --fp-muted-color: #9B8E9F; /* Muted Lavender Grey */
    --fp-soft-color: #3B2A40; /* Ungu Gelap (Dark Purple Text) */
    --fp-background-color: transparent;

    --fp-info-color: #C0A3D5; /* Lavender Soft */
    --fp-warning-color: #D4BCE6;
    --fp-danger-color: #9D75B9;
    --fp-accent-color: #B590CA; /* Primary Lavender Accent */

    width: var(--fp-container-width);
    max-width: var(--fp-max-width);
    margin: 0 auto;
    position: relative;
    box-sizing: border-box;
    background-color: var(--fp-background-color);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: var(--fp-soft-color);
}

.fp-coaching-mentoring-ai-neural-sync-ui * {
    box-sizing: border-box;
}

/* ━━━━━━━━━━━━━━━━━━
   STAGE & BASE LAYER
   ━━━━━━━━━━━━━━━━━━ */
.fp-coaching-mentoring-ai-neural-sync-ui-stage {
    width: 100%;
    aspect-ratio: var(--fp-aspect-ratio);
    background-color: var(--fp-primary-color);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 24px;
    border: 1px solid var(--fp-secondary-color);
    box-shadow: 0 12px 32px rgba(59, 42, 64, 0.04);
}

/* Subtle abstract background mesh */
.fp-coaching-mentoring-ai-neural-sync-ui-stage::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(var(--fp-secondary-color) 1px, transparent 1px);
    background-size: 20px 20px;
    opacity: 0.6;
    z-index: 0;
}

/* ━━━━━━━━━━━━━━━━━━
   LAYER 2: ROTATIONAL (CANVAS BEHIND GLASS)
   ━━━━━━━━━━━━━━━━━━ */
.fp-coaching-mentoring-ai-neural-sync-ui-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

/* ━━━━━━━━━━━━━━━━━━
   LAYER 1: BREATHING & FROSTED GLASS
   ━━━━━━━━━━━━━━━━━━ */
.fp-coaching-mentoring-ai-neural-sync-ui-glass-panel {
    position: relative;
    z-index: 2;
    width: 55%;
    height: 55%;
    border-radius: 50%;
    background: rgba(249, 248, 246, 0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 
        0 8px 32px rgba(59, 42, 64, 0.08),
        inset 0 0 20px rgba(255, 255, 255, 0.5);
    /* Layer 1: Subtle Base Breathing */
    animation: fp-coaching-mentoring-ai-neural-sync-ui-breathe 4s ease-in-out infinite alternate;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes fp-coaching-mentoring-ai-neural-sync-ui-breathe {
    0% { transform: scale(1); box-shadow: 0 8px 32px rgba(59, 42, 64, 0.08), inset 0 0 20px rgba(255, 255, 255, 0.5); }
    100% { transform: scale(1.02); box-shadow: 0 16px 48px rgba(181, 144, 202, 0.15), inset 0 0 30px rgba(255, 255, 255, 0.8); }
}

.fp-coaching-mentoring-ai-neural-sync-ui-icon-wrapper {
    position: relative;
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fp-coaching-mentoring-ai-neural-sync-ui-icon {
    width: 32px;
    height: 32px;
    fill: none;
    stroke: var(--fp-soft-color);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke 0.4s ease, filter 0.4s ease;
}

.fp-coaching-mentoring-ai-neural-sync-ui-ring {
    position: absolute;
    inset: 0;
    border: 1px dashed var(--fp-muted-color);
    border-radius: 50%;
    animation: fp-coaching-mentoring-ai-neural-sync-ui-spin 10s linear infinite;
    opacity: 0.5;
}

@keyframes fp-coaching-mentoring-ai-neural-sync-ui-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.fp-coaching-mentoring-ai-neural-sync-ui-status {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.fp-coaching-mentoring-ai-neural-sync-ui-status-text {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: var(--fp-muted-color);
    text-transform: uppercase;
    text-align: center;
    transition: color 0.4s ease;
}

.fp-coaching-mentoring-ai-neural-sync-ui-loader {
    display: flex;
    gap: 4px;
}

.fp-coaching-mentoring-ai-neural-sync-ui-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: var(--fp-accent-color);
    animation: fp-coaching-mentoring-ai-neural-sync-ui-bounce 1.4s infinite ease-in-out both;
}

.fp-coaching-mentoring-ai-neural-sync-ui-dot:nth-child(1) { animation-delay: -0.32s; }
.fp-coaching-mentoring-ai-neural-sync-ui-dot:nth-child(2) { animation-delay: -0.16s; }

@keyframes fp-coaching-mentoring-ai-neural-sync-ui-bounce {
    0%, 80%, 100% { transform: scale(0); opacity: 0.3; }
    40% { transform: scale(1); opacity: 1; }
}

/* ━━━━━━━━━━━━━━━━━━
   LAYER 3: REACTIVE SPIKE (MATCH SYNERGY)
   ━━━━━━━━━━━━━━━━━━ */
.fp-coaching-mentoring-ai-neural-sync-ui-stage.fp-coaching-mentoring-ai-neural-sync-ui-spike .fp-coaching-mentoring-ai-neural-sync-ui-glass-panel {
    border-color: rgba(181, 144, 202, 0.8);
    background: rgba(249, 248, 246, 0.6);
    box-shadow: 
        0 0 40px rgba(181, 144, 202, 0.3),
        inset 0 0 30px rgba(181, 144, 202, 0.2);
    transform: scale(1.05);
}

.fp-coaching-mentoring-ai-neural-sync-ui-stage.fp-coaching-mentoring-ai-neural-sync-ui-spike .fp-coaching-mentoring-ai-neural-sync-ui-icon {
    stroke: var(--fp-accent-color);
    filter: drop-shadow(0 0 8px rgba(181, 144, 202, 0.6));
}

.fp-coaching-mentoring-ai-neural-sync-ui-stage.fp-coaching-mentoring-ai-neural-sync-ui-spike .fp-coaching-mentoring-ai-neural-sync-ui-ring {
    border-color: var(--fp-accent-color);
    border-style: solid;
    opacity: 1;
    animation-duration: 3s;
}

.fp-coaching-mentoring-ai-neural-sync-ui-stage.fp-coaching-mentoring-ai-neural-sync-ui-spike .fp-coaching-mentoring-ai-neural-sync-ui-status-text {
    color: var(--fp-accent-color);
    font-weight: 800;
}

.fp-coaching-mentoring-ai-neural-sync-ui-stage.fp-coaching-mentoring-ai-neural-sync-ui-spike .fp-coaching-mentoring-ai-neural-sync-ui-loader {
    opacity: 0; /* Hide dots on spike */
}

/* Responsive Layout */
@media (max-width: 480px) {
    .fp-coaching-mentoring-ai-neural-sync-ui-glass-panel { width: 65%; height: 65%; }
    .fp-coaching-mentoring-ai-neural-sync-ui-icon-wrapper { width: 40px; height: 40px; margin-bottom: 12px; }
    .fp-coaching-mentoring-ai-neural-sync-ui-status-text { font-size: 0.55rem; }
}

(function() {
    const instances = document.querySelectorAll('.fp-coaching-mentoring-ai-neural-sync-ui');

    instances.forEach(root => {
        if (root.dataset.fpInitialized) return;
        root.dataset.fpInitialized = 'true';

        const stage = root.querySelector('.fp-coaching-mentoring-ai-neural-sync-ui-stage');
        const canvas = root.querySelector('.fp-coaching-mentoring-ai-neural-sync-ui-canvas');
        const statusText = root.querySelector('.fp-coaching-mentoring-ai-neural-sync-ui-status-text');
        
        if (!stage || !canvas) return;

        const ctx = canvas.getContext('2d', { alpha: true });
        let width, height, dpr;
        let rafId;
        let isVisible = true;

        // Visibility Pause
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => isVisible = entry.isIntersecting);
        }, { threshold: 0.1 });
        observer.observe(root);

        // Responsive Canvas
        function resize() {
            width = stage.offsetWidth;
            height = stage.offsetHeight;
            dpr = window.devicePixelRatio || 1;
            canvas.width = width * dpr;
            canvas.height = height * dpr;
            ctx.scale(dpr, dpr);
        }
        window.addEventListener('resize', resize);
        resize();

        // Setup Colors & Nodes
        const styles = getComputedStyle(root);
        const accentHex = styles.getPropertyValue('--fp-accent-color').trim() || '#B590CA';
        const hexToRgb = (hex) => {
            let r = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
            return r ? `${parseInt(r[1], 16)}, ${parseInt(r[2], 16)}, ${parseInt(r[3], 16)}` : '181, 144, 202';
        };
        const rgbAccent = hexToRgb(accentHex);

        const nodes = [];
        const numNodes = 14;
        for (let i = 0; i < numNodes; i++) {
            nodes.push({
                angle: Math.random() * Math.PI * 2,
                // Distance from center, ensure they span outside the glass panel
                radius: 70 + Math.random() * (Math.min(width, height) / 2 - 70),
                speed: (Math.random() * 0.004 + 0.002) * (Math.random() > 0.5 ? 1 : -1),
                size: Math.random() * 3 + 1.5,
                pulse: Math.random() * Math.PI * 2
            });
        }

        // Spike / Synergy State
        let spikeTimer = 0;
        let isSpike = false;
        let matchedNodes = [];

        // Main Animation Engine
        function fp_coaching_mentoring_ai_neural_sync_ui_loop() {
            if (!document.body.contains(root)) {
                window.removeEventListener('resize', resize);
                observer.disconnect();
                cancelAnimationFrame(rafId);
                return;
            }

            if (document.visibilityState === 'hidden' || !isVisible) {
                rafId = requestAnimationFrame(fp_coaching_mentoring_ai_neural_sync_ui_loop);
                return;
            }

            ctx.clearRect(0, 0, width, height);
            const cx = width / 2;
            const cy = height / 2;

            // Neural Match Logic (Layer 3 Spike Trigger)
            spikeTimer++;
            if (!isSpike && spikeTimer > 180 && Math.random() < 0.05) { // Trigger Synergy
                isSpike = true;
                spikeTimer = 0;
                stage.classList.add('fp-coaching-mentoring-ai-neural-sync-ui-spike');
                statusText.textContent = "SYNERGY IDENTIFIED";
                
                // Pick two random distant nodes
                const idx1 = Math.floor(Math.random() * nodes.length);
                let idx2 = Math.floor(Math.random() * nodes.length);
                while(idx1 === idx2) idx2 = Math.floor(Math.random() * nodes.length);
                matchedNodes = [nodes[idx1], nodes[idx2]];

            } else if (isSpike && spikeTimer > 80) { // End Synergy
                isSpike = false;
                spikeTimer = 0;
                stage.classList.remove('fp-coaching-mentoring-ai-neural-sync-ui-spike');
                statusText.textContent = "NEURAL SYNC";
                matchedNodes = [];
            }

            // Draw Ambient Connections
            ctx.lineWidth = 1;
            for (let i = 0; i < nodes.length; i++) {
                for (let j = i + 1; j < nodes.length; j++) {
                    const n1 = nodes[i];
                    const n2 = nodes[j];
                    const x1 = cx + Math.cos(n1.angle) * n1.radius;
                    const y1 = cy + Math.sin(n1.angle) * n1.radius;
                    const x2 = cx + Math.cos(n2.angle) * n2.radius;
                    const y2 = cy + Math.sin(n2.angle) * n2.radius;
                    const dist = Math.hypot(x2 - x1, y2 - y1);
                    
                    // Faint connections between close nodes
                    if (dist < 80) {
                        ctx.beginPath();
                        ctx.moveTo(x1, y1);
                        ctx.lineTo(x2, y2);
                        ctx.strokeStyle = `rgba(${rgbAccent}, ${0.3 * (1 - dist/80)})`;
                        ctx.stroke();
                    }
                }
            }

            // Draw Synergy/Match Spike Connections
            if (isSpike && matchedNodes.length === 2) {
                const n1 = matchedNodes[0];
                const n2 = matchedNodes[1];
                const x1 = cx + Math.cos(n1.angle) * n1.radius;
                const y1 = cy + Math.sin(n1.angle) * n1.radius;
                const x2 = cx + Math.cos(n2.angle) * n2.radius;
                const y2 = cy + Math.sin(n2.angle) * n2.radius;

                // Intense beams to center core
                ctx.beginPath();
                ctx.moveTo(x1, y1);
                ctx.lineTo(cx, cy);
                ctx.lineTo(x2, y2);
                ctx.lineWidth = 2.5;
                ctx.strokeStyle = `rgba(${rgbAccent}, 0.8)`;
                ctx.stroke();

                // Central flare
                ctx.beginPath();
                ctx.arc(cx, cy, 15, 0, Math.PI * 2);
                ctx.fillStyle = `rgba(${rgbAccent}, 0.2)`;
                ctx.fill();
            }

            // Draw Node Satellites
            nodes.forEach(n => {
                n.angle += n.speed;
                n.pulse += 0.05;
                const x = cx + Math.cos(n.angle) * n.radius;
                const y = cy + Math.sin(n.angle) * n.radius;
                
                const isMatched = matchedNodes.includes(n);
                const currentSize = isMatched ? n.size * 2 : n.size + Math.sin(n.pulse) * 0.8;

                ctx.beginPath();
                ctx.arc(x, y, currentSize, 0, Math.PI * 2);
                ctx.fillStyle = isMatched ? `rgb(${rgbAccent})` : `rgba(${rgbAccent}, 0.6)`;
                
                if (isMatched) {
                    ctx.shadowBlur = 12;
                    ctx.shadowColor = `rgb(${rgbAccent})`;
                } else {
                    ctx.shadowBlur = 4;
                    ctx.shadowColor = `rgba(${rgbAccent}, 0.3)`;
                }
                
                ctx.fill();
                ctx.shadowBlur = 0; // Reset
            });

            rafId = requestAnimationFrame(fp_coaching_mentoring_ai_neural_sync_ui_loop);
        }

        rafId = requestAnimationFrame(fp_coaching_mentoring_ai_neural_sync_ui_loop);
    });
})();