<style>
    canvas {
      position: absolute;
      inset: 0;
      display: block;
    	z-index: 2 !important;
    }
  </style>

  
    <canvas id="globe"></canvas>
    
  

  <style>
  canvas {
    position: absolute;
    inset: 0;
    display: block;
    z-index: 3;
    background: transparent;
  }
</style>

<canvas id="globe"></canvas>

<script>
  const canvas = document.getElementById('globe');
  const ctx = canvas.getContext('2d');

  const globes = [
    {
      xPercent: 9,
      yPercent: 0,
      radius: 200,
      color: 'green',
      baseDotCount: 7000,
      dotMinSize: 1,
      dotMaxSize: 1.25,
      dotScaleFactor: 1,
      opacity: 1,
      rotationSpeed: 0.003,
      wobbleSpeed: 0.02,
      wobbleAmount: 0.1,
      orbitOffset: { x: 0.1, y: -0.05 },
      transparencyZone: { x: 0.5, y: 0.5, radius: 0.5 }
    },
    {
      xPercent: 15,
      yPercent: 90,
      radius: 400,
      color: 'orange',
      baseDotCount: 3000,
      dotMinSize: 1.5,
      dotMaxSize: 2,
      dotScaleFactor: 1.5,
      opacity: 1,
      rotationSpeed: 0.002,
      wobbleSpeed: 0.01,
      wobbleAmount: 0.1,
      orbitOffset: { x: 0, y: 0 },
      transparencyZone: { x: 0, y: 0, radius: 2 }
    },
    {
      xPercent: 90,
      yPercent: 70,
      radius: 350,
      color: 'green',
      baseDotCount: 3000,
      dotMinSize: 6,
      dotMaxSize: 6,
      dotScaleFactor: 1,
      opacity: 1,
      rotationSpeed: 0.001,
      wobbleSpeed: 0.005,
      wobbleAmount: 0.2,
      orbitOffset: { x: -0.1, y: 0.05 },
      transparencyZone: { x: 0, y: 0.9, radius: 2 }
    }
  ];

  function resizeCanvas() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    regenerateGlobeDots();
  }

  function regenerateGlobeDots() {
    const scaleFactor = Math.min(window.innerWidth / 1200, 1);
    globes.forEach(globe => {
      const count = Math.floor(globe.baseDotCount * scaleFactor);
      globe.dots = [];
      for (let i = 0; i < count; i++) {
        const theta = Math.random() * 2 * Math.PI;
        const phi = Math.acos(2 * Math.random() - 1);
        globe.dots.push({ theta, phi });
      }
    });
  }

  window.addEventListener('resize', resizeCanvas);
  resizeCanvas();

  let tick = 0;

  function interpolateGradient(r, palette = 'orange') {
    if (palette === 'green') {
      const t = r;
      return {
        r: Math.round(50 * (1 - t) + 180 * t),
        g: Math.round(255 * (1 - t) + 255 * t),
        b: Math.round(100 * (1 - t) + 50 * t),
      };
    }

    if (r < 0.5) {
      const t = r / 0.5;
      return {
        r: Math.round(255 * (1 - t) + 255 * t),
        g: Math.round(160 * (1 - t) + 100 * t),
        b: Math.round(0 * (1 - t) + 50 * t)
      };
    } else {
      const t = (r - 0.5) / 0.5;
      return {
        r: Math.round(255 * (1 - t) + 100 * t),
        g: Math.round(100 * (1 - t) + 20 * t),
        b: Math.round(50 * (1 - t))
      };
    }
  }

  function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height); // Transparent background

    ctx.save();

    globes.forEach((globe, index) => {
      const x = canvas.width * (globe.xPercent / 100);
      const y = canvas.height * (globe.yPercent / 100);
      const radius = globe.radius * (canvas.width / 1200);
      const {
        dots, color, dotMinSize, dotMaxSize, dotScaleFactor,
        opacity, rotationSpeed, wobbleSpeed, wobbleAmount,
        orbitOffset, transparencyZone
      } = globe;

      const rotation = tick * rotationSpeed;
      const wobble = Math.sin(tick * wobbleSpeed + index) * wobbleAmount;

      ctx.translate(x, y);

      for (const dot of dots) {
        const theta = dot.theta + rotation;
        const phi = dot.phi + wobble;

        const sx = radius * Math.sin(phi) * Math.cos(theta);
        const sy = radius * Math.sin(phi) * Math.sin(theta);
        const sz = radius * Math.cos(phi);

        const scale = 0.6 + sz / (2 * radius);
        let px = (sx + (orbitOffset?.x || 0) * radius) * scale;
        let py = (sy + (orbitOffset?.y || 0) * radius) * scale;

        // Transparency zone adjustment
        let transparencyFactor = 1;
        if (transparencyZone) {
          const zoneX = (transparencyZone.x - 0.5) * 2 * radius;
          const zoneY = (transparencyZone.y - 0.5) * 2 * radius;
          const zoneR = radius * transparencyZone.radius;
          const dx = px / scale - zoneX;
          const dy = py / scale - zoneY;
          const d = Math.sqrt(dx * dx + dy * dy);
          if (d < zoneR) {
            transparencyFactor = d / zoneR; // fades in
          }
        }

        const alpha = (0.4 + 0.6 * ((sz + radius) / (2 * radius))) * opacity * transparencyFactor;
        const dotRadius = dotMinSize + (dotMaxSize - dotMinSize) * scale * dotScaleFactor;
        const dist = Math.sqrt(px * px + py * py) / (radius * 1.2);
        const grad = interpolateGradient(Math.min(dist, 1), color);

        ctx.beginPath();
        ctx.arc(px, py, dotRadius, 0, Math.PI * 2);
        ctx.fillStyle = `rgba(${grad.r}, ${grad.g}, ${grad.b}, ${alpha})`;
        ctx.fill();
      }

      ctx.translate(-x, -y);
    });

    ctx.restore();
    tick++;
    requestAnimationFrame(draw);
  }

  draw();
</script>

canvas {
  pointer-events: none !important;
}