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

  /* Semantic Color Variables - Gold Luxury */
  --fp-primary-color: #FCFCFA;       
  --fp-secondary-color: #F0EEE9;     
  --fp-text-color: #111111;          
  --fp-muted-color: #8C8C8C;         
  --fp-soft-color: rgba(212, 175, 55, 0.1); 
  --fp-background-color: transparent;

  --fp-accent-color: #D4AF37;        
  --fp-info-color: #AA8529;          
  --fp-warning-color: #F3E5AB;       
  --fp-danger-color: #000000;        

  width: var(--fp-container-width);
  max-width: var(--fp-max-width);
  margin: 0 auto;
  background: var(--fp-background-color);
  font-family: "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  position: relative;
}

/* Main Stage */
.fp-beauty-cosmetics-face-id-verification-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: 24px;
  border: 1px solid var(--fp-secondary-color);
  box-shadow: 0 20px 50px rgba(17, 17, 17, 0.05);
  box-sizing: border-box;
}

/* Layer 1: Ambient Golden Breathing Aura */
.fp-beauty-cosmetics-face-id-verification-ui-breathe {
  position: absolute;
  width: 70%;
  height: 70%;
  background: radial-gradient(circle, var(--fp-soft-color) 0%, transparent 70%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  animation: fp-beauty-cosmetics-face-id-verification-ui-pulse-bg 4s ease-in-out infinite alternate;
  z-index: 1;
  pointer-events: none;
}

/* Main Card / Frame */
.fp-beauty-cosmetics-face-id-verification-ui-card {
  position: relative;
  z-index: 2;
  width: 75%;
  height: 75%;
  background: rgba(252, 252, 250, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04), inset 0 0 0 1px rgba(255, 255, 255, 0.6);
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease, border-color 0.4s ease;
  box-sizing: border-box;
  padding: 24px;
}

/* Layer 2: Rotational Golden Rings */
.fp-beauty-cosmetics-face-id-verification-ui-ring-outer {
  position: absolute;
  width: 65%;
  aspect-ratio: 1 / 1;
  border: 1px dashed var(--fp-accent-color);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.4;
  z-index: 3;
  animation: fp-beauty-cosmetics-face-id-verification-ui-spin 35s linear infinite;
  pointer-events: none;
}

.fp-beauty-cosmetics-face-id-verification-ui-ring-inner {
  position: absolute;
  width: 55%;
  aspect-ratio: 1 / 1;
  border: 1px dotted var(--fp-text-color);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.2;
  z-index: 3;
  animation: fp-beauty-cosmetics-face-id-verification-ui-spin-reverse 25s linear infinite;
  pointer-events: none;
}

/* Scanner Core (Iris Container) */
.fp-beauty-cosmetics-face-id-verification-ui-core {
  position: relative;
  width: 45%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background-color: var(--fp-secondary-color);
  border: 2px solid var(--fp-accent-color);
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.15), inset 0 0 10px rgba(0, 0, 0, 0.05);
  z-index: 4;
  overflow: hidden;
  margin-bottom: 24px;
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

/* Face Silhouette SVG */
.fp-beauty-cosmetics-face-id-verification-ui-face {
  position: absolute;
  width: 60%;
  height: 60%;
  top: 20%;
  left: 20%;
  fill: none;
  stroke: var(--fp-text-color);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.6;
}

/* Scanning Laser */
.fp-beauty-cosmetics-face-id-verification-ui-laser {
  position: absolute;
  width: 100%;
  height: 2px;
  background: var(--fp-accent-color);
  left: 0;
  top: 50%;
  box-shadow: 0 0 10px 2px rgba(212, 175, 55, 0.6);
  z-index: 5;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.fp-beauty-cosmetics-face-id-verification-ui-core.is-scanning .fp-beauty-cosmetics-face-id-verification-ui-laser {
  opacity: 1;
}

/* Mechanical Shutter (Iris) */
.fp-beauty-cosmetics-face-id-verification-ui-shutter {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  z-index: 10;
}

.fp-beauty-cosmetics-face-id-verification-ui-blade {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: center;
  transform: rotate(var(--rot));
}

.fp-beauty-cosmetics-face-id-verification-ui-blade::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150%;
  height: 150%;
  background-color: var(--fp-text-color);
  border-left: 2px solid var(--fp-accent-color);
  box-shadow: inset 5px 0 15px rgba(0,0,0,0.5);
  transform-origin: 0 0;
  transform: rotate(30deg);
  transition: transform 0.8s cubic-bezier(0.76, 0, 0.24, 1);
}

/* Shutter Open State */
.fp-beauty-cosmetics-face-id-verification-ui-shutter.is-open .fp-beauty-cosmetics-face-id-verification-ui-blade::before {
  transform: rotate(30deg) translate(40%, -10%);
}

/* Footer Status Area */
.fp-beauty-cosmetics-face-id-verification-ui-status {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.fp-beauty-cosmetics-face-id-verification-ui-badge {
  background-color: var(--fp-text-color);
  color: var(--fp-accent-color);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 2px;
  padding: 4px 10px;
  border-radius: 20px;
  text-transform: uppercase;
  box-shadow: 0 4px 10px rgba(17, 17, 17, 0.2);
}

.fp-beauty-cosmetics-face-id-verification-ui-text {
  font-size: 12px;
  font-weight: 700;
  color: var(--fp-text-color);
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: color 0.3s ease;
}

/* Layer 3: Reactive Spike State (Verified) */
.fp-beauty-cosmetics-face-id-verification-ui-card.is-verified {
  transform: scale(1.02);
  border-color: var(--fp-accent-color);
  box-shadow: 0 20px 50px rgba(212, 175, 55, 0.2), inset 0 0 0 2px var(--fp-accent-color);
}

.fp-beauty-cosmetics-face-id-verification-ui-card.is-verified .fp-beauty-cosmetics-face-id-verification-ui-core {
  border-color: var(--fp-text-color);
  box-shadow: 0 0 30px rgba(212, 175, 55, 0.4), inset 0 0 10px rgba(212, 175, 55, 0.2);
}

.fp-beauty-cosmetics-face-id-verification-ui-card.is-verified .fp-beauty-cosmetics-face-id-verification-ui-text {
  color: var(--fp-info-color);
}

.fp-beauty-cosmetics-face-id-verification-ui-card.is-verified .fp-beauty-cosmetics-face-id-verification-ui-face {
  stroke: var(--fp-accent-color);
  opacity: 1;
}

/* Keyframes */
@keyframes fp-beauty-cosmetics-face-id-verification-ui-pulse-bg {
  0% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.5; }
  100% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
}

@keyframes fp-beauty-cosmetics-face-id-verification-ui-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes fp-beauty-cosmetics-face-id-verification-ui-spin-reverse {
  from { transform: translate(-50%, -50%) rotate(360deg); }
  to { transform: translate(-50%, -50%) rotate(0deg); }
}

/* Responsive */
@media (max-width: 480px) {
  .fp-beauty-cosmetics-face-id-verification-ui-card {
    width: 85%;
    height: 85%;
    padding: 16px;
  }
  .fp-beauty-cosmetics-face-id-verification-ui-core {
    width: 55%;
  }
}

document.querySelectorAll('.fp-beauty-cosmetics-face-id-verification-ui').forEach(root => {
  const card = root.querySelector('#fp-bcf-card');
  const core = root.querySelector('#fp-bcf-core');
  const shutter = root.querySelector('#fp-bcf-shutter');
  const laser = root.querySelector('#fp-bcf-laser');
  const text = root.querySelector('#fp-bcf-text');

  let reqId;
  let isVisible = true;
  let lastTime = 0;
  
  let state = 0; 
  let timer = 0;
  let laserPhase = 0;

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

    timer += dt;

    if (state === 1 && laser) {
        laserPhase += dt * 0.004;
        const yPos = 50 + Math.sin(laserPhase) * 40;
        laser.style.top = `${yPos}%`;
    }

    if (state === 0) {
        if (timer > 1500) {
            state = 1; 
            timer = 0;
            if (shutter) shutter.classList.add('is-open');
            if (core) core.classList.add('is-scanning');
            if (text) text.textContent = "ANALYZING BIOMETRICS";
        }
    } else if (state === 1) {
        if (timer > 3500) {
            state = 2; 
            timer = 0;
            if (core) core.classList.remove('is-scanning');
            if (card) card.classList.add('is-verified');
            if (text) text.textContent = "IDENTITY CONFIRMED";
        }
    } else if (state === 2) {
        if (timer > 2500) {
            state = 3; 
            timer = 0;
            if (card) card.classList.remove('is-verified');
            if (shutter) shutter.classList.remove('is-open');
            if (text) text.textContent = "SECURING PORTAL";
        }
    } else if (state === 3) {
        if (timer > 1500) {
            state = 0; 
            timer = 0;
            laserPhase = 0;
            if (text) text.textContent = "AWAITING SUBJECT";
        }
    }

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