.fp-market-research-api-fetching-data-ui {
  /* Layout Variables */
  --fp-container-width: 100%;
  --fp-max-width: 500px;
  --fp-aspect-ratio: 1 / 1;

  /* Color System (Sapphire Minimalist) */
  --fp-primary-color: #FFFFFF;
  --fp-secondary-color: #F8FAFC;
  --fp-muted-color: #94A3B8;
  --fp-soft-color: #E2E8F0;
  --fp-background-color: transparent;

  --fp-info-color: #0F172A; /* Biru Dongker / Navy */
  --fp-warning-color: #1E3A8A; /* Deep Sapphire */
  --fp-danger-color: #2563EB; /* Sapphire Accent */
  --fp-accent-color: #0EA5E9; /* Biru Permata / Bright Sapphire */

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

.fp-market-research-api-fetching-data-ui-stage {
  position: relative;
  width: 100%;
  aspect-ratio: var(--fp-aspect-ratio);
  background-color: var(--fp-primary-color);
  border: 1px solid var(--fp-soft-color);
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.1);
}

/* Layer 1: Subtle Base Breathing */
.fp-market-research-api-fetching-data-ui-glow {
  position: absolute;
  width: 60%;
  height: 60%;
  background: radial-gradient(circle, var(--fp-secondary-color) 0%, transparent 70%);
  animation: fp-market-research-api-fetching-data-ui-breathe 6s ease-in-out infinite;
  z-index: 0;
}

/* Layer 2: Rotational Grid */
.fp-market-research-api-fetching-data-ui-canvas-wrap {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fp-market-research-api-fetching-data-ui-ring {
  position: absolute;
  width: 120%;
  height: 120%;
  border: 1px dashed var(--fp-soft-color);
  border-radius: 50%;
  animation: fp-market-research-api-fetching-data-ui-rotate 40s linear infinite;
  opacity: 0.5;
}

.fp-market-research-api-fetching-data-ui-content {
  position: relative;
  z-index: 10;
  text-align: center;
  width: 80%;
  pointer-events: none;
}

.fp-market-research-api-fetching-data-ui-title {
  color: var(--fp-info-color);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.fp-market-research-api-fetching-data-ui-stats {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 16px;
}

.fp-market-research-api-fetching-data-ui-metric {
  display: flex;
  flex-direction: column;
}

.fp-market-research-api-fetching-data-ui-val {
  color: var(--fp-info-color);
  font-size: 24px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.fp-market-research-api-fetching-data-ui-label {
  color: var(--fp-muted-color);
  font-size: 10px;
  font-weight: 500;
}

.fp-market-research-api-fetching-data-ui-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
}

.fp-market-research-api-fetching-data-ui-status {
  margin-top: 12px;
  padding: 4px 12px;
  background: var(--fp-secondary-color);
  border: 1px solid var(--fp-soft-color);
  border-radius: 100px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.fp-market-research-api-fetching-data-ui-dot {
  width: 6px;
  height: 6px;
  background-color: var(--fp-accent-color);
  border-radius: 50%;
  transition: background-color 0.3s ease;
}

.fp-market-research-api-fetching-data-ui-msg {
  font-size: 11px;
  color: var(--fp-info-color);
  font-weight: 500;
}

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

@keyframes fp-market-research-api-fetching-data-ui-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@media (max-width: 480px) {
  .fp-market-research-api-fetching-data-ui-val { font-size: 20px; }
  .fp-market-research-api-fetching-data-ui-title { font-size: 12px; }
}

(function() {
  const initAll = () => {
    document.querySelectorAll('.fp-market-research-api-fetching-data-ui').forEach(root => {
      if (root.dataset.initialized) return;
      root.dataset.initialized = "true";

      const canvas = root.querySelector('.fp-market-research-api-fetching-data-ui-canvas');
      const ctx = canvas.getContext('2d');
      const countEl = root.querySelector('#fp-data-count');
      const speedEl = root.querySelector('#fp-data-speed');
      const msgEl = root.querySelector('.fp-market-research-api-fetching-data-ui-msg');
      const dotEl = root.querySelector('.fp-market-research-api-fetching-data-ui-dot');

      let width, height, dpr;
      let particles = [];
      let frameId;
      let rowCount = 0;
      let targetRowCount = 0;
      let isPaused = false;

      const config = {
        particleCount: 120,
        baseSpeed: 4,
        spikeSpeed: 12,
        particleColor: '#0EA5E9',
        accentColor: '#2563EB'
      };

      const resize = () => {
        dpr = window.devicePixelRatio || 1;
        const rect = canvas.getBoundingClientRect();
        width = rect.width;
        height = rect.height;
        canvas.width = width * dpr;
        canvas.height = height * dpr;
        ctx.scale(dpr, dpr);
      };

      class Particle {
        constructor() {
          this.init();
        }
        init() {
          this.x = Math.random() * width;
          this.y = height + 20;
          this.z = Math.random() * 0.5 + 0.5;
          this.speed = (Math.random() * 2 + config.baseSpeed) * this.z;
          this.opacity = Math.random() * 0.5 + 0.2;
          this.size = this.z * 2;
        }
        update(isSpike) {
          const currentSpeed = isSpike ? this.speed * 2.5 : this.speed;
          this.y -= currentSpeed;
          if (this.y < -20) this.init();
        }
        draw(isSpike) {
          ctx.beginPath();
          ctx.fillStyle = isSpike ? config.accentColor : config.particleColor;
          ctx.globalAlpha = this.opacity;
          ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
          ctx.fill();
        }
      }

      const initParticles = () => {
        particles = [];
        for (let i = 0; i < config.particleCount; i++) {
          particles.push(new Particle());
        }
      };

      let lastTime = 0;
      let spikeTimer = 0;
      let isSpiking = false;

      const loop = (now) => {
        if (isPaused) return;
        
        ctx.clearRect(0, 0, width, height);

        const delta = now - lastTime;
        lastTime = now;
        spikeTimer += delta;

        if (spikeTimer > 4000) {
          isSpiking = true;
          msgEl.textContent = "High-Speed Batch Pull";
          dotEl.style.backgroundColor = '#2563EB';
          if (spikeTimer > 5500) {
            isSpiking = false;
            spikeTimer = 0;
            msgEl.textContent = "Stable Stream";
            dotEl.style.backgroundColor = '#0EA5E9';
          }
        }

        if (isSpiking) {
          targetRowCount += Math.floor(Math.random() * 5000);
          speedEl.textContent = (Math.random() * 5 + 42).toFixed(1);
        } else {
          targetRowCount += Math.floor(Math.random() * 800);
          speedEl.textContent = (Math.random() * 2 + 12).toFixed(1);
        }
        
        rowCount += (targetRowCount - rowCount) * 0.1;
        countEl.textContent = Math.floor(rowCount).toLocaleString();

        particles.forEach(p => {
          p.update(isSpiking);
          p.draw(isSpiking);
        });

        frameId = requestAnimationFrame(loop);
      };

      const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            isPaused = false;
            lastTime = performance.now();
            frameId = requestAnimationFrame(loop);
          } else {
            isPaused = true;
            cancelAnimationFrame(frameId);
          }
        });
      }, { threshold: 0.1 });

      resize();
      initParticles();
      observer.observe(root);
      window.addEventListener('resize', resize);

      const visibilityHandler = () => {
        isPaused = document.visibilityState === 'hidden';
      };
      document.addEventListener('visibilitychange', visibilityHandler);

      const cleanupCheck = setInterval(() => {
        if (!document.body.contains(root)) {
          cancelAnimationFrame(frameId);
          window.removeEventListener('resize', resize);
          document.removeEventListener('visibilitychange', visibilityHandler);
          observer.disconnect();
          clearInterval(cleanupCheck);
        }
      }, 2000);
    });
  };

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initAll);
  } else {
    initAll();
  }
})();