Enhance Confetti Animation Logic in AreaTabs Component

- Updated confetti animation to trigger only on desktop devices, reducing distraction on mobile.
- Added media query check to ensure confetti effects are only applied at the md breakpoint and above, improving user experience across different screen sizes.

app/components/navigation/AreaTabs.vue

@@ -146,14 +146,17 @@ watch(visibleAreas, (newAreas, oldAreas) => {
     newlyAddedAreaIds.value = addedIds
 
     // Trigger confetti for each new tab with staggered delay (wave effect)
-    addedIds.forEach((areaId, index) => {
+    // Only on desktop (md breakpoint and up) - too distracting on mobile
-      setTimeout(() => {
+    if (window.matchMedia('(min-width: 768px)').matches) {
-        const element = tabRefs.value[areaId]
+      addedIds.forEach((areaId, index) => {
-        if (element) {
+        setTimeout(() => {
-          triggerConfetti(element)
+          const element = tabRefs.value[areaId]
-        }
+          if (element) {
-      }, 300 + (index * 150)) // Stagger: 300ms, 450ms, 600ms, ...
+            triggerConfetti(element)
-    })
+          }
+        }, 300 + (index * 150)) // Stagger: 300ms, 450ms, 600ms, ...
+      })
+    }
 
     // Clear all highlights after animation completes
     // Animation timeline: glow 2x + pulse 2x + opacity fade = 2.0s