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

  const chars =
    "アァカサタナハマヤワヰヱヲABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";

  const fontSize = 16;
  let columns;
  let drops;

  function init() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    columns = Math.floor(canvas.width / fontSize);

    // cinematic entrance (rain starts above the viewport)
    drops = Array.from({ length: columns }, () => Math.floor(Math.random() * -80));
  }

  init();
  window.addEventListener("resize", init);

  function draw() {
    ctx.fillStyle = "rgba(0,0,0,0.06)";
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
    gradient.addColorStop(0, "#3aa3eb");
    gradient.addColorStop(1, "#042537");

    ctx.font = fontSize + "px monospace";

    for (let i = 0; i < drops.length; i++) {
      const x = i * fontSize;
      const y = drops[i] * fontSize;

      const ch = chars.charAt(Math.floor(Math.random() * chars.length));

      ctx.save();
      ctx.fillStyle = gradient;
      ctx.globalAlpha = 0.9;
      ctx.shadowColor = "#3aa3eb";
      ctx.shadowBlur = 8;
      ctx.fillText(ch, x, y);
      ctx.restore();

      if (y > canvas.height && Math.random() > 0.985) {
        drops[i] = Math.floor(Math.random() * -40);
      }

      drops[i]++;
    }
  }

  setInterval(draw, 40);
</script>