make background less distracting on mobile

src/components/interactive-background/interactive-background.ts

@@ -288,6 +288,7 @@ export class InteractiveBackground implements AfterViewInit, OnDestroy {
   private pointerActive = false;
   private activeTouchId: number | null = null;
   private reducedMotion = false;
+  private lowMotionMobile = false;
   private mediaQuery!: MediaQueryList;
   private readonly pointerExcludeSelector = '[data-disable-bg-pointer]';
 
@@ -296,12 +297,14 @@ export class InteractiveBackground implements AfterViewInit, OnDestroy {
     const context = canvas.getContext('2d');
 
     this.mediaQuery = this.getMediaQuery('(prefers-reduced-motion: reduce)');
+    this.lowMotionMobile = this.getMediaQuery('(max-width: 760px), (pointer: coarse) and (hover: none)').matches;
     this.reducedMotion = this.mediaQuery.matches;
 
     if (context) {
       const area = window.innerWidth * window.innerHeight;
       const dynamicCount = Math.round(Math.min(170, Math.max(80, area / 14500)));
-      const particleCount = this.reducedMotion ? 42 : dynamicCount;
+      const mobileCount = Math.round(Math.min(54, Math.max(28, dynamicCount * 0.4)));
+      const particleCount = this.reducedMotion ? 42 : (this.lowMotionMobile ? mobileCount : dynamicCount);
       this.particleEngine = new ParticleEngine(context, particleCount);
       this.resizeCanvas();
       this.renderInitialFrame();