// L'ora come colore, i minuti come ampiezza, i secondi come respiro.
// Niente cifre: dopo tre giorni la si legge senza pensarci.

function disegna(ctx, lato) {
  const ora = new Date();
  const h = ora.getHours() + ora.getMinutes() / 60;
  const m = ora.getMinutes() + ora.getSeconds() / 60;
  const s = ora.getSeconds() + ora.getMilliseconds() / 1000;

  // 24 ore distribuite sul giro completo delle tinte:
  // mezzanotte blu profondo, mezzogiorno giallo pieno
  const tinta = (220 + (h / 24) * 360) % 360;
  const luce = 12 + Math.sin((h / 24) * Math.PI) * 46;

  ctx.fillStyle = `hsl(${tinta} 55% ${luce}%)`;
  ctx.fillRect(0, 0, lato, lato);

  // i minuti aprono e chiudono l'arco
  const r = lato * 0.3;
  const apertura = (m / 60) * Math.PI * 2;
  ctx.strokeStyle = `hsl(${(tinta + 180) % 360} 80% ${luce > 40 ? 20 : 86}%)`;
  ctx.lineWidth = lato * 0.045;
  ctx.lineCap = "round";
  ctx.beginPath();
  ctx.arc(lato / 2, lato / 2, r, -Math.PI / 2, -Math.PI / 2 + apertura);
  ctx.stroke();

  // i secondi: il disco centrale respira, così si vede che è vivo
  const respiro = 1 + Math.sin((s / 60) * Math.PI * 2) * 0.08;
  ctx.fillStyle = `hsl(${(tinta + 180) % 360} 80% ${luce > 40 ? 20 : 86}%)`;
  ctx.beginPath();
  ctx.arc(lato / 2, lato / 2, lato * 0.07 * respiro, 0, 6.2832);
  ctx.fill();

  requestAnimationFrame(() => disegna(ctx, lato));
}