.fp-creative-agency-seo-score-auditor-ring-ui {
  /* Layout Variables */
  --fp-container-width: 100%;
  --fp-max-width: 500px;
  --fp-aspect-ratio: 1 / 1;

  /* Semantic Color Variables - Vantablack Monochrome */
  --fp-primary-color: #FFFFFF;       
  --fp-secondary-color: #F0F0F0;     
  --fp-text-color: #0B0B0B;          
  --fp-muted-color: #808080;         
  --fp-soft-color: rgba(11, 11, 11, 0.03); 
  --fp-background-color: transparent;

  --fp-accent-color: rgba(0, 0, 0, 0.85); 
  --fp-info-color: #262626;          
  --fp-warning-color: #525252;       
  --fp-danger-color: #000000;        

  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, Helvetica, Arial, sans-serif;
  position: relative;
}

/* Main Stage */
.fp-creative-agency-seo-score-auditor-ring-ui-stage {
  aspect-ratio: var(--fp-aspect-ratio);
  width: 100%;
  background-color: var(--fp-primary-color);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border: 1px solid var(--fp-secondary-color);
  border-radius: 24px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.04);
  box-sizing: border-box;
}

/* Minimalist Grid Pattern */
.fp-creative-agency-seo-score-auditor-ring-ui-grid {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(var(--fp-secondary-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--fp-secondary-color) 1px, transparent 1px);
  background-size: 20px 20px;
  z-index: 0;
  opacity: 0.5;
}

/* Layer 1: Base Breathing Shadow */
.fp-creative-agency-seo-score-auditor-ring-ui-breathe-layer {
  position: absolute;
  width: 60%;
  height: 60%;
  background: radial-gradient(circle, rgba(0,0,0,0.06) 0%, transparent 70%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  animation: fp-creative-agency-seo-score-auditor-ring-ui-breathe 4s ease-in-out infinite alternate;
  z-index: 1;
  pointer-events: none;
}

/* Layer 2: Rotational Scanner Ring */
.fp-creative-agency-seo-score-auditor-ring-ui-scanner {
  position: absolute;
  width: 85%;
  height: 85%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px dashed var(--fp-muted-color);
  border-radius: 50%;
  z-index: 2;
  opacity: 0.3;
  animation: fp-creative-agency-seo-score-auditor-ring-ui-spin 40s linear infinite;
  pointer-events: none;
}

.fp-creative-agency-seo-score-auditor-ring-ui-scanner::before {
  content: '';
  position: absolute;
  inset: 16px;
  border: 1px dotted var(--fp-text-color);
  border-radius: 50%;
  opacity: 0.5;
  animation: fp-creative-agency-seo-score-auditor-ring-ui-spin-reverse 30s linear infinite;
}

/* Main Glass Card */
.fp-creative-agency-seo-score-auditor-ring-ui-card {
  position: relative;
  z-index: 3;
  width: 70%;
  height: 70%;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05), inset 0 0 0 4px rgba(255, 255, 255, 0.5);
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Layer 3: Reactive Spike Class */
.fp-creative-agency-seo-score-auditor-ring-ui-card.is-auditing {
  transform: scale(1.03);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12), 0 0 0 2px var(--fp-danger-color);
  border-color: var(--fp-danger-color);
}

/* Header */
.fp-creative-agency-seo-score-auditor-ring-ui-header {
  position: absolute;
  top: 15%;
  display: flex;
  align-items: center;
  gap: 6px;
}

.fp-creative-agency-seo-score-auditor-ring-ui-status-dot {
  width: 6px;
  height: 6px;
  background-color: var(--fp-danger-color);
  border-radius: 50%;
  animation: fp-creative-agency-seo-score-auditor-ring-ui-blink 1.5s infinite;
}

.fp-creative-agency-seo-score-auditor-ring-ui-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--fp-text-color);
  text-transform: uppercase;
}

/* Center Ring Area */
.fp-creative-agency-seo-score-auditor-ring-ui-ring-wrap {
  position: relative;
  width: 55%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 5%;
}

.fp-creative-agency-seo-score-auditor-ring-ui-svg {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  overflow: visible;
}

.fp-creative-agency-seo-score-auditor-ring-ui-bg-circle {
  fill: none;
  stroke: var(--fp-secondary-color);
  stroke-width: 3;
}

.fp-creative-agency-seo-score-auditor-ring-ui-progress-circle {
  fill: none;
  stroke: var(--fp-danger-color);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 282.743;
  stroke-dashoffset: 282.743; 
  transition: stroke-dashoffset 0.1s linear;
}

.fp-creative-agency-seo-score-auditor-ring-ui-score-wrap {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: baseline;
}

.fp-creative-agency-seo-score-auditor-ring-ui-score-val {
  font-size: 4rem;
  font-weight: 800;
  color: var(--fp-text-color);
  line-height: 1;
  letter-spacing: -2px;
  font-variant-numeric: tabular-nums;
  transition: color 0.3s ease;
}

.fp-creative-agency-seo-score-auditor-ring-ui-card.is-auditing .fp-creative-agency-seo-score-auditor-ring-ui-score-val {
  color: var(--fp-danger-color);
  text-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.fp-creative-agency-seo-score-auditor-ring-ui-score-unit {
  font-size: 1rem;
  font-weight: 600;
  color: var(--fp-muted-color);
  margin-left: 2px;
}

/* Metrics Footer */
.fp-creative-agency-seo-score-auditor-ring-ui-metrics {
  position: absolute;
  bottom: 12%;
  display: flex;
  gap: 16px;
  width: 70%;
  justify-content: space-between;
}

.fp-creative-agency-seo-score-auditor-ring-ui-metric {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.fp-creative-agency-seo-score-auditor-ring-ui-metric-lbl {
  font-size: 9px;
  font-weight: 700;
  color: var(--fp-muted-color);
  letter-spacing: 1px;
  margin-bottom: 2px;
}

.fp-creative-agency-seo-score-auditor-ring-ui-metric-val {
  font-size: 12px;
  font-weight: 700;
  color: var(--fp-text-color);
  font-family: 'Courier New', Courier, monospace;
}

/* Keyframes */
@keyframes fp-creative-agency-seo-score-auditor-ring-ui-breathe {
  0% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.5; }
  100% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
}

@keyframes fp-creative-agency-seo-score-auditor-ring-ui-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes fp-creative-agency-seo-score-auditor-ring-ui-spin-reverse {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}

@keyframes fp-creative-agency-seo-score-auditor-ring-ui-blink {
  0%, 100% { opacity: 1; box-shadow: 0 0 6px var(--fp-danger-color); }
  50% { opacity: 0.3; box-shadow: none; }
}

/* Responsive */
@media (max-width: 480px) {
  .fp-creative-agency-seo-score-auditor-ring-ui-card {
    width: 85%;
    height: 85%;
  }
  .fp-creative-agency-seo-score-auditor-ring-ui-score-val {
    font-size: 3rem;
  }
  .fp-creative-agency-seo-score-auditor-ring-ui-metrics {
    width: 80%;
  }
}

document.querySelectorAll('.fp-creative-agency-seo-score-auditor-ring-ui').forEach(root => {
  const progressCircle = root.querySelector('#fp-creative-agency-seo-score-auditor-ring-ui-progress');
  const scoreVal = root.querySelector('#fp-creative-agency-seo-score-auditor-ring-ui-val');
  const cardEl = root.querySelector('#fp-creative-agency-seo-score-auditor-ring-ui-card');
  
  const metricLCP = root.querySelector('#fp-metric-lcp');
  const metricFID = root.querySelector('#fp-metric-fid');
  const metricCLS = root.querySelector('#fp-metric-cls');

  let reqId;
  let isVisible = true;
  let lastTime = 0;
  
  // Animation State
  let currentScore = 0;
  let targetScore = 98;
  const circumference = 2 * Math.PI * 45; // ~282.743
  
  let auditTimer = 0;
  let isSpiking = false;

  function updateMetrics() {
    if (currentScore > 90) {
      if (metricLCP) metricLCP.textContent = (0.6 + Math.random() * 0.2).toFixed(1) + 's';
      if (metricFID) metricFID.textContent = Math.floor(8 + Math.random() * 6) + 'ms';
      if (metricCLS) metricCLS.textContent = '0.0' + Math.floor(1 + Math.random() * 3);
    } else {
      if (metricLCP) metricLCP.textContent = (1.2 + Math.random() * 0.5).toFixed(1) + 's';
      if (metricFID) metricFID.textContent = Math.floor(20 + Math.random() * 20) + 'ms';
      if (metricCLS) metricCLS.textContent = '0.0' + Math.floor(4 + Math.random() * 5);
    }
  }

  function animate(time) {
    if (!lastTime) lastTime = time;
    const dt = time - lastTime;
    lastTime = time;

    auditTimer += dt;

    if (auditTimer > 3000) {
      auditTimer = 0;
      if (currentScore > 90) {
        targetScore = 94 + Math.random() * 6;
        
        isSpiking = true;
        if (cardEl) {
          cardEl.classList.add('is-auditing');
          updateMetrics();
        }
      }
    }

    if (isSpiking && auditTimer > 400) {
      isSpiking = false;
      if (cardEl) {
        cardEl.classList.remove('is-auditing');
      }
    }

    currentScore += (targetScore - currentScore) * 0.08;

    if (scoreVal) {
      scoreVal.textContent = Math.round(currentScore);
    }

    if (progressCircle) {
      const offset = circumference - (currentScore / 100) * circumference;
      progressCircle.style.strokeDashoffset = offset;
    }

    if (isVisible) {
      reqId = requestAnimationFrame(animate);
    }
  }

  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      isVisible = entry.isIntersecting;
      if (isVisible) {
        lastTime = performance.now();
        if (!reqId) reqId = requestAnimationFrame(animate);
      } else {
        if (reqId) {
          cancelAnimationFrame(reqId);
          reqId = null;
        }
      }
    });
  });
  observer.observe(root);

  const handleVisibilityChange = () => {
    if (document.visibilityState === "hidden") {
      isVisible = false;
      if (reqId) {
        cancelAnimationFrame(reqId);
        reqId = null;
      }
    } else {
      isVisible = true;
      lastTime = performance.now();
      if (!reqId) reqId = requestAnimationFrame(animate);
    }
  };
  document.addEventListener("visibilitychange", handleVisibilityChange);

  const cleanupInterval = setInterval(() => {
    if (!document.body.contains(root)) {
      if (reqId) cancelAnimationFrame(reqId);
      observer.disconnect();
      document.removeEventListener("visibilitychange", handleVisibilityChange);
      clearInterval(cleanupInterval);
    }
  }, 1000);

});