.fp-ngo-donation-captcha-resolve-ui {
  /* Layout Variables */
  --fp-container-width: 100%;
  --fp-max-width: 500px;
  --fp-aspect-ratio: 1 / 1;

  /* Semantic Color Variables */
  /* Background: Putih Gading (Ivory White) */
  --fp-primary-color: #FDFCF0;
  /* Text: Hitam (Black) */
  --fp-text-color: #1A1A1A; 
  /* Secondary: Subtle off-white for elements */
  --fp-secondary-color: #EFECE1;
  /* Tone: Ruby Luxury / Eco Muted */
  --fp-muted-color: #A89F91;
  --fp-soft-color: #F6EBEB;
  --fp-background-color: transparent;

  /* Concept PRO Aksen: Merah Delima (Ruby Red) */
  --fp-accent-color: #9B111E;
  --fp-info-color: #D46A73;
  --fp-warning-color: #D98859;
  --fp-danger-color: #E0115F;

  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, sans-serif;
}

.fp-ngo-donation-captcha-resolve-ui-stage {
  aspect-ratio: var(--fp-aspect-ratio);
  width: 100%;
  background-color: var(--fp-background-color);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5%;
  box-sizing: border-box;
}

.fp-ngo-donation-captcha-resolve-ui-card {
  width: 100%;
  height: 100%;
  background-color: var(--fp-primary-color);
  border-radius: 40px; 
  box-shadow: 0 20px 40px rgba(0,0,0,0.05), inset 0 0 0 2px var(--fp-secondary-color);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 2rem;
  box-sizing: border-box;
  gap: 2rem;
}

.fp-ngo-donation-captcha-resolve-ui-header {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--fp-text-color);
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
  z-index: 2;
}

.fp-ngo-donation-captcha-resolve-ui-scanner {
  position: relative;
  width: 50%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Layer 2: Rotational Motion */
.fp-ngo-donation-captcha-resolve-ui-ring {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 2px dashed var(--fp-muted-color);
  border-radius: 50%;
  animation: fp-ngo-donation-captcha-resolve-ui-spin 12s linear infinite;
  opacity: 0.5;
}

.fp-ngo-donation-captcha-resolve-ui-ring-inner {
  position: absolute;
  width: 75%;
  height: 75%;
  border: 2px dotted var(--fp-accent-color);
  border-radius: 50%;
  animation: fp-ngo-donation-captcha-resolve-ui-spin-reverse 8s linear infinite;
  opacity: 0.3;
}

/* Layer 1: Subtle base breathing - Organic Core */
.fp-ngo-donation-captcha-resolve-ui-core {
  position: relative;
  width: 35%;
  height: 35%;
  background-color: var(--fp-soft-color);
  border-radius: 50% 0 50% 50%;
  transform: rotate(-45deg);
  box-shadow: 0 0 20px var(--fp-soft-color);
  animation: fp-ngo-donation-captcha-resolve-ui-breathe 3s ease-in-out infinite alternate;
  z-index: 2;
}

.fp-ngo-donation-captcha-resolve-ui-core::after {
  content: '';
  position: absolute;
  top: 25%;
  left: 25%;
  width: 50%;
  height: 50%;
  background-color: var(--fp-accent-color);
  border-radius: 50% 0 50% 50%;
  opacity: 0.8;
  animation: fp-ngo-donation-captcha-resolve-ui-pulse 2s ease-in-out infinite alternate;
}

/* Container for JS Spikes */
.fp-ngo-donation-captcha-resolve-ui-nodes {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.fp-ngo-donation-captcha-resolve-ui-node {
  position: absolute;
  width: 8px;
  height: 8px;
  background-color: var(--fp-secondary-color);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}

.fp-ngo-donation-captcha-resolve-ui-status {
  font-size: 0.9rem;
  color: var(--fp-muted-color);
  font-weight: 500;
  text-align: center;
  height: 1.2em;
  z-index: 2;
}

@keyframes fp-ngo-donation-captcha-resolve-ui-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes fp-ngo-donation-captcha-resolve-ui-spin-reverse {
  0% { transform: rotate(360deg); }
  100% { transform: rotate(0deg); }
}

@keyframes fp-ngo-donation-captcha-resolve-ui-breathe {
  0% { 
    transform: rotate(-45deg) scale(0.95); 
    box-shadow: 0 0 10px var(--fp-soft-color);
  }
  100% { 
    transform: rotate(-45deg) scale(1.05); 
    box-shadow: 0 0 25px var(--fp-info-color);
  }
}

@keyframes fp-ngo-donation-captcha-resolve-ui-pulse {
  0% { transform: scale(0.8); opacity: 0.5; }
  100% { transform: scale(1.1); opacity: 1; }
}

/* Responsive */
@media (max-width: 600px) {
  .fp-ngo-donation-captcha-resolve-ui-card {
    padding: 1.5rem;
    border-radius: 24px;
  }
  .fp-ngo-donation-captcha-resolve-ui-scanner {
    width: 65%;
  }
}

document.querySelectorAll('.fp-ngo-donation-captcha-resolve-ui').forEach(root => {
  const nodesContainer = root.querySelector('.fp-ngo-donation-captcha-resolve-ui-nodes');
  const statusText = root.querySelector('.fp-ngo-donation-captcha-resolve-ui-status');
  const numNodes = 12;
  const nodes = [];
  const radius = 45; 

  if (nodesContainer) {
    for (let i = 0; i < numNodes; i++) {
      const node = document.createElement('div');
      node.className = 'fp-ngo-donation-captcha-resolve-ui-node';
      const angle = (i / numNodes) * Math.PI * 2;
      
      const x = Math.cos(angle) * radius;
      const y = Math.sin(angle) * radius;
      
      node.style.left = `calc(50% + ${x}%)`;
      node.style.top = `calc(50% + ${y}%)`;
      
      nodesContainer.appendChild(node);
      nodes.push({ element: node, angle: angle });
    }
  }

  const statuses = [
    "Analyzing intent...",
    "Scanning eco-signature...",
    "Verifying organic input...",
    "Securing donation portal...",
    "Validating human presence..."
  ];

  let reqId;
  let isVisible = true;
  let lastTextUpdate = 0;

  function animate(time) {
    if (time - lastTextUpdate > 2500) {
      if (statusText) {
        statusText.textContent = statuses[Math.floor(Math.random() * statuses.length)];
      }
      lastTextUpdate = time;
    }

    const scanSpeed = 3000;
    const currentAngle = ((time % scanSpeed) / scanSpeed) * Math.PI * 2;

    nodes.forEach(nodeData => {
      let diff = Math.abs(nodeData.angle - currentAngle);
      if (diff > Math.PI) {
        diff = (Math.PI * 2) - diff;
      }

      if (diff < 0.4) {
        nodeData.element.style.backgroundColor = 'var(--fp-accent-color)';
        nodeData.element.style.transform = 'translate(-50%, -50%) scale(1.8)';
        nodeData.element.style.boxShadow = '0 0 12px var(--fp-danger-color)';
        nodeData.element.style.zIndex = '3';
      } else {
        nodeData.element.style.backgroundColor = 'var(--fp-secondary-color)';
        nodeData.element.style.transform = 'translate(-50%, -50%) scale(1)';
        nodeData.element.style.boxShadow = 'none';
        nodeData.element.style.zIndex = '1';
      }
    });

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

  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      isVisible = entry.isIntersecting;
      if (isVisible) {
        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;
      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);
});