.fp-market-research-seo-auditor-ring-ui {
    /* Layout & Sizing */
    --fp-container-width: 100%;
    --fp-max-width: 500px;
    --fp-aspect-ratio: 1 / 1;

    /* Semantic Color System */
    --fp-primary-color: #F2F2F2; /* Abu Terang */
    --fp-secondary-color: #E5E5E5;
    --fp-muted-color: #666666;
    --fp-soft-color: #000000; /* Hitam */
    --fp-background-color: transparent;

    --fp-info-color: #DFFF00; /* Lime Energy / Kuning Stabilo */
    --fp-warning-color: #DFFF00;
    --fp-danger-color: #DFFF00;
    --fp-accent-color: #DFFF00;

    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);
}

.fp-market-research-seo-auditor-ring-ui-stage {
    width: 100%;
    aspect-ratio: var(--fp-aspect-ratio);
    background-color: var(--fp-primary-color);
    overflow: hidden;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(12, 1fr);
    position: relative;
    border: 1px solid var(--fp-secondary-color);
    /* Layer 1: Subtle breathing */
    animation: fp-market-research-seo-auditor-ring-ui-breathe 8s ease-in-out infinite;
}

@keyframes fp-market-research-seo-auditor-ring-ui-breathe {
    0%, 100% { transform: scale(1); background-color: var(--fp-primary-color); }
    50% { transform: scale(0.995); background-color: #FAFAFA; }
}

.fp-market-research-seo-auditor-ring-ui-grid-line {
    position: absolute;
    background-color: var(--fp-secondary-color);
    opacity: 0.6;
    z-index: 1;
}

.fp-market-research-seo-auditor-ring-ui-h-line { width: 100%; height: 1px; left: 0; }
.fp-market-research-seo-auditor-ring-ui-v-line { height: 100%; width: 1px; top: 0; }

.fp-market-research-seo-auditor-ring-ui-content {
    grid-column: 2 / 12;
    grid-row: 2 / 12;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.fp-market-research-seo-auditor-ring-ui-ring-container {
    position: relative;
    width: 75%;
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Layer 2: Progress Ring */
.fp-market-research-seo-auditor-ring-ui-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.fp-market-research-seo-auditor-ring-ui-circle-bg {
    fill: none;
    stroke: var(--fp-secondary-color);
    stroke-width: 1.5;
}

.fp-market-research-seo-auditor-ring-ui-circle-prog {
    fill: none;
    stroke: var(--fp-accent-color);
    stroke-width: 8;
    stroke-linecap: square;
    stroke-dasharray: 282.7;
    stroke-dashoffset: 282.7;
}

.fp-market-research-seo-auditor-ring-ui-score {
    position: absolute;
    font-family: 'Inter', 'Helvetica', sans-serif;
    font-weight: 900;
    font-size: clamp(2.5rem, 10vw, 4.5rem);
    color: var(--fp-soft-color);
    font-variant-numeric: tabular-nums;
}

.fp-market-research-seo-auditor-ring-ui-label {
    grid-column: 2 / 7;
    grid-row: 2 / 3;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: var(--fp-muted-color);
    align-self: start;
    z-index: 3;
}

.fp-market-research-seo-auditor-ring-ui-meta {
    grid-column: 7 / 12;
    grid-row: 11 / 12;
    font-size: 9px;
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--fp-soft-color);
    text-align: right;
    border-top: 1.5px solid var(--fp-soft-color);
    padding-top: 6px;
    font-weight: 600;
    z-index: 3;
}

/* Layer 3: Reactive Spike */
.fp-market-research-seo-auditor-ring-ui-spike {
    position: absolute;
    width: 110%;
    height: 110%;
    border: 1px solid var(--fp-accent-color);
    opacity: 0;
    pointer-events: none;
    z-index: 0;
}

@keyframes fp-market-research-seo-auditor-ring-ui-flash {
    0% { opacity: 1; transform: scale(0.9); }
    100% { opacity: 0; transform: scale(1.15); }
}

@media (max-width: 768px) {
    .fp-market-research-seo-auditor-ring-ui-label { grid-column: 2 / 12; font-size: 9px; }
    .fp-market-research-seo-auditor-ring-ui-meta { grid-column: 2 / 12; text-align: left; grid-row: 11 / 12; }
}

/**
 * Market Research Auditor Ring Animation Engine
 * Phase 2 - Developer Mode (Instance Safe)
 */
(function() {
    const fp_market_research_seo_auditor_ring_ui_init_ = () => {
        const components = document.querySelectorAll('.fp-market-research-seo-auditor-ring-ui');

        components.forEach(root => {
            if (root.dataset.fpInitialized) return;
            root.dataset.fpInitialized = "true";

            const progressCircle = root.querySelector('.fp-market-research-seo-auditor-ring-ui-circle-prog');
            const scoreDisplay = root.querySelector('.fp-market-research-seo-auditor-ring-ui-val');
            const spike = root.querySelector('.fp-market-research-seo-auditor-ring-ui-spike');
            
            const radius = 45;
            const circumference = 2 * Math.PI * radius;
            let currentScore = 0;
            let targetScore = 82;
            let animationFrame;
            let lastUpdate = 0;
            let isVisible = true;

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

            // Layer 3 JS Animation Loop
            const animate = (timestamp) => {
                // Garbage Collection Check
                if (!document.body.contains(root)) {
                    observer.disconnect();
                    cancelAnimationFrame(animationFrame);
                    return;
                }

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

                // Throttle updates for performance & swiss precision feel
                if (timestamp - lastUpdate > 16) {
                    if (currentScore < targetScore) {
                        // Rapid initial draw
                        currentScore += (targetScore - currentScore) * 0.05 + 0.1;
                    } else {
                        // High-precision jitter/breathing on score
                        currentScore = targetScore + (Math.sin(timestamp / 400) * 0.8);
                        
                        // Random Reactive Spike (Digital Noise)
                        if (Math.random() > 0.992) {
                            spike.style.animation = 'none';
                            void spike.offsetWidth; 
                            spike.style.animation = 'fp-market-research-seo-auditor-ring-ui-flash 0.5s cubic-bezier(0.19, 1, 0.22, 1) forwards';
                        }
                    }

                    // Update UI
                    const offset = circumference - (currentScore / 100) * circumference;
                    progressCircle.style.strokeDashoffset = offset;
                    scoreDisplay.innerText = Math.floor(currentScore);
                    
                    lastUpdate = timestamp;
                }

                animationFrame = requestAnimationFrame(animate);
            };

            animationFrame = requestAnimationFrame(animate);
        });
    };

    // Run on Load
    if (document.readyState === 'complete') {
        fp_market_research_seo_auditor_ring_ui_init_();
    } else {
        window.addEventListener('load', fp_market_research_seo_auditor_ring_ui_init_);
    }
})();