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