fix: improve matrix canvas sizing and z-index for hero section

- Add z-index: 1 to matrix canvas to ensure it renders above the dot grid background but below content
- Add display: block to ensure canvas renders properly
- Fix canvas sizing logic to use getBoundingClientRect() as primary method for hero mode, with fallbacks to offsetWidth/height and viewport dimensions
- This ensures the canvas gets proper dimensions even if offset measurements are unavailable during initialization

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

2 files changed, 6 insertions, 3 deletions

diff --git a/assets/css/components/hero.css b/assets/css/components/hero.css
index b9ecb24..d6cd3c0 100644
--- a/assets/css/components/hero.css
+++ b/assets/css/components/hero.css
@@ -28,6 +28,8 @@
   inset: 0;
   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 742b0bd..18fc3ff 100644
--- a/assets/js/matrix-rain.js
+++ b/assets/js/matrix-rain.js
@@ -12,9 +12,10 @@
 
   function init() {
     if (mode === 'hero') {
-      // Hero mode: size relative to canvas element's offsetWidth
-      canvas.width  = canvas.offsetWidth;
-      canvas.height = canvas.offsetHeight;
+      // 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;