.fp-edtech-cloud-storage-backup-ui {
  --fp-container-width: 100%;
  --fp-max-width: 500px;
  --fp-aspect-ratio: 1 / 1;

  --fp-primary-color: #f1f5f9;
  --fp-secondary-color: #e2e8f0;
  --fp-muted-color: #94a3b8;
  --fp-soft-color: #ffffff;
  --fp-background-color: transparent;

  --fp-info-color: #334155;
  --fp-warning-color: #64748b;
  --fp-danger-color: #2c5282;
  --fp-accent-color: #4a6da7;

  all: unset;
  display: block;
  width: var(--fp-container-width);
  max-width: var(--fp-max-width);
  margin: 0 auto;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  box-sizing: border-box;
  color: var(--fp-info-color);
}

.fp-edtech-cloud-storage-backup-ui * {
  box-sizing: border-box;
}

.fp-edtech-cloud-storage-backup-ui-stage {
  position: relative;
  width: 100%;
  aspect-ratio: var(--fp-aspect-ratio);
  background: var(--fp-primary-color);
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 12px 12px 24px rgba(148, 163, 184, 0.2), -12px -12px 24px rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.fp-edtech-cloud-storage-backup-ui-ambient {
  position: absolute;
  inset: -10%;
  background: radial-gradient(circle at center, rgba(74, 109, 167, 0.03) 0%, transparent 60%);
  animation: fp-edtech-cloud-storage-backup-ui-breathe 6s ease-in-out infinite alternate;
  pointer-events: none;
}

.fp-edtech-cloud-storage-backup-ui-ring {
  position: absolute;
  width: 75%;
  height: 75%;
  border-radius: 50%;
  box-shadow: inset 6px 6px 12px rgba(148, 163, 184, 0.2), inset -6px -6px 12px rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
}

.fp-edtech-cloud-storage-backup-ui-ring-inner {
  width: 85%;
  height: 85%;
  border-radius: 50%;
  background: var(--fp-primary-color);
  box-shadow: 6px 6px 12px rgba(148, 163, 184, 0.2), -6px -6px 12px rgba(255, 255, 255, 0.8);
  position: relative;
}

.fp-edtech-cloud-storage-backup-ui-spinner {
  position: absolute;
  top: -10%;
  left: -10%;
  width: 120%;
  height: 120%;
  border-radius: 50%;
  border: 2px dashed rgba(74, 109, 167, 0.15);
  animation: fp-edtech-cloud-storage-backup-ui-spin 30s linear infinite;
  pointer-events: none;
}

.fp-edtech-cloud-storage-backup-ui-core {
  position: relative;
  z-index: 10;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.fp-edtech-cloud-storage-backup-ui-cloud-icon {
  position: relative;
  width: 100px;
  height: 70px;
  margin-top: 20px;
}

.fp-edtech-cloud-storage-backup-ui-cloud-svg {
  width: 100%;
  height: 100%;
  fill: var(--fp-primary-color);
  filter: drop-shadow(4px 4px 6px rgba(148, 163, 184, 0.3)) drop-shadow(-4px -4px 6px rgba(255, 255, 255, 0.9));
}

.fp-edtech-cloud-storage-backup-ui-status {
  margin-top: 30px;
  text-align: center;
}

.fp-edtech-cloud-storage-backup-ui-percent {
  font-size: 2.5rem;
  font-weight: 300;
  color: var(--fp-danger-color);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-shadow: 1px 1px 2px rgba(255,255,255,0.8), -1px -1px 2px rgba(0,0,0,0.05);
}

.fp-edtech-cloud-storage-backup-ui-label {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--fp-muted-color);
  text-transform: uppercase;
  margin-top: 8px;
}

.fp-edtech-cloud-storage-backup-ui-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  pointer-events: none;
  z-index: 5;
}

@keyframes fp-edtech-cloud-storage-backup-ui-breathe {
  0% { transform: scale(1); opacity: 0.5; }
  100% { transform: scale(1.05); opacity: 1; }
}

@keyframes fp-edtech-cloud-storage-backup-ui-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@media (max-width: 400px) {
  .fp-edtech-cloud-storage-backup-ui-ring {
    width: 85%;
    height: 85%;
  }
  .fp-edtech-cloud-storage-backup-ui-percent {
    font-size: 2rem;
  }
}

document.querySelectorAll('.fp-edtech-cloud-storage-backup-ui').forEach(root => {
  const canvas = root.querySelector('.fp-edtech-cloud-storage-backup-ui-canvas');
  const percentText = root.querySelector('.fp-edtech-cloud-storage-backup-ui-percent');
  const labelText = root.querySelector('.fp-edtech-cloud-storage-backup-ui-label');
  
  if (!canvas || !percentText) return;

  const ctx = canvas.getContext('2d');
  let animationFrameId;
  let isVisible = true;
  
  let drops = [];
  let particles = [];
  let currentPercent = 0;
  let targetPercent = 0;
  
  const dropColor = '#4a6da7';

  const resizeCanvas = () => {
    const rect = canvas.parentElement.getBoundingClientRect();
    canvas.width = rect.width * window.devicePixelRatio;
    canvas.height = rect.height * window.devicePixelRatio;
    ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
    canvas.style.width = `${rect.width}px`;
    canvas.style.height = `${rect.height}px`;
  };

  const animate = () => {
    if (!isVisible) return;
    
    const width = canvas.width / window.devicePixelRatio;
    const height = canvas.height / window.devicePixelRatio;
    
    ctx.clearRect(0, 0, width, height);
    
    if (Math.random() < 0.01 && targetPercent < 100) {
        targetPercent += Math.floor(Math.random() * 5) + 1;
        if (targetPercent > 100) targetPercent = 100;
    }

    if (currentPercent < targetPercent) {
        currentPercent += 0.2;
        if (currentPercent > 100) currentPercent = 100;
        percentText.innerText = Math.floor(currentPercent) + '%';
    } else if (currentPercent >= 100) {
        percentText.innerText = '100%';
        if(labelText) labelText.innerText = 'Backup Complete';
    }

    if (currentPercent < 100 && Math.random() < 0.04 && drops.length < 2) {
        drops.push({
            x: width / 2 + (Math.random() * 20 - 10),
            y: -10,
            vy: 2,
            radius: 3 + Math.random() * 2
        });
    }

    const cloudHitY = height / 2 - 10;

    for (let i = drops.length - 1; i >= 0; i--) {
        let drop = drops[i];
        drop.y += drop.vy;
        drop.vy += 0.3;

        ctx.beginPath();
        ctx.fillStyle = dropColor;
        ctx.ellipse(drop.x, drop.y, drop.radius * 0.8, drop.radius + drop.vy * 0.5, 0, 0, Math.PI * 2);
        ctx.fill();

        if (drop.y > cloudHitY) {
            for (let p = 0; p < 6; p++) {
                particles.push({
                    x: drop.x,
                    y: cloudHitY,
                    vx: (Math.random() - 0.5) * 4,
                    vy: -Math.random() * 3 - 1,
                    radius: Math.random() * 2 + 1,
                    alpha: 1
                });
            }
            drops.splice(i, 1);
        }
    }

    for (let i = particles.length - 1; i >= 0; i--) {
        let p = particles[i];
        p.x += p.vx;
        p.y += p.vy;
        p.vy += 0.2;
        p.alpha -= 0.03;

        if (p.alpha <= 0) {
            particles.splice(i, 1);
            continue;
        }

        ctx.beginPath();
        ctx.fillStyle = `rgba(74, 109, 167, ${p.alpha})`;
        ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);
        ctx.fill();
    }

    animationFrameId = requestAnimationFrame(animate);
  };

  const handleVisibilityChange = () => {
    isVisible = document.visibilityState === 'visible';
    if (isVisible) {
      animate();
    } else {
      cancelAnimationFrame(animationFrameId);
    }
  };

  const observer = new MutationObserver(() => {
    if (!document.body.contains(root)) {
      cancelAnimationFrame(animationFrameId);
      window.removeEventListener('resize', resizeCanvas);
      document.removeEventListener('visibilitychange', handleVisibilityChange);
      observer.disconnect();
    }
  });

  window.addEventListener('resize', resizeCanvas);
  document.addEventListener('visibilitychange', handleVisibilityChange);
  observer.observe(document.body, { childList: true, subtree: true });

  resizeCanvas();
  animate();
});