fix: align matrix rain implementation with mockup-a.html

Simplified and aligned the matrix rain implementation to match mockup-a.html exactly:
- Use width: 100%; height: 100% in CSS instead of inset/display properties for more reliable sizing
- Simplify canvas init() to use offsetWidth/offsetHeight directly without fallbacks
- Use getThemeColors() helper function for consistent color management
- Simplify tick() to only use the two colors (bright green head at 4%, purple trail)
- Remove unused data-mode attribute logic
- Streamline event listeners to match mockup structure

This matches the proven working implementation from the mockup.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

2 files changed, 21 insertions, 39 deletions

diff --git a/assets/css/components/hero.css b/assets/css/components/hero.css
index d6cd3c0..6984647 100644
--- a/assets/css/components/hero.css
+++ b/assets/css/components/hero.css
@@ -25,11 +25,13 @@
 
 #matrix-canvas {
   position: absolute;
-  inset: 0;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
   opacity: 0.13;
   pointer-events: none;
   z-index: 1;
-  display: block;
 }
 
 html.theme-light #matrix-canvas {
diff --git a/assets/js/matrix-rain.js b/assets/js/matrix-rain.js
index 18fc3ff..603e79e 100644
--- a/assets/js/matrix-rain.js
+++ b/assets/js/matrix-rain.js
@@ -7,67 +7,47 @@
   const ctx   = canvas.getContext('2d');
   const CHARS = 'アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン0123456789ABCDEF<>/\\|{}[]$#@!';
   const FS    = 14;  // font size / column width in px
-  const mode  = canvas.getAttribute('data-mode') || 'background';  // 'hero' or 'background'
   let cols, drops, raf;
 
   function init() {
-    if (mode === 'hero') {
-      // Hero mode: size relative to parent container
-      const rect = canvas.getBoundingClientRect();
-      canvas.width  = rect.width || canvas.offsetWidth || window.innerWidth;
-      canvas.height = rect.height || canvas.offsetHeight || window.innerHeight;
-    } else {
-      // Background mode: size to full viewport
-      canvas.width  = window.innerWidth;
-      canvas.height = window.innerHeight;
-    }
+    canvas.width  = canvas.offsetWidth;
+    canvas.height = canvas.offsetHeight;
     cols  = Math.floor(canvas.width / FS) + 1;
     drops = Array.from({ length: cols }, () => Math.random() * -(canvas.height / FS));
   }
 
+  function getThemeColors() {
+    const isDark = !document.documentElement.classList.contains('theme-light');
+    return {
+      bgFill: isDark ? 'rgba(6, 11, 16, 0.07)' : 'rgba(240, 244, 248, 0.07)',
+    };
+  }
+
   function tick() {
-    const light = document.documentElement.classList.contains('theme-light');
-    // Fade trail: near-transparent fill each frame
-    ctx.fillStyle = light ? 'rgba(240,244,248,0.07)' : 'rgba(6,11,16,0.055)';
+    const colors = getThemeColors();
+    ctx.fillStyle = colors.bgFill;
     ctx.fillRect(0, 0, canvas.width, canvas.height);
     ctx.font = `${FS}px "JetBrains Mono", monospace`;
 
     for (let i = 0; i < cols; i++) {
       const char = CHARS[Math.floor(Math.random() * CHARS.length)];
-      // 4% chance of bright "head" char, otherwise use accent color
-      ctx.fillStyle = Math.random() > 0.96
-        ? (light ? '#008f5a' : '#00ff88')   // bright green head
-        : (light ? '#7c3aed' : '#a855f7');  // purple trail
+      // Occasional bright green "head", otherwise purple
+      ctx.fillStyle = Math.random() > 0.96 ? '#00ff88' : '#a855f7';
       ctx.fillText(char, i * FS, drops[i] * FS);
 
       if (drops[i] * FS > canvas.height && Math.random() > 0.975) {
-        drops[i] = Math.random() * -20;  // reset column randomly
+        drops[i] = Math.random() * -20;
       }
-      drops[i] += 0.5;  // slow fall speed
+      drops[i] += 0.5;
     }
     raf = requestAnimationFrame(tick);
   }
 
-  // Listen for theme changes and reinit
-  window.addEventListener('theme-changed', function() {
-    // Matrix rain auto-colors based on theme-light class
-  }, { passive: true });
-
   init();
-  window.addEventListener('resize', () => {
-    cancelAnimationFrame(raf);
-    init();
-    tick();
-  }, { passive: true });
-
+  window.addEventListener('resize', () => { cancelAnimationFrame(raf); init(); tick(); }, { passive: true });
   document.addEventListener('visibilitychange', () => {
-    if (document.hidden) {
-      cancelAnimationFrame(raf);
-    } else {
-      tick();
-    }
+    if (document.hidden) cancelAnimationFrame(raf); else tick();
   });
-
   tick();
 
   window.MatrixRain = { init, tick };