.fp-logistics-shipping-smart-contract-ui {
  /* Layout Variables */
  --fp-container-width: 100%;
  --fp-max-width: 500px;
  --fp-aspect-ratio: 1 / 1;

  /* Semantic Color Variables - Slate Technical */
  --fp-primary-color: #FFFFFF;       /* Putih */
  --fp-secondary-color: #F8FAFC;     /* Off-white/Slate 50 */
  --fp-text-color: #334155;          /* Hitam Pudar (Slate 700) */
  --fp-muted-color: #94A3B8;         /* Slate 400 */
  --fp-soft-color: #E2E8F0;          /* Slate 200 (Grid lines) */
  --fp-background-color: transparent;

  --fp-accent-color: #64748B;        /* Biru Keabu-abuan (Slate 500) */
  --fp-info-color: #3B82F6;          /* Signal Blue */
  --fp-warning-color: #F59E0B;       /* Warning Amber */
  --fp-danger-color: #EF4444;        /* Alert Red */

  width: var(--fp-container-width);
  max-width: var(--fp-max-width);
  margin: 0 auto;
  background: var(--fp-background-color);
  font-family: 'Courier New', Courier, monospace;
}

/* Main Stage */
.fp-logistics-shipping-smart-contract-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-soft-color);
  box-shadow: 0 10px 30px rgba(51, 65, 85, 0.05);
  box-sizing: border-box;
}

/* Blueprint Grid Background */
.fp-logistics-shipping-smart-contract-ui-grid {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(var(--fp-soft-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--fp-soft-color) 1px, transparent 1px);
  background-size: 20px 20px;
  z-index: 0;
  opacity: 0.6;
}

/* Layer 2: Rotational Technical Compass/Seal */
.fp-logistics-shipping-smart-contract-ui-compass {
  position: absolute;
  width: 85%;
  aspect-ratio: 1 / 1;
  border: 1px dashed var(--fp-muted-color);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  animation: fp-logistics-shipping-smart-contract-ui-spin 30s linear infinite;
  pointer-events: none;
}

.fp-logistics-shipping-smart-contract-ui-compass::before {
  content: '';
  position: absolute;
  inset: 20px;
  border: 2px dotted var(--fp-accent-color);
  border-radius: 50%;
  opacity: 0.4;
  animation: fp-logistics-shipping-smart-contract-ui-spin-reverse 20s linear infinite;
}

.fp-logistics-shipping-smart-contract-ui-compass::after {
  content: '';
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  background-color: var(--fp-accent-color);
  border-radius: 50%;
}

/* Layer 1: Base Breathing Panel */
.fp-logistics-shipping-smart-contract-ui-panel {
  position: relative;
  z-index: 2;
  width: 75%;
  height: 70%;
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 2px solid var(--fp-accent-color);
  padding: 24px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  box-shadow: 0 4px 20px rgba(100, 116, 139, 0.1);
  animation: fp-logistics-shipping-smart-contract-ui-breathe 4s ease-in-out infinite alternate;
  transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Crosshairs (Blueprint corners) */
.fp-logistics-shipping-smart-contract-ui-corner {
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid var(--fp-text-color);
}
.fp-logistics-shipping-smart-contract-ui-corner.tl { top: -2px; left: -2px; border-right: none; border-bottom: none; }
.fp-logistics-shipping-smart-contract-ui-corner.tr { top: -2px; right: -2px; border-left: none; border-bottom: none; }
.fp-logistics-shipping-smart-contract-ui-corner.bl { bottom: -2px; left: -2px; border-right: none; border-top: none; }
.fp-logistics-shipping-smart-contract-ui-corner.br { bottom: -2px; right: -2px; border-left: none; border-top: none; }

/* Header */
.fp-logistics-shipping-smart-contract-ui-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--fp-soft-color);
  padding-bottom: 12px;
  margin-bottom: 16px;
}

.fp-logistics-shipping-smart-contract-ui-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--fp-text-color);
  letter-spacing: 1px;
}

.fp-logistics-shipping-smart-contract-ui-status {
  font-size: 10px;
  font-weight: 700;
  color: var(--fp-primary-color);
  background-color: var(--fp-accent-color);
  padding: 4px 8px;
  border-radius: 2px;
  letter-spacing: 1px;
  box-shadow: 2px 2px 0px var(--fp-text-color);
  transition: background-color 0.2s ease, transform 0.2s ease;
}

/* Content / Typewriter Area */
.fp-logistics-shipping-smart-contract-ui-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.fp-logistics-shipping-smart-contract-ui-clause {
  font-size: 14px;
  line-height: 1.6;
  color: var(--fp-accent-color);
  font-weight: 600;
  min-height: 3em; 
}

.fp-logistics-shipping-smart-contract-ui-cursor {
  display: inline-block;
  width: 8px;
  height: 14px;
  background-color: var(--fp-text-color);
  vertical-align: middle;
  margin-left: 4px;
  animation: fp-logistics-shipping-smart-contract-ui-blink 0.8s step-end infinite;
}

/* Footer / Progress */
.fp-logistics-shipping-smart-contract-ui-footer {
  border-top: 1px solid var(--fp-soft-color);
  padding-top: 16px;
}

.fp-logistics-shipping-smart-contract-ui-meta {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--fp-muted-color);
  margin-bottom: 8px;
}

.fp-logistics-shipping-smart-contract-ui-hash {
  font-weight: bold;
  color: var(--fp-text-color);
  transition: color 0.2s ease;
}

.fp-logistics-shipping-smart-contract-ui-progress-track {
  width: 100%;
  height: 4px;
  background-color: var(--fp-soft-color);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}

.fp-logistics-shipping-smart-contract-ui-progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background-color: var(--fp-accent-color);
  transition: width 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Animations */
@keyframes fp-logistics-shipping-smart-contract-ui-breathe {
  0% { transform: scale(1); }
  100% { transform: scale(1.02); }
}

@keyframes fp-logistics-shipping-smart-contract-ui-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes fp-logistics-shipping-smart-contract-ui-spin-reverse {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}

@keyframes fp-logistics-shipping-smart-contract-ui-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* Responsive adjustments */
@media (max-width: 480px) {
  .fp-logistics-shipping-smart-contract-ui-panel {
    width: 85%;
    padding: 16px;
  }
  .fp-logistics-shipping-smart-contract-ui-clause {
    font-size: 12px;
  }
}

document.querySelectorAll('.fp-logistics-shipping-smart-contract-ui').forEach(root => {
  const twEl = root.querySelector('#fp-logistics-shipping-smart-contract-ui-tw');
  const panelEl = root.querySelector('#fp-logistics-shipping-smart-contract-ui-panel');
  const progressEl = root.querySelector('#fp-logistics-shipping-smart-contract-ui-progress');
  const hashEl = root.querySelector('#fp-logistics-shipping-smart-contract-ui-hash');
  const statusEl = root.querySelector('#fp-logistics-shipping-smart-contract-ui-status');

  const clauses = [
    "INITIATING SMART CONTRACT...",
    "VERIFYING CARGO MANIFEST [MATCHED]",
    "LOCKING ESCROW FUNDS (240.5 ETH)",
    "INSURANCE CLAUSE: ACTIVE (COVERAGE: A)",
    "AWAITING PORT CLEARANCE SIGNAL..."
  ];

  let reqId;
  let isVisible = true;
  let lastTime = 0;
  
  let currentClauseIdx = 0;
  let currentCharIdx = 0;
  let isDeleting = false;
  let typingTimer = 0;
  let pauseTimer = 1000; 

  function generateHash() {
    const chars = '0123456789abcdef';
    let res = '0x';
    for(let i=0; i<2; i++) res += chars[Math.floor(Math.random() * chars.length)];
    res += '...';
    for(let i=0; i<4; i++) res += chars[Math.floor(Math.random() * chars.length)];
    return res;
  }

  function triggerSpike() {
    if (!panelEl) return;
    
    panelEl.style.boxShadow = "0 0 25px rgba(100, 116, 139, 0.4)";
    panelEl.style.transform = "scale(1.05)";
    panelEl.style.borderColor = "var(--fp-text-color)";
    
    if (statusEl) {
      statusEl.style.backgroundColor = "var(--fp-text-color)";
      statusEl.style.transform = "scale(1.1)";
    }
    
    if (hashEl) {
      hashEl.textContent = generateHash();
      hashEl.style.color = "var(--fp-info-color)";
    }

    const progress = ((currentClauseIdx + 1) / clauses.length) * 100;
    if (progressEl) progressEl.style.width = `${progress}%`;

    setTimeout(() => {
      if (!isVisible || !panelEl) return;
      panelEl.style.boxShadow = "0 4px 20px rgba(100, 116, 139, 0.1)";
      panelEl.style.transform = "scale(1.02)"; 
      panelEl.style.borderColor = "var(--fp-accent-color)";
      
      if (statusEl) {
        statusEl.style.backgroundColor = "var(--fp-accent-color)";
        statusEl.style.transform = "scale(1)";
      }
      if (hashEl) {
        hashEl.style.color = "var(--fp-text-color)";
      }
    }, 300);
  }

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

    if (pauseTimer > 0) {
      pauseTimer -= dt;
    } else {
      typingTimer += dt;
      
      const typingSpeed = isDeleting ? 20 : 50;

      if (typingTimer > typingSpeed) {
        typingTimer = 0;
        const currentText = clauses[currentClauseIdx];

        if (!isDeleting) {
          if (currentCharIdx < currentText.length) {
            currentCharIdx++;
            if (twEl) twEl.textContent = currentText.substring(0, currentCharIdx);
          } else {
            triggerSpike();
            pauseTimer = 1500; 
            isDeleting = true;
          }
        } else {
          if (twEl) twEl.textContent = "";
          currentCharIdx = 0;
          isDeleting = false;
          
          currentClauseIdx++;
          if (currentClauseIdx >= clauses.length) {
            currentClauseIdx = 0; 
            if (progressEl) progressEl.style.width = `0%`; 
            pauseTimer = 1000;
          } else {
            pauseTimer = 200; 
          }
        }
      }
    }

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

});