.fp-crowdfunding-campaign-backer-viral-counter-ui {
  /* Layout Variables */
  --fp-container-width: 100%;
  --fp-max-width: 500px;
  --fp-aspect-ratio: 1 / 1;

  /* Semantic Color Variables - Pine Data-Driven */
  --fp-primary-color: #FFFFFF;       
  --fp-secondary-color: #E2E8F0;     
  --fp-text-color: #064E3B;          
  --fp-muted-color: #475569;         
  --fp-soft-color: #ECFDF5;          
  --fp-background-color: transparent;

  --fp-accent-color: #10B981;        
  --fp-info-color: #059669;          
  --fp-warning-color: #F59E0B;       
  --fp-danger-color: #EF4444;        

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

/* Main Stage */
.fp-crowdfunding-campaign-backer-viral-counter-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);
  box-sizing: border-box;
}

/* Layer 1: Subtle Base Breathing (Data Pulse) */
.fp-crowdfunding-campaign-backer-viral-counter-ui-l1-breathe {
  position: absolute;
  width: 120%;
  aspect-ratio: 1 / 1;
  background: radial-gradient(circle, var(--fp-soft-color) 0%, transparent 60%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: fp-crowdfunding-campaign-backer-viral-counter-ui-breathe 4s ease-in-out infinite alternate;
  z-index: 1;
  pointer-events: none;
}

/* Layer 2: Rotational Radial Motion (Data Processing Ring) */
.fp-crowdfunding-campaign-backer-viral-counter-ui-l2-rotate {
  position: absolute;
  width: 85%;
  aspect-ratio: 1 / 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px dashed var(--fp-muted-color);
  border-radius: 50%;
  opacity: 0.2;
  z-index: 2;
  animation: fp-crowdfunding-campaign-backer-viral-counter-ui-spin 30s linear infinite;
  pointer-events: none;
}

.fp-crowdfunding-campaign-backer-viral-counter-ui-l2-rotate::before {
  content: '';
  position: absolute;
  inset: -10px;
  border: 2px dotted var(--fp-accent-color);
  border-radius: 50%;
  opacity: 0.3;
  animation: fp-crowdfunding-campaign-backer-viral-counter-ui-spin-reverse 20s linear infinite;
}

/* Main Content Card (Flat Design) */
.fp-crowdfunding-campaign-backer-viral-counter-ui-card {
  position: relative;
  z-index: 3;
  width: 75%;
  background-color: var(--fp-primary-color);
  border: 2px solid var(--fp-text-color);
  padding: 32px 24px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  box-shadow: 8px 8px 0px rgba(6, 78, 59, 0.1);
  transition: box-shadow 0.1s ease, transform 0.1s ease, border-color 0.1s ease;
  overflow: hidden;
}

/* Layer 3: Reactive Spike State */
.fp-crowdfunding-campaign-backer-viral-counter-ui-card.is-spiking {
  transform: translate(2px, 2px);
  box-shadow: 4px 4px 0px rgba(16, 185, 129, 0.3);
  border-color: var(--fp-accent-color);
}

.fp-crowdfunding-campaign-backer-viral-counter-ui-card.is-spiking .fp-crowdfunding-campaign-backer-viral-counter-ui-flash {
  opacity: 1;
}

/* Inner flash for spike */
.fp-crowdfunding-campaign-backer-viral-counter-ui-flash {
  position: absolute;
  inset: 0;
  background: var(--fp-accent-color);
  opacity: 0;
  z-index: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-out;
  mix-blend-mode: multiply;
}

/* Header */
.fp-crowdfunding-campaign-backer-viral-counter-ui-header {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--fp-secondary-color);
}

.fp-crowdfunding-campaign-backer-viral-counter-ui-badge {
  font-size: 10px;
  font-weight: 800;
  color: var(--fp-primary-color);
  background-color: var(--fp-text-color);
  padding: 4px 8px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.fp-crowdfunding-campaign-backer-viral-counter-ui-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  color: var(--fp-info-color);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.fp-crowdfunding-campaign-backer-viral-counter-ui-dot {
  width: 8px;
  height: 8px;
  background-color: var(--fp-accent-color);
  border-radius: 50%;
  animation: fp-crowdfunding-campaign-backer-viral-counter-ui-pulse 1s infinite;
}

/* Counters */
.fp-crowdfunding-campaign-backer-viral-counter-ui-data-group {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  margin-bottom: 24px;
}

.fp-crowdfunding-campaign-backer-viral-counter-ui-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--fp-muted-color);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
}

.fp-crowdfunding-campaign-backer-viral-counter-ui-ticker {
  font-size: 3.5rem;
  font-weight: 900;
  color: var(--fp-text-color);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -1px;
  display: flex;
  align-items: baseline;
}

.fp-crowdfunding-campaign-backer-viral-counter-ui-funds {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--fp-info-color);
  font-variant-numeric: tabular-nums;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--fp-secondary-color);
}

/* Progress Bar */
.fp-crowdfunding-campaign-backer-viral-counter-ui-progress-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 6px;
  background-color: var(--fp-secondary-color);
  overflow: hidden;
}

.fp-crowdfunding-campaign-backer-viral-counter-ui-progress-fill {
  height: 100%;
  background-color: var(--fp-accent-color);
  width: 65%; 
  transition: width 0.2s ease-out;
}

/* Toast Notification (Data-driven alert) */
.fp-crowdfunding-campaign-backer-viral-counter-ui-toast {
  position: absolute;
  bottom: 24px;
  right: 24px;
  background-color: var(--fp-text-color);
  color: var(--fp-primary-color);
  font-size: 10px;
  font-weight: 700;
  padding: 6px 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  z-index: 4;
  transform: translateY(150%);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease;
}

.fp-crowdfunding-campaign-backer-viral-counter-ui-toast.is-visible {
  transform: translateY(0);
  opacity: 1;
}

/* Keyframes */
@keyframes fp-crowdfunding-campaign-backer-viral-counter-ui-breathe {
  0% { transform: translate(-50%, -50%) scale(0.95); opacity: 0.4; }
  100% { transform: translate(-50%, -50%) scale(1.05); opacity: 0.8; }
}

@keyframes fp-crowdfunding-campaign-backer-viral-counter-ui-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes fp-crowdfunding-campaign-backer-viral-counter-ui-spin-reverse {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}

@keyframes fp-crowdfunding-campaign-backer-viral-counter-ui-pulse {
  0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
  70% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* Responsive */
@media (max-width: 480px) {
  .fp-crowdfunding-campaign-backer-viral-counter-ui-card {
    width: 85%;
    padding: 24px 16px;
  }
  .fp-crowdfunding-campaign-backer-viral-counter-ui-ticker {
    font-size: 2.8rem;
  }
  .fp-crowdfunding-campaign-backer-viral-counter-ui-funds {
    font-size: 1.2rem;
  }
  .fp-crowdfunding-campaign-backer-viral-counter-ui-toast {
    bottom: 16px;
    right: 16px;
  }
}

document.querySelectorAll('.fp-crowdfunding-campaign-backer-viral-counter-ui').forEach(root => {
  const backersEl = root.querySelector('#fp-crowdfunding-campaign-backer-viral-counter-ui-backers');
  const fundsEl = root.querySelector('#fp-crowdfunding-campaign-backer-viral-counter-ui-funds');
  const cardEl = root.querySelector('#fp-crowdfunding-campaign-backer-viral-counter-ui-card');
  const toastEl = root.querySelector('#fp-crowdfunding-campaign-backer-viral-counter-ui-toast');
  const progressEl = root.querySelector('#fp-crowdfunding-campaign-backer-viral-counter-ui-progress');

  let reqId;
  let isVisible = true;
  let lastTime = 0;
  
  let currentBackers = 14204.0;
  let targetBackers = 14204;
  
  let currentFunds = 8450200.0;
  let targetFunds = 8450200;

  let spikeTimer = 0;
  let toastTimer = 0;
  let isToasting = false;

  const FUND_GOAL = 10000000;

  const formatNum = (num) => {
    return Math.floor(num).toLocaleString('en-US');
  };

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

    spikeTimer += dt;
    
    if (spikeTimer > (1500 + Math.random() * 1500)) {
      spikeTimer = 0;
      
      const newBackersCount = Math.floor(1 + Math.random() * 4);
      targetBackers += newBackersCount;
      targetFunds += newBackersCount * (300 + Math.random() * 700);

      if (cardEl) {
        cardEl.classList.add('is-spiking');
        setTimeout(() => {
          if (isVisible && cardEl) cardEl.classList.remove('is-spiking');
        }, 100); 
      }

      if (toastEl && !isToasting) {
        isToasting = true;
        toastEl.textContent = `+${newBackersCount} NEW BACKER${newBackersCount > 1 ? 'S' : ''}`;
        toastEl.classList.add('is-visible');
        toastTimer = 1500; 
      }
    }

    if (isToasting) {
      toastTimer -= dt;
      if (toastTimer <= 0) {
        isToasting = false;
        if (toastEl) toastEl.classList.remove('is-visible');
      }
    }

    currentBackers += (targetBackers - currentBackers) * 0.15;
    currentFunds += (targetFunds - currentFunds) * 0.15;

    if (backersEl) backersEl.textContent = formatNum(currentBackers);
    if (fundsEl) fundsEl.textContent = "$" + formatNum(currentFunds);

    if (progressEl) {
      const pct = Math.min((currentFunds / FUND_GOAL) * 100, 100);
      progressEl.style.width = `${pct}%`;
    }

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

});