.fp-non-profit-ngo-otp-code-input-ui {
  /* Layout Variables */
  --fp-container-width: 100%;
  --fp-max-width: 500px;
  --fp-aspect-ratio: 1 / 1;

  /* Semantic Color Variables - Matcha Organic */
  --fp-primary-color: #FDFBF7;       /* Krem Terang (Light Cream) */
  --fp-secondary-color: #EFECE5;     /* Soft Taupe/Cream Border */
  --fp-text-color: #2B4234;          /* Hijau Tua (Dark Forest Green) */
  --fp-muted-color: #7A8F82;         /* Muted Sage */
  --fp-soft-color: rgba(140, 168, 112, 0.15); /* Soft Matcha Wash */
  --fp-background-color: transparent;

  --fp-accent-color: #8CA870;        /* Hijau Matcha (Matcha Green) */
  --fp-info-color: #A9C28F;          /* Light Matcha */
  --fp-warning-color: #D4A373;       /* Earthy Sand */
  --fp-danger-color: #C87971;        /* Soft Clay Red */

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

/* Main Stage */
.fp-non-profit-ngo-otp-code-input-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-radius: 32px;
  box-shadow: inset 0 0 40px rgba(43, 66, 52, 0.03);
  border: 1px solid var(--fp-secondary-color);
  box-sizing: border-box;
}

/* Layer 1: Base Breathing Organic Blob */
.fp-non-profit-ngo-otp-code-input-ui-blob {
  position: absolute;
  width: 90%;
  aspect-ratio: 1 / 1;
  background: radial-gradient(circle at center, var(--fp-soft-color) 0%, transparent 65%);
  border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
  animation: fp-non-profit-ngo-otp-code-input-ui-breathe 10s ease-in-out infinite alternate;
  z-index: 1;
  pointer-events: none;
}

/* Main Card Panel */
.fp-non-profit-ngo-otp-code-input-ui-panel {
  position: relative;
  z-index: 3;
  width: 80%;
  max-width: 360px;
  background: #FFFFFF;
  border-radius: 28px;
  padding: 40px 24px;
  box-shadow: 0 20px 40px rgba(43, 66, 52, 0.06), 0 1px 3px rgba(43, 66, 52, 0.02);
  border: 1px solid rgba(140, 168, 112, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-sizing: border-box;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;
}

/* Target for JS Reactive Spike on Success */
.fp-non-profit-ngo-otp-code-input-ui-panel.is-verified {
  transform: scale(1.02);
  box-shadow: 0 25px 50px rgba(140, 168, 112, 0.15), 0 0 0 2px var(--fp-accent-color);
}

/* Icon Header */
.fp-non-profit-ngo-otp-code-input-ui-icon-wrap {
  width: 56px;
  height: 56px;
  background-color: var(--fp-primary-color);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  color: var(--fp-accent-color);
  box-shadow: inset 0 0 0 1px var(--fp-secondary-color);
}

.fp-non-profit-ngo-otp-code-input-ui-icon-wrap svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Typography */
.fp-non-profit-ngo-otp-code-input-ui-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--fp-text-color);
  margin: 0 0 8px 0;
  letter-spacing: -0.5px;
}

.fp-non-profit-ngo-otp-code-input-ui-subtitle {
  font-size: 0.85rem;
  color: var(--fp-muted-color);
  margin: 0 0 32px 0;
  line-height: 1.4;
}

/* OTP Input Area */
.fp-non-profit-ngo-otp-code-input-ui-inputs-wrapper {
  position: relative;
  display: flex;
  gap: 12px;
  margin-bottom: 32px;
  justify-content: center;
  width: 100%;
}

/* Layer 2: Expanding Rings Tracker */
.fp-non-profit-ngo-otp-code-input-ui-tracker {
  position: absolute;
  top: 50%;
  left: 0; /* JS will update this */
  width: 50px; /* Matches cell width */
  height: 56px; /* Matches cell height */
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 0;
  transition: left 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.fp-non-profit-ngo-otp-code-input-ui-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 18px;
  border: 2px solid var(--fp-accent-color);
  opacity: 0;
}

/* Continuous idle breathing ring */
.fp-non-profit-ngo-otp-code-input-ui-ring-idle {
  width: 100%;
  height: 100%;
  animation: fp-non-profit-ngo-otp-code-input-ui-ring-pulse 3s cubic-bezier(0.215, 0.610, 0.355, 1) infinite;
}

/* JS triggered spike ring */
.fp-non-profit-ngo-otp-code-input-ui-ring-spike {
  width: 100%;
  height: 100%;
  border-width: 3px;
  border-color: var(--fp-info-color);
  transition: transform 0.4s ease-out, opacity 0.4s ease-out;
}

.fp-non-profit-ngo-otp-code-input-ui-tracker.is-spiking .fp-non-profit-ngo-otp-code-input-ui-ring-spike {
  transform: translate(-50%, -50%) scale(1.6);
  opacity: 0;
}

/* Individual Input Cells */
.fp-non-profit-ngo-otp-code-input-ui-cell {
  position: relative;
  z-index: 1;
  width: 50px;
  height: 56px;
  background-color: var(--fp-primary-color);
  border: 2px solid var(--fp-secondary-color);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--fp-text-color);
  transition: border-color 0.3s, background-color 0.3s, transform 0.2s;
}

.fp-non-profit-ngo-otp-code-input-ui-cell.is-active {
  border-color: var(--fp-accent-color);
  background-color: #FFFFFF;
  transform: translateY(-2px);
}

.fp-non-profit-ngo-otp-code-input-ui-cell.is-filled {
  border-color: var(--fp-info-color);
  background-color: rgba(169, 194, 143, 0.05);
}

.fp-non-profit-ngo-otp-code-input-ui-cell.is-verified {
  border-color: var(--fp-accent-color);
  background-color: var(--fp-accent-color);
  color: #FFFFFF;
}

/* Cursor */
.fp-non-profit-ngo-otp-code-input-ui-cursor {
  width: 2px;
  height: 24px;
  background-color: var(--fp-accent-color);
  animation: fp-non-profit-ngo-otp-code-input-ui-blink 1s step-end infinite;
  display: none;
}

.fp-non-profit-ngo-otp-code-input-ui-cell.is-active .fp-non-profit-ngo-otp-code-input-ui-cursor {
  display: block;
}

.fp-non-profit-ngo-otp-code-input-ui-cell.is-active.has-val .fp-non-profit-ngo-otp-code-input-ui-cursor {
  display: none;
}

/* Footer Resend */
.fp-non-profit-ngo-otp-code-input-ui-footer {
  font-size: 0.8rem;
  color: var(--fp-muted-color);
  font-weight: 500;
}

.fp-non-profit-ngo-otp-code-input-ui-timer {
  color: var(--fp-text-color);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Animations */
@keyframes fp-non-profit-ngo-otp-code-input-ui-breathe {
  0% { transform: scale(0.9) rotate(0deg); opacity: 0.5; }
  100% { transform: scale(1.1) rotate(10deg); opacity: 0.8; }
}

@keyframes fp-non-profit-ngo-otp-code-input-ui-ring-pulse {
  0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0; }
  20% { opacity: 0.5; }
  100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
}

@keyframes fp-non-profit-ngo-otp-code-input-ui-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* Responsive */
@media (max-width: 480px) {
  .fp-non-profit-ngo-otp-code-input-ui-panel {
    width: 90%;
    padding: 32px 16px;
  }
  .fp-non-profit-ngo-otp-code-input-ui-cell {
    width: 44px;
    height: 50px;
    font-size: 1.25rem;
  }
  .fp-non-profit-ngo-otp-code-input-ui-tracker {
    width: 44px;
    height: 50px;
  }
}

document.querySelectorAll('.fp-non-profit-ngo-otp-code-input-ui').forEach(root => {
  const cells = root.querySelectorAll('.fp-non-profit-ngo-otp-code-input-ui-cell');
  const tracker = root.querySelector('#fp-ngo-otp-tracker');
  const spikeRing = root.querySelector('#fp-ngo-otp-spike');
  const wrapper = root.querySelector('#fp-ngo-otp-wrapper');
  const panel = root.querySelector('#fp-ngo-otp-panel');
  const footerEl = root.querySelector('#fp-ngo-otp-footer');

  let reqId;
  let isVisible = true;
  let lastTime = 0;
  
  let stateTimer = 0;
  let currentIndex = 0;
  let mockCode = ['4', '7', '2', '9'];
  let isSimulating = true;
  let countdown = 30;
  let countdownTimer = 0;

  function updateTrackerPosition() {
    if (!cells[currentIndex] || !tracker || !wrapper) return;
    const cellRect = cells[currentIndex].getBoundingClientRect();
    const wrapRect = wrapper.getBoundingClientRect();
    const relativeLeft = cellRect.left - wrapRect.left;
    tracker.style.left = `${relativeLeft}px`;
  }

  setTimeout(updateTrackerPosition, 50);

  function triggerSpike() {
    if (!tracker || !spikeRing) return;
    
    spikeRing.style.transition = 'none';
    spikeRing.style.transform = 'translate(-50%, -50%) scale(0.8)';
    spikeRing.style.opacity = '1';
    tracker.classList.remove('is-spiking');
    
    void spikeRing.offsetWidth;
    
    spikeRing.style.transition = 'transform 0.4s ease-out, opacity 0.4s ease-out';
    tracker.classList.add('is-spiking');
  }

  function resetSimulation() {
    currentIndex = 0;
    cells.forEach(c => {
      c.className = 'fp-non-profit-ngo-otp-code-input-ui-cell';
      const valEl = c.querySelector('.val');
      if (valEl) valEl.textContent = '';
    });
    if (cells[0]) cells[0].classList.add('is-active');
    if (panel) panel.classList.remove('is-verified');
    if (footerEl) footerEl.innerHTML = `Resend code in <span class="fp-non-profit-ngo-otp-code-input-ui-timer" id="fp-ngo-otp-timer">00:30</span>`;
    if (tracker) tracker.style.opacity = '1';
    countdown = 30;
    updateTrackerPosition();
    isSimulating = true;
    stateTimer = -1000; 
  }

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

    stateTimer += dt;
    countdownTimer += dt;

    if (countdownTimer > 1000 && countdown > 0) {
        countdown--;
        countdownTimer = 0;
        const tEl = root.querySelector('#fp-ngo-otp-timer');
        if (tEl) {
            tEl.textContent = `00:${countdown.toString().padStart(2, '0')}`;
        }
    }

    if (isSimulating && stateTimer > 800) { 
      stateTimer = 0;

      if (currentIndex < cells.length) {
        const currentCell = cells[currentIndex];
        const valEl = currentCell.querySelector('.val');
        if (valEl) valEl.textContent = mockCode[currentIndex];
        currentCell.classList.add('has-val', 'is-filled');
        
        triggerSpike();

        currentCell.classList.remove('is-active');
        currentIndex++;

        if (currentIndex < cells.length) {
          cells[currentIndex].classList.add('is-active');
          updateTrackerPosition();
        } else {
          isSimulating = false;
          if (tracker) tracker.style.opacity = '0'; 
          
          setTimeout(() => {
            if(!isVisible) return;
            cells.forEach(c => c.classList.add('is-verified'));
            if (panel) panel.classList.add('is-verified');
            if (footerEl) footerEl.innerHTML = `<span style="color: var(--fp-accent-color); font-weight: bold;">✓ Verification Successful</span>`;
            
            setTimeout(() => {
              if(isVisible) resetSimulation();
            }, 3000);
          }, 500);
        }
      }
    }

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

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

  let resizeObserver;
  if (wrapper) {
    resizeObserver = new ResizeObserver(() => {
        if(isVisible && currentIndex < cells.length) {
            updateTrackerPosition();
        }
    });
    resizeObserver.observe(wrapper);
  }

  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();
      if (resizeObserver) resizeObserver.disconnect();
      document.removeEventListener("visibilitychange", handleVisibilityChange);
      clearInterval(cleanupInterval);
    }
  }, 1000);
});