.fp-hr-recruitment-saas-upgrade-sync-ui {
  /* Layout Variables */
  --fp-container-width: 100%;
  --fp-max-width: 500px;
  --fp-aspect-ratio: 1 / 1;

  /* Semantic Color Variables - Lavender Claymorphism */
  --fp-primary-color: #F9F8F6;       /* Putih Tulang (Bone White background) */
  --fp-secondary-color: #F0EAF8;     /* Light Lavender for Clay Base */
  --fp-text-color: #2D1B4E;          /* Ungu Gelap (Dark Purple Text) */
  --fp-muted-color: #796696;         /* Muted Purple */
  --fp-soft-color: #D8CEF3;          /* Soft Lavender */
  --fp-background-color: transparent;

  --fp-info-color: #A3C4F3;          /* Soft Blue */
  --fp-warning-color: #F3D2A3;       /* Soft Yellow */
  --fp-danger-color: #F3A3A3;        /* Soft Red */
  --fp-accent-color: #B59FE4;        /* Lavender Accent */

  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-hr-recruitment-saas-upgrade-sync-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;
  /* Soft global inset shadow to frame the component */
  box-shadow: inset 0 0 40px rgba(45, 27, 78, 0.03);
}

/* Layer 2: Rotational Radial Halo */
.fp-hr-recruitment-saas-upgrade-sync-ui-halo {
  position: absolute;
  width: 80%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 4px dashed var(--fp-soft-color);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.5;
  animation: fp-hr-recruitment-saas-upgrade-sync-ui-spin 20s linear infinite;
  pointer-events: none;
}

.fp-hr-recruitment-saas-upgrade-sync-ui-halo::before {
  content: '';
  position: absolute;
  inset: -20px;
  border-radius: 50%;
  border: 2px dotted var(--fp-accent-color);
  opacity: 0.3;
  animation: fp-hr-recruitment-saas-upgrade-sync-ui-spin-reverse 15s linear infinite;
}

/* Particle Container for Layer 3 (JS Spikes) */
.fp-hr-recruitment-saas-upgrade-sync-ui-particles {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  z-index: 3;
  pointer-events: none;
}

.fp-hr-recruitment-saas-upgrade-sync-ui-particle {
  position: absolute;
  width: 12px;
  height: 12px;
  background-color: var(--fp-accent-color);
  border-radius: 50%;
  top: -6px;
  left: -6px;
  /* Claymorphism shadow on particles */
  box-shadow: 2px 2px 4px rgba(45, 27, 78, 0.1), 
              inset 2px 2px 4px rgba(255, 255, 255, 0.6), 
              inset -2px -2px 4px rgba(45, 27, 78, 0.1);
}

/* Layer 1: Base Breathing Clay Card */
.fp-hr-recruitment-saas-upgrade-sync-ui-card {
  position: relative;
  z-index: 2;
  width: 65%;
  max-width: 320px;
  background: var(--fp-secondary-color);
  border-radius: 32px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* Claymorphism Shadows */
  box-shadow: 
    16px 16px 32px rgba(45, 27, 78, 0.06), 
    -16px -16px 32px rgba(255, 255, 255, 0.9), 
    inset 4px 4px 12px rgba(255, 255, 255, 0.8), 
    inset -4px -4px 12px rgba(181, 159, 228, 0.2);
  animation: fp-hr-recruitment-saas-upgrade-sync-ui-breathe 4s ease-in-out infinite alternate;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.fp-hr-recruitment-saas-upgrade-sync-ui-card.is-syncing {
  transform: scale(0.98);
}

.fp-hr-recruitment-saas-upgrade-sync-ui-card.is-done {
  transform: scale(1.05);
}

/* Clay Icon Wrapper */
.fp-hr-recruitment-saas-upgrade-sync-ui-icon-wrap {
  width: 64px;
  height: 64px;
  background: var(--fp-secondary-color);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  /* Neumorphic/Clay inset pop */
  box-shadow: 
    6px 6px 12px rgba(45, 27, 78, 0.05), 
    -6px -6px 12px rgba(255, 255, 255, 0.8),
    inset 2px 2px 4px rgba(255, 255, 255, 0.5);
}

.fp-hr-recruitment-saas-upgrade-sync-ui-icon {
  width: 32px;
  height: 32px;
  fill: none;
  stroke: var(--fp-text-color);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Typography */
.fp-hr-recruitment-saas-upgrade-sync-ui-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--fp-text-color);
  margin: 0 0 8px 0;
  letter-spacing: -0.5px;
}

.fp-hr-recruitment-saas-upgrade-sync-ui-subtitle {
  font-size: 0.85rem;
  color: var(--fp-muted-color);
  margin: 0 0 24px 0;
  line-height: 1.4;
}

/* Clay Progress Track */
.fp-hr-recruitment-saas-upgrade-sync-ui-track {
  width: 100%;
  height: 20px;
  background: var(--fp-secondary-color);
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  /* Deep inset shadow for track */
  box-shadow: 
    inset 4px 4px 8px rgba(45, 27, 78, 0.08), 
    inset -4px -4px 8px rgba(255, 255, 255, 0.9);
}

/* Clay Progress Fill */
.fp-hr-recruitment-saas-upgrade-sync-ui-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: var(--fp-accent-color);
  border-radius: 10px;
  /* Bulging inset shadow for fill */
  box-shadow: 
    inset 2px 2px 4px rgba(255, 255, 255, 0.5), 
    inset -2px -2px 4px rgba(45, 27, 78, 0.15);
  transition: background-color 0.3s ease;
}

/* Keyframes */
@keyframes fp-hr-recruitment-saas-upgrade-sync-ui-breathe {
  0% { transform: translateY(0px); }
  100% { transform: translateY(-8px); }
}

@keyframes fp-hr-recruitment-saas-upgrade-sync-ui-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes fp-hr-recruitment-saas-upgrade-sync-ui-spin-reverse {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}

/* Responsive */
@media (max-width: 480px) {
  .fp-hr-recruitment-saas-upgrade-sync-ui-card {
    width: 80%;
    padding: 24px;
  }
  .fp-hr-recruitment-saas-upgrade-sync-ui-halo {
    width: 95%;
  }
}

document.querySelectorAll('.fp-hr-recruitment-saas-upgrade-sync-ui').forEach(root => {
  const cardEl = root.querySelector('#fp-hr-recruitment-saas-upgrade-sync-ui-card');
  const titleEl = root.querySelector('#fp-hr-recruitment-saas-upgrade-sync-ui-title');
  const subtitleEl = root.querySelector('#fp-hr-recruitment-saas-upgrade-sync-ui-subtitle');
  const fillEl = root.querySelector('#fp-hr-recruitment-saas-upgrade-sync-ui-fill');
  const particlesContainer = root.querySelector('#fp-hr-recruitment-saas-upgrade-sync-ui-particles');

  let reqId;
  let isVisible = true;
  let lastTime = 0;
  
  let progress = 0;
  let isExploding = false;
  let particles = [];
  let pauseTimer = 0;

  function triggerExplosion() {
    isExploding = true;
    
    if (cardEl) {
      cardEl.classList.remove('is-syncing');
      cardEl.classList.add('is-done');
    }
    if (titleEl) titleEl.textContent = "Enterprise Tier Unlocked!";
    if (subtitleEl) subtitleEl.textContent = "Your workspace is ready to scale.";
    if (fillEl) fillEl.style.backgroundColor = "var(--fp-text-color)";

    for(let i = 0; i < 40; i++) {
      let el = document.createElement('div');
      el.className = 'fp-hr-recruitment-saas-upgrade-sync-ui-particle';
      if (particlesContainer) particlesContainer.appendChild(el);
      
      let angle = Math.random() * Math.PI * 2;
      let speed = 3 + Math.random() * 6; 
      
      particles.push({
        el: el,
        x: 0,
        y: 0,
        vx: Math.cos(angle) * speed,
        vy: Math.sin(angle) * speed,
        life: 1.0,
        decay: 0.01 + Math.random() * 0.02
      });
    }
  }

  function resetSync() {
    progress = 0;
    isExploding = false;
    
    if (cardEl) {
      cardEl.classList.remove('is-done');
      cardEl.classList.add('is-syncing');
    }
    if (titleEl) titleEl.textContent = "Syncing Workspace...";
    if (subtitleEl) subtitleEl.textContent = "Expanding candidate quota limits";
    if (fillEl) {
        fillEl.style.width = '0%';
        fillEl.style.backgroundColor = "var(--fp-accent-color)";
    }
  }

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

    if (pauseTimer > 0) {
      pauseTimer -= dt;
      if (pauseTimer <= 0 && isExploding) {
        resetSync();
      }
    } else {
      if (!isExploding) {
        let increment = (Math.random() * 0.3) * (dt / 16);
        if (progress > 80) increment *= 0.5; 
        
        progress += increment;
        
        if (progress >= 100) {
          progress = 100;
          triggerExplosion();
          pauseTimer = 3000; 
        }
        
        if (fillEl) fillEl.style.width = `${progress}%`;
      }
    }

    if (particles.length > 0) {
      particles.forEach(p => {
        p.x += p.vx;
        p.y += p.vy;
        p.vy += 0.15; 
        p.life -= p.decay;
        
        if (p.life > 0) {
          p.el.style.transform = `translate(${p.x}px, ${p.y}px) scale(${p.life})`;
          p.el.style.opacity = p.life;
        }
      });

      particles = particles.filter(p => {
        if (p.life <= 0) {
          p.el.remove();
          return false;
        }
        return true;
      });
    }

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

  resetSync();
});