const canvas = document.getElementById('matrix-rain');

if (canvas && !window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
  const ctx = canvas.getContext('2d');
  const chars = 'アカサタナハマヤラワ0123456789ABCDEFcacto$#@%&*'.split('');
  const fontSize = 15;
  const bg = getComputedStyle(document.documentElement).getPropertyValue('--color-bg').trim();
  const accent = getComputedStyle(document.documentElement).getPropertyValue('--color-accent').trim();
  const silver = getComputedStyle(document.documentElement).getPropertyValue('--color-silver').trim();

  let columns = 0;
  let drops = [];

  function setup() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    columns = Math.floor(canvas.width / fontSize);
    drops = new Array(columns).fill(0).map(() => Math.floor((Math.random() * canvas.height) / fontSize));
  }

  function draw() {
    ctx.fillStyle = `${bg}cc`;
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.font = `${fontSize}px monospace`;

    for (let i = 0; i < columns; i++) {
      const char = chars[Math.floor(Math.random() * chars.length)];
      const x = i * fontSize;
      const y = drops[i] * fontSize;

      ctx.fillStyle = Math.random() > 0.98 ? silver : accent;
      ctx.fillText(char, x, y);

      if (y > canvas.height && Math.random() > 0.975) {
        drops[i] = 0;
      } else {
        drops[i]++;
      }
    }
  }

  setup();
  window.addEventListener('resize', setup);
  setInterval(draw, 50);
}