.fp-ai-machine-learning-abstract-hero-ui {
  /* Layout Variables */
  --fp-container-width: 100%;
  --fp-max-width: 500px;
  --fp-aspect-ratio: 1 / 1;

  /* Semantic Color Variables - Neon Cyan Tech */
  --fp-primary-color: #F8F9FA;       
  --fp-secondary-color: #E9ECEF;     
  --fp-text-color: #0A0A0B;          
  --fp-muted-color: #6C757D;         
  --fp-soft-color: rgba(0, 255, 255, 0.15); 
  --fp-background-color: transparent;

  --fp-accent-color: #00FFFF;        
  --fp-info-color: #00E5FF;          
  --fp-warning-color: #00B8D4;       
  --fp-danger-color: #00838F;        

  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-ai-machine-learning-abstract-hero-ui-stage {
  aspect-ratio: var(--fp-aspect-ratio);
  width: 100%;
  background-color: var(--fp-primary-color);
  border: 1px solid var(--fp-secondary-color);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: 24px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.03);
  box-sizing: border-box;
}

/* Grid Background */
.fp-ai-machine-learning-abstract-hero-ui-grid {
  position: absolute;
  inset: 0;
  background-size: 40px 40px;
  background-image: 
    linear-gradient(to right, rgba(0, 0, 0, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
  z-index: 0;
}

/* Layer 1: Ambient Base Breathing Glow */
.fp-ai-machine-learning-abstract-hero-ui-glow {
  position: absolute;
  width: 80%;
  height: 80%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, var(--fp-soft-color) 0%, transparent 60%);
  border-radius: 50%;
  z-index: 1;
  animation: fp-ai-machine-learning-abstract-hero-ui-breathe 5s ease-in-out infinite alternate;
  pointer-events: none;
}

/* Layer 2: Rotational Structural Ring */
.fp-ai-machine-learning-abstract-hero-ui-ring {
  position: absolute;
  width: 70%;
  aspect-ratio: 1 / 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px dashed var(--fp-muted-color);
  opacity: 0.3;
  z-index: 2;
  animation: fp-ai-machine-learning-abstract-hero-ui-spin 25s linear infinite;
  pointer-events: none;
}

.fp-ai-machine-learning-abstract-hero-ui-ring::before {
  content: '';
  position: absolute;
  inset: 15px;
  border-radius: 50%;
  border: 2px dotted var(--fp-text-color);
  opacity: 0.2;
  animation: fp-ai-machine-learning-abstract-hero-ui-spin-reverse 15s linear infinite;
}

/* Layer 3: Fluid SVG Container */
.fp-ai-machine-learning-abstract-hero-ui-fluid-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  pointer-events: none;
}

.fp-ai-machine-learning-abstract-hero-ui-fluid-svg {
  width: 80%;
  height: 80%;
  overflow: visible;
}

/* UI Overlay Elements */
.fp-ai-machine-learning-abstract-hero-ui-overlay {
  position: relative;
  z-index: 4;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px;
  box-sizing: border-box;
  pointer-events: none;
}

.fp-ai-machine-learning-abstract-hero-ui-badge {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--fp-text-color);
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 800;
  color: var(--fp-text-color);
  letter-spacing: 1px;
  box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.05);
  transition: background-color 0.3s, color 0.3s;
}

.fp-ai-machine-learning-abstract-hero-ui-dot {
  width: 8px;
  height: 8px;
  background-color: var(--fp-accent-color);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--fp-accent-color);
  animation: fp-ai-machine-learning-abstract-hero-ui-pulse 1s infinite alternate;
}

.fp-ai-machine-learning-abstract-hero-ui-metrics {
  display: flex;
  justify-content: space-between;
  width: 100%;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--fp-secondary-color);
  padding: 16px;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
  box-sizing: border-box;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.fp-ai-machine-learning-abstract-hero-ui-metric {
  display: flex;
  flex-direction: column;
}

.fp-ai-machine-learning-abstract-hero-ui-metric.right {
  align-items: flex-end;
}

.fp-ai-machine-learning-abstract-hero-ui-metric-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--fp-muted-color);
  margin-bottom: 4px;
  letter-spacing: 1px;
}

.fp-ai-machine-learning-abstract-hero-ui-metric-value {
  font-family: 'Courier New', Courier, monospace;
  font-size: 18px;
  font-weight: 900;
  color: var(--fp-text-color);
  transition: color 0.2s;
}

/* Keyframes */
@keyframes fp-ai-machine-learning-abstract-hero-ui-breathe {
  0% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.5; }
  100% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
}

@keyframes fp-ai-machine-learning-abstract-hero-ui-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes fp-ai-machine-learning-abstract-hero-ui-spin-reverse {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}

@keyframes fp-ai-machine-learning-abstract-hero-ui-pulse {
  0% { opacity: 0.4; transform: scale(0.8); }
  100% { opacity: 1; transform: scale(1.2); }
}

/* Responsive */
@media (max-width: 480px) {
  .fp-ai-machine-learning-abstract-hero-ui-badge { font-size: 10px; }
  .fp-ai-machine-learning-abstract-hero-ui-metric-value { font-size: 14px; }
  .fp-ai-machine-learning-abstract-hero-ui-metrics { padding: 12px; }
}

document.querySelectorAll('.fp-ai-machine-learning-abstract-hero-ui').forEach(root => {
  const pathBg = root.querySelector('#fp-ai-machine-learning-abstract-hero-ui-fluid-bg');
  const pathCore = root.querySelector('#fp-ai-machine-learning-abstract-hero-ui-fluid-core');
  const valNodes = root.querySelector('#fp-ai-machine-learning-abstract-hero-ui-val-nodes');
  const valLoss = root.querySelector('#fp-ai-machine-learning-abstract-hero-ui-val-loss');
  const badge = root.querySelector('#fp-ai-machine-learning-abstract-hero-ui-badge');
  const metricsBox = root.querySelector('#fp-ai-machine-learning-abstract-hero-ui-metrics-box');

  let reqId;
  let isVisible = true;
  let lastTime = 0;
  let elapsedTime = 0;
  let spikeTimer = 0;

  // Morphing State
  const numPoints = 30;
  const radius = 60;
  const cx = 100;
  const cy = 100;
  
  // Interpolation targets
  let targetAmp = 8;
  let currentAmp = 8;
  let targetSpeed = 0.001;
  let currentSpeed = 0.001;
  let isSpiking = false;
  let baseNodes = 12042;

  // Generates a smooth, closed SVG path string from an array of points
  function createClosedPath(points) {
    let d = "";
    const len = points.length;
    const midX = (points[len-1].x + points[0].x) / 2;
    const midY = (points[len-1].y + points[0].y) / 2;
    d += `M ${midX} ${midY}`;

    for (let i = 0; i < len; i++) {
      const p1 = points[i];
      const p2 = points[(i + 1) % len];
      const mX = (p1.x + p2.x) / 2;
      const mY = (p1.y + p2.y) / 2;
      d += ` Q ${p1.x} ${p1.y} ${mX} ${mY}`;
    }
    return d;
  }

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

    spikeTimer += dt;
    elapsedTime += dt * currentSpeed;

    // Logic for AI Processing Burst (Reactive Spike)
    if (spikeTimer > 3500) {
      if (Math.random() > 0.3) {
        isSpiking = true;
        targetAmp = 25 + Math.random() * 10;
        targetSpeed = 0.004 + Math.random() * 0.003;
        
        if (badge) {
          badge.style.backgroundColor = 'var(--fp-text-color)';
          badge.style.color = 'var(--fp-accent-color)';
        }
        if (metricsBox) {
          metricsBox.style.borderColor = 'var(--fp-accent-color)';
          metricsBox.style.boxShadow = '0 0 20px rgba(0, 255, 255, 0.2)';
        }
        if (valNodes) {
          baseNodes += Math.floor(Math.random() * 500);
          valNodes.textContent = baseNodes.toLocaleString();
          valNodes.style.color = 'var(--fp-accent-color)';
        }
        if (valLoss) {
          const newLoss = (0.0001 + Math.random() * 0.002).toFixed(4);
          valLoss.textContent = newLoss;
          valLoss.style.color = 'var(--fp-accent-color)';
        }

      }
      spikeTimer = 0;
    }

    if (isSpiking && spikeTimer > 800) {
      isSpiking = false;
      targetAmp = 8;
      targetSpeed = 0.001;

      if (badge) {
        badge.style.backgroundColor = 'rgba(255, 255, 255, 0.8)';
        badge.style.color = 'var(--fp-text-color)';
      }
      if (metricsBox) {
        metricsBox.style.borderColor = 'var(--fp-secondary-color)';
        metricsBox.style.boxShadow = '0 10px 30px rgba(0, 0, 0, 0.02)';
      }
      if (valNodes) valNodes.style.color = 'var(--fp-text-color)';
      if (valLoss) valLoss.style.color = 'var(--fp-text-color)';
    }

    currentAmp += (targetAmp - currentAmp) * 0.05;
    currentSpeed += (targetSpeed - currentSpeed) * 0.05;

    const points = [];
    for (let i = 0; i < numPoints; i++) {
      const theta = (i / numPoints) * Math.PI * 2;
      const wave1 = Math.sin(theta * 3 + elapsedTime) * currentAmp;
      const wave2 = Math.cos(theta * 5 - elapsedTime * 1.5) * (currentAmp * 0.5);
      const wave3 = Math.sin(theta * 7 + elapsedTime * 2) * (currentAmp * 0.25);
      
      const rOffset = wave1 + wave2 + wave3;
      const rFinal = radius + rOffset;
      
      points.push({
        x: cx + rFinal * Math.cos(theta),
        y: cy + rFinal * Math.sin(theta)
      });
    }

    const d = createClosedPath(points);
    if (pathBg) pathBg.setAttribute('d', d);
    if (pathCore) pathCore.setAttribute('d', d);

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