.fp-insurance-portal-otp-2fa-input-ui {
  /* Layout Variables */
  --fp-container-width: 100%;
  --fp-max-width: 500px;
  --fp-aspect-ratio: 1 / 1;

  /* Semantic Color Variables - Slate Glass (InsurTech) */
  --fp-primary-color: #FFFFFF;       /* Putih */
  --fp-secondary-color: #F8FAFC;     /* Slate 50 (Very light gray) */
  --fp-text-color: #334155;          /* Slate 700 (Hitam Pudar) */
  --fp-muted-color: #94A3B8;         /* Slate 400 */
  --fp-soft-color: rgba(100, 116, 139, 0.15); /* Soft Slate Wash */
  --fp-background-color: transparent;

  --fp-accent-color: #64748B;        /* Slate 500 (Biru Keabu-abuan) */
  --fp-info-color: #3B82F6;          /* Blue (Verification active) */
  --fp-warning-color: #F59E0B;       /* Amber */
  --fp-danger-color: #EF4444;        /* 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;
  position: relative;
}

/* Main Stage */
.fp-insurance-portal-otp-2fa-input-ui-stage {
  aspect-ratio: var(--fp-aspect-ratio);
  width: 100%;
  background-color: var(--fp-secondary-color);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: 24px;
  box-shadow: inset 0 0 40px rgba(51, 65, 85, 0.05);
  box-sizing: border-box;
}

/* Layer 1: Base Breathing Background (Shield Aura) */
.fp-insurance-portal-otp-2fa-input-ui-aura {
  position: absolute;
  width: 80%;
  height: 80%;
  background: radial-gradient(circle, rgba(100, 116, 139, 0.1) 0%, transparent 60%);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: fp-insurance-portal-otp-2fa-input-ui-breathe 6s ease-in-out infinite alternate;
  z-index: 0;
  pointer-events: none;
}

/* Layer 2: Rotational Security Grid/Ring */
.fp-insurance-portal-otp-2fa-input-ui-sec-ring {
  position: absolute;
  width: 90%;
  aspect-ratio: 1 / 1;
  border: 1px dashed var(--fp-muted-color);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.2;
  z-index: 1;
  animation: fp-insurance-portal-otp-2fa-input-ui-spin 40s linear infinite;
  pointer-events: none;
}

.fp-insurance-portal-otp-2fa-input-ui-sec-ring::before {
  content: '';
  position: absolute;
  inset: 20px;
  border: 1px dotted var(--fp-accent-color);
  border-radius: 50%;
  animation: fp-insurance-portal-otp-2fa-input-ui-spin-reverse 30s linear infinite;
}

/* Glassmorphism Card */
.fp-insurance-portal-otp-2fa-input-ui-card {
  position: relative;
  z-index: 3;
  width: 85%;
  max-width: 400px;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 20px;
  padding: 32px 24px;
  box-shadow: 0 10px 40px rgba(51, 65, 85, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease, border-color 0.4s ease;
}

/* Layer 3: Reactive Spike State (Verified) */
.fp-insurance-portal-otp-2fa-input-ui-card.is-verified {
  transform: scale(1.02);
  border-color: var(--fp-accent-color);
  box-shadow: 0 15px 50px rgba(100, 116, 139, 0.15), 0 0 0 2px var(--fp-soft-color);
}

/* Header */
.fp-insurance-portal-otp-2fa-input-ui-icon {
  width: 48px;
  height: 48px;
  background-color: var(--fp-primary-color);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  box-shadow: 0 4px 12px rgba(51, 65, 85, 0.05);
  color: var(--fp-accent-color);
  border: 1px solid var(--fp-soft-color);
  transition: color 0.3s ease, background-color 0.3s ease;
}

.fp-insurance-portal-otp-2fa-input-ui-card.is-verified .fp-insurance-portal-otp-2fa-input-ui-icon {
  background-color: var(--fp-accent-color);
  color: var(--fp-primary-color);
}

.fp-insurance-portal-otp-2fa-input-ui-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fp-insurance-portal-otp-2fa-input-ui-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--fp-text-color);
  margin: 0 0 4px 0;
  letter-spacing: -0.5px;
}

.fp-insurance-portal-otp-2fa-input-ui-subtitle {
  font-size: 0.8rem;
  color: var(--fp-muted-color);
  margin: 0 0 32px 0;
  text-align: center;
}

/* OTP Inputs */
.fp-insurance-portal-otp-2fa-input-ui-otp-group {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  justify-content: center;
  width: 100%;
}

.fp-insurance-portal-otp-2fa-input-ui-digit {
  width: 40px;
  height: 48px;
  background-color: var(--fp-primary-color);
  border: 1px solid var(--fp-muted-color);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 600;
  font-family: 'Courier New', Courier, monospace;
  color: var(--fp-text-color);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  overflow: hidden;
}

/* State Modifiers for Digits */
.fp-insurance-portal-otp-2fa-input-ui-digit.is-active {
  border-color: var(--fp-info-color);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  transform: translateY(-2px);
}

.fp-insurance-portal-otp-2fa-input-ui-digit.is-locked {
  border-color: var(--fp-accent-color);
  background-color: var(--fp-soft-color);
  color: var(--fp-text-color);
}

.fp-insurance-portal-otp-2fa-input-ui-digit.is-shuffling {
  color: var(--fp-muted-color);
  filter: blur(0.5px);
}

/* Footer Status */
.fp-insurance-portal-otp-2fa-input-ui-status-box {
  background-color: rgba(248, 250, 252, 0.8);
  border-radius: 20px;
  padding: 6px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--fp-soft-color);
}

.fp-insurance-portal-otp-2fa-input-ui-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--fp-info-color);
  animation: fp-insurance-portal-otp-2fa-input-ui-pulse 1.5s infinite alternate;
}

.fp-insurance-portal-otp-2fa-input-ui-card.is-verified .fp-insurance-portal-otp-2fa-input-ui-status-dot {
  background-color: var(--fp-accent-color);
  animation: none;
}

.fp-insurance-portal-otp-2fa-input-ui-status-text {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--fp-muted-color);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Keyframes */
@keyframes fp-insurance-portal-otp-2fa-input-ui-breathe {
  0% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.6; }
  100% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
}

@keyframes fp-insurance-portal-otp-2fa-input-ui-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes fp-insurance-portal-otp-2fa-input-ui-spin-reverse {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}

@keyframes fp-insurance-portal-otp-2fa-input-ui-pulse {
  0% { opacity: 0.4; }
  100% { opacity: 1; }
}

/* Responsive */
@media (max-width: 480px) {
  .fp-insurance-portal-otp-2fa-input-ui-card {
    width: 90%;
    padding: 24px 16px;
  }
  .fp-insurance-portal-otp-2fa-input-ui-digit {
    width: 36px;
    height: 44px;
    font-size: 1.1rem;
  }
  .fp-insurance-portal-otp-2fa-input-ui-otp-group {
    gap: 6px;
  }
}

document.querySelectorAll('.fp-insurance-portal-otp-2fa-input-ui').forEach(root => {
  const card = root.querySelector('#fp-insurtech-card');
  const iconWrap = root.querySelector('#fp-insurtech-icon');
  const digitEls = root.querySelectorAll('.fp-insurance-portal-otp-2fa-input-ui-digit');
  const statusText = root.querySelector('#fp-insurtech-status');

  let reqId;
  let isVisible = true;
  let lastTime = 0;
  
  // Configuration
  const targetCode = ['7', '3', '0', '9', '4', '2'];
  const shuffleDurationPerDigit = 400; 
  const shuffleInterval = 40; 
  
  // State
  let currentDigitIndex = 0;
  let timeSpentOnCurrentDigit = 0;
  let timeSinceLastShuffle = 0;
  let isCompleted = false;
  let resetTimer = 0;

  function resetUI() {
    currentDigitIndex = 0;
    timeSpentOnCurrentDigit = 0;
    isCompleted = false;
    resetTimer = 0;
    
    if (card) card.classList.remove('is-verified');
    if (statusText) statusText.textContent = "Authenticating...";
    
    if (iconWrap) {
        iconWrap.innerHTML = '<svg viewBox="0 0 24 24"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg>';
    }

    digitEls.forEach(el => {
      el.textContent = '';
      el.className = 'fp-insurance-portal-otp-2fa-input-ui-digit';
    });
  }

  // Layer 3: Reactive Animation Engine (Type Shuffle)
  function animate(time) {
    if (!lastTime) lastTime = time;
    const dt = time - lastTime;
    lastTime = time;

    if (!isCompleted) {
      if (currentDigitIndex < targetCode.length) {
        timeSpentOnCurrentDigit += dt;
        timeSinceLastShuffle += dt;

        const currentEl = digitEls[currentDigitIndex];
        currentEl.classList.add('is-active', 'is-shuffling');

        // Shuffle effect
        if (timeSinceLastShuffle > shuffleInterval) {
          currentEl.textContent = Math.floor(Math.random() * 10);
          timeSinceLastShuffle = 0;
        }

        // Lock digit
        if (timeSpentOnCurrentDigit > shuffleDurationPerDigit) {
          currentEl.textContent = targetCode[currentDigitIndex];
          currentEl.classList.remove('is-active', 'is-shuffling');
          currentEl.classList.add('is-locked');
          
          currentDigitIndex++;
          timeSpentOnCurrentDigit = 0;

          // Check if all done
          if (currentDigitIndex === targetCode.length) {
            isCompleted = true;
            
            // Trigger Reactive Spike
            if (card) card.classList.add('is-verified');
            if (statusText) statusText.textContent = "SECURE CONNECTION ESTABLISHED";
            
            // Change Icon to Check Shield
            if (iconWrap) {
              iconWrap.innerHTML = '<svg viewBox="0 0 24 24"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path><polyline points="9 12 11 14 15 10"></polyline></svg>';
            }
          }
        }
      }
    } else {
      // Wait before resetting for loop
      resetTimer += dt;
      if (resetTimer > 3500) {
        resetUI();
      }
    }

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

  // Intersection Observer
  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);

  // Page Visibility
  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);

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

  // Initialize
  resetUI();

});