.fp-greentech-face-id-verification-ui-blueprint {
  /* Layout Variables */
  --fp-container-width: 100%;
  --fp-max-width: 500px;
  --fp-aspect-ratio: 1 / 1;

  /* Semantic Color Variables - Pine Blueprint Theme */
  --fp-primary-color: #FFFFFF;        /* Background: Putih */
  --fp-secondary-color: #E8EFEA;      /* Light Grid Lines */
  --fp-muted-color: #8FABA0;          /* Muted Tech Lines */
  --fp-soft-color: #F4F8F5;           /* Soft Panel Fill */
  --fp-background-color: transparent;

  --fp-info-color: #1A4A38;           /* Teks: Hijau Pinus Tua (Dark Pine Green) */
  --fp-warning-color: #2D7A5D;        /* Medium Pine */
  --fp-danger-color: #D35400;         /* Alert Color (Semantic) */
  --fp-accent-color: #4CAF50;         /* Aksen: Hijau Daun (Leaf Green) */

  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-greentech-face-id-verification-ui-blueprint-stage {
  aspect-ratio: var(--fp-aspect-ratio);
  width: 100%;
  background-color: var(--fp-primary-color);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--fp-secondary-color);
  box-shadow: 0 10px 30px rgba(26, 74, 56, 0.05);
}

/* Blueprint Grid Background */
.fp-greentech-face-id-verification-ui-blueprint-grid {
  position: absolute;
  inset: 0;
  background-size: 20px 20px, 20px 20px, 100px 100px, 100px 100px;
  background-image: 
    linear-gradient(var(--fp-secondary-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--fp-secondary-color) 1px, transparent 1px),
    linear-gradient(rgba(143, 171, 160, 0.3) 1px, transparent 1px),
    linear-gradient(90deg, rgba(143, 171, 160, 0.3) 1px, transparent 1px);
  z-index: 0;
  opacity: 0.8;
}

/* Scanner Frame Layer 1: Base Breathing */
.fp-greentech-face-id-verification-ui-blueprint-scanner {
  position: relative;
  width: 55%;
  aspect-ratio: 3 / 4;
  border: 2px solid var(--fp-info-color);
  background: rgba(255, 255, 255, 0.9);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 4px var(--fp-soft-color), inset 0 0 20px rgba(76, 175, 80, 0.05);
  animation: fp-greentech-face-id-verification-ui-blueprint-breathe 4s infinite alternate ease-in-out;
  overflow: hidden;
}

/* Corner Markers */
.fp-greentech-face-id-verification-ui-blueprint-corner {
  position: absolute;
  width: 20px;
  height: 20px;
  border: 3px solid var(--fp-info-color);
  z-index: 4;
}
.fp-greentech-face-id-verification-ui-blueprint-corner.tl { top: -2px; left: -2px; border-right: none; border-bottom: none; }
.fp-greentech-face-id-verification-ui-blueprint-corner.tr { top: -2px; right: -2px; border-left: none; border-bottom: none; }
.fp-greentech-face-id-verification-ui-blueprint-corner.bl { bottom: -2px; left: -2px; border-right: none; border-top: none; }
.fp-greentech-face-id-verification-ui-blueprint-corner.br { bottom: -2px; right: -2px; border-left: none; border-top: none; }

/* Canvas for Matrix Code Drop */
.fp-greentech-face-id-verification-ui-blueprint-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0.6;
}

/* Layer 2: Rotational Tech Elements */
.fp-greentech-face-id-verification-ui-blueprint-radar {
  position: absolute;
  width: 140%;
  aspect-ratio: 1 / 1;
  border: 1px dashed var(--fp-muted-color);
  border-radius: 50%;
  z-index: 2;
  animation: fp-greentech-face-id-verification-ui-blueprint-spin 15s linear infinite;
  pointer-events: none;
}
.fp-greentech-face-id-verification-ui-blueprint-radar::before {
  content: '';
  position: absolute;
  top: 10%; left: 10%; right: 10%; bottom: 10%;
  border: 1px dotted var(--fp-info-color);
  border-radius: 50%;
  animation: fp-greentech-face-id-verification-ui-blueprint-spin 10s linear infinite reverse;
}

/* Face Silhouette Blueprint SVG */
.fp-greentech-face-id-verification-ui-blueprint-face {
  position: relative;
  z-index: 3;
  width: 60%;
  height: 70%;
  fill: none;
  stroke: var(--fp-info-color);
  stroke-width: 1.5;
  stroke-dasharray: 4 2;
  opacity: 0.8;
  transition: stroke 0.3s ease, filter 0.3s ease;
}

/* Status Text Panel */
.fp-greentech-face-id-verification-ui-blueprint-status {
  position: absolute;
  bottom: 8%;
  z-index: 5;
  background: var(--fp-primary-color);
  border: 1px solid var(--fp-info-color);
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fp-info-color);
  text-transform: uppercase;
  letter-spacing: 2px;
  box-shadow: 4px 4px 0px var(--fp-secondary-color);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}
.fp-greentech-face-id-verification-ui-blueprint-indicator {
  width: 8px;
  height: 8px;
  background: var(--fp-muted-color);
  border-radius: 50%;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

/* Target Crosshairs Background */
.fp-greentech-face-id-verification-ui-blueprint-target {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: rgba(143, 171, 160, 0.4);
  z-index: 0;
}
.fp-greentech-face-id-verification-ui-blueprint-target.v {
  top: 0;
  left: 50%;
  width: 1px;
  height: 100%;
}

/* Keyframes */
@keyframes fp-greentech-face-id-verification-ui-blueprint-breathe {
  0% { transform: scale(0.98); box-shadow: 0 0 0 2px var(--fp-soft-color), inset 0 0 10px rgba(76, 175, 80, 0.0); }
  100% { transform: scale(1.02); box-shadow: 0 0 0 8px var(--fp-soft-color), inset 0 0 30px rgba(76, 175, 80, 0.1); }
}

@keyframes fp-greentech-face-id-verification-ui-blueprint-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Responsive */
@media (max-width: 480px) {
  .fp-greentech-face-id-verification-ui-blueprint-scanner { width: 65%; }
  .fp-greentech-face-id-verification-ui-blueprint-status { font-size: 11px; padding: 4px 12px; }
}

document.querySelectorAll('.fp-greentech-face-id-verification-ui-blueprint').forEach(root => {
  const canvas = root.querySelector('#fp-greentech-face-id-verification-ui-blueprint-canvas');
  if (!canvas) return;
  const ctx = canvas.getContext('2d');
  const scanner = root.querySelector('#fp-greentech-face-id-verification-ui-blueprint-scanner');
  const faceSvg = root.querySelector('#fp-greentech-face-id-verification-ui-blueprint-face');
  const statusBox = root.querySelector('#fp-greentech-face-id-verification-ui-blueprint-status');
  const statusText = root.querySelector('#fp-greentech-face-id-verification-ui-blueprint-text');
  const statusIndicator = root.querySelector('#fp-greentech-face-id-verification-ui-blueprint-indicator');

  let reqId;
  let isVisible = true;
  let width, height;

  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789$+-*/=%""\'#&_(),.;:?!\\|{}<>[]^~'.split('');
  const fontSize = 12;
  let columns = [];
  let drops = [];

  function initCanvas() {
    if (!scanner || !canvas) return;
    const rect = scanner.getBoundingClientRect();
    width = canvas.width = rect.width;
    height = canvas.height = rect.height;
    
    columns = Math.floor(width / fontSize);
    drops = [];
    for (let x = 0; x < columns; x++) {
      drops[x] = Math.random() * -100; 
    }
  }

  initCanvas();

  let resizeObserver;
  if (scanner) {
    resizeObserver = new ResizeObserver(() => {
      if (isVisible) initCanvas();
    });
    resizeObserver.observe(scanner);
  }

  let lastTime = 0;
  let spikeTimer = 0;
  let isSpiking = false;
  const matrixSpeed = 50; 

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

    if (delta > matrixSpeed) {
      ctx.fillStyle = 'rgba(255, 255, 255, 0.15)';
      ctx.fillRect(0, 0, width, height);

      ctx.font = fontSize + 'px "Courier New"';
      
      for (let i = 0; i < drops.length; i++) {
        const text = chars[Math.floor(Math.random() * chars.length)];
        
        if (isSpiking) {
          ctx.fillStyle = '#4CAF50'; 
        } else {
          ctx.fillStyle = '#8FABA0'; 
        }

        ctx.fillText(text, i * fontSize, drops[i] * fontSize);

        if (drops[i] * fontSize > height && Math.random() > 0.95) {
          drops[i] = 0;
        }
        drops[i]++;
      }

      spikeTimer += delta;
      if (!isSpiking && spikeTimer > 3500) {
        isSpiking = true;
        spikeTimer = 0;
        
        if (faceSvg) {
          faceSvg.style.stroke = 'var(--fp-accent-color)';
          faceSvg.style.filter = 'drop-shadow(0 0 5px var(--fp-accent-color))';
        }
        if (scanner) scanner.style.borderColor = 'var(--fp-accent-color)';
        if (statusText) statusText.textContent = "VALIDATING MATCH...";
        if (statusIndicator) {
          statusIndicator.style.background = 'var(--fp-accent-color)';
          statusIndicator.style.boxShadow = '0 0 8px var(--fp-accent-color)';
        }
        if (statusBox) statusBox.style.borderColor = 'var(--fp-accent-color)';
      } else if (isSpiking && spikeTimer > 1200) {
        isSpiking = false;
        spikeTimer = 0;

        if (faceSvg) {
          faceSvg.style.stroke = 'var(--fp-info-color)';
          faceSvg.style.filter = 'none';
        }
        if (scanner) scanner.style.borderColor = 'var(--fp-info-color)';
        if (statusText) statusText.textContent = "SCANNING GEOMETRY";
        if (statusIndicator) {
          statusIndicator.style.background = 'var(--fp-warning-color)';
          statusIndicator.style.boxShadow = 'none';
        }
        if (statusBox) statusBox.style.borderColor = 'var(--fp-info-color)';
      }

      lastTime = time;
    }

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