add hover delay to carousel and remove dynamic background

src/components/tech-stack-carousel/tech-stack-carousel.ts

@@ -20,7 +20,9 @@ export class TechStackCarousel implements AfterViewInit, OnDestroy {
   private autoScrollFrameId: number | null = null;
   private startAutoScrollTimeout: ReturnType<typeof setTimeout> | null = null;
   private delayedResumeTimeout: ReturnType<typeof setTimeout> | null = null;
+  private delayedHoverPauseTimeout: ReturnType<typeof setTimeout> | null = null;
   private delayedResumeAt = 0;
+  private isHoveringCarousel = false;
   private lastAutoScrollTime = 0;
   private virtualScrollLeft = 0;
   private currentAutoScrollSpeedPxPerSecond = 0;
@@ -32,6 +34,7 @@ export class TechStackCarousel implements AfterViewInit, OnDestroy {
   private readonly speedRampDurationMs = 420;
   private readonly speedStopThresholdPxPerSecond = 0.5;
   private readonly touchScrollResumeDelayMs = 1200;
+  private readonly hoverPauseDelayMs = 300;
   isAutoScrolling = false;
   showLeftFade = false;
   showRightFade = false;
@@ -77,6 +80,7 @@ export class TechStackCarousel implements AfterViewInit, OnDestroy {
     }
 
     this.clearScheduledResume();
+    this.clearScheduledHoverPause();
     this.pauseAutoScroll();
     this.isAutoScrolling = false;
   }
@@ -121,14 +125,32 @@ export class TechStackCarousel implements AfterViewInit, OnDestroy {
   }
 
   onHoverStart(): void {
-    this.pauseAutoScroll();
+    this.isHoveringCarousel = true;
     this.clearScheduledResume();
+    this.clearScheduledHoverPause();
+
+    this.delayedHoverPauseTimeout = setTimeout(() => {
+      this.delayedHoverPauseTimeout = null;
+
+      if (!this.isHoveringCarousel) {
+        return;
+      }
+
+      this.pauseAutoScroll();
+    }, this.hoverPauseDelayMs);
   }
 
   onHoverEnd(): void {
+    this.isHoveringCarousel = false;
+    this.clearScheduledHoverPause();
     this.scheduleResume(1000);
   }
 
+  onFocusIn(): void {
+    this.pauseAutoScroll();
+    this.clearScheduledResume();
+  }
+
   onInteractionClick(): void {
     this.pauseAutoScroll();
     this.scheduleResume(2000);
@@ -248,6 +270,13 @@ export class TechStackCarousel implements AfterViewInit, OnDestroy {
     this.delayedResumeAt = 0;
   }
 
+  private clearScheduledHoverPause(): void {
+    if (this.delayedHoverPauseTimeout !== null) {
+      clearTimeout(this.delayedHoverPauseTimeout);
+      this.delayedHoverPauseTimeout = null;
+    }
+  }
+
   private updateAutoScrollSpeed(deltaMs: number): void {
     if (deltaMs <= 0) {
       return;