/* stars.js — static starry background for 6bit.ch
   Requires a <canvas id="stars"> in your HTML:
     position: fixed; inset: 0; width: 100%; height: 100%;
     z-index: -2; pointer-events: none; */

(function () {
  const canvas = document.getElementById('stars');
  if (!canvas) return;
  const ctx = canvas.getContext('2d');

  /* ── CONFIG ───────────────────────────────────────────────────── */
  const CONFIG = {
    count:          280,
    colorVariation: 1.0,   // 0 = pure white, 1 = full spectral color
    bgColor:        '#101010',
  };

  /* ── PALETTE (stellar spectral classes) ──────────────────────── */
  const PALETTE = [
    [160, 190, 255], // deep blue (O/B)
    [200, 220, 255], // blue-white (A)
    [255, 244, 180], // yellow (F/G)
    [255, 210, 140], // orange (K)
    [255, 160, 120], // red-orange (M)
    [140, 220, 255], // cyan-blue
    [255, 230, 255], // violet-white
  ];

  function randColor() {
    const base = PALETTE[Math.floor(Math.random() * PALETTE.length)];
    const m = CONFIG.colorVariation;
    return base.map(c => Math.round(255 * (1 - m) + c * m));
  }

  let W, H;

  function resize() {
    W = canvas.width  = window.innerWidth;
    H = canvas.height = window.innerHeight;
    draw();
  }

  function draw() {
    if (CONFIG.bgColor) {
      ctx.fillStyle = CONFIG.bgColor;
      ctx.fillRect(0, 0, W, H);
    } else {
      ctx.clearRect(0, 0, W, H);
    }

    for (let i = 0; i < CONFIG.count; i++) {
      const r = Math.random();
      const size = r < 0.65
        ? 0.45 + Math.random() * 0.30
        : r < 0.90
          ? 0.85 + Math.random() * 0.30
          : 1.40 + Math.random() * 0.40;

      const x     = Math.random() * W;
      const y     = Math.random() * H;
      const alpha = 0.35 + Math.random() * 0.65;
      const [cr, cg, cb] = randColor();

      /* soft halo on brighter stars */
      if (size > 1.0) {
        const halo = ctx.createRadialGradient(x, y, 0, x, y, size * 2.5);
        halo.addColorStop(0, `rgba(${cr},${cg},${cb},${(alpha * 0.45).toFixed(3)})`);
        halo.addColorStop(1, `rgba(${cr},${cg},${cb},0)`);
        ctx.beginPath();
        ctx.arc(x, y, size * 2.5, 0, Math.PI * 2);
        ctx.fillStyle = halo;
        ctx.fill();
      }

      /* star core */
      ctx.beginPath();
      ctx.arc(x, y, size, 0, Math.PI * 2);
      ctx.fillStyle = `rgba(${cr},${cg},${cb},${alpha.toFixed(3)})`;
      ctx.fill();
    }
  }

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