making it mobile friendly

css/matrix.css

@@ -14,8 +14,36 @@
     filter: brightness(0.7) saturate(1.05);
 }
 
-@media (prefers-reduced-motion: reduce) {
-    .matrix-canvas {
-        filter: brightness(0.6) saturate(0.9);
+/* CSS only on phones/tablets and for reduced motion: no canvas work. */
+/* Keep this query in sync with js/flowfield.js. */
+@media (max-width: 1024px), (pointer: coarse), (prefers-reduced-motion: reduce) {
+    body {
+        background:
+            radial-gradient(ellipse at 0% 0%, rgba(79, 195, 247, 0.18), transparent 55%),
+            radial-gradient(ellipse at 100% 65%, rgba(118, 75, 162, 0.22), transparent 60%),
+            linear-gradient(150deg, #0b1220, #100c1c);
+    }
+
+    .matrix-canvas,
+    .avatar .glitch-layer {
+        display: none;
+    }
+
+    .main-container .glass,
+    .avatar::after,
+    .homelab-background,
+    .homelab-background::after,
+    .homelab-title {
+        animation: none;
+    }
+
+    .main-container .glass {
+        will-change: auto;
+    }
+
+    /* Avoid blur compositing work while scrolling. */
+    body .main-container :is(.glass, .content, .projects-section, .homelab-section, .btn) {
+        backdrop-filter: none;
+        -webkit-backdrop-filter: none;
     }
 }