Add playful UI animations with GSAP

[cscull]

Summary

• GSAP animation library added for spring physics, timeline sequencing, and staggered entrance effects
• Directional route transitions — pages slide left/right based on navigation direction with scale + opacity
• Data entrance animations on all 6 views — KPI cards cascade, chart bars spring from zero, table rows stagger in, donut chart segments reveal sequentially
• Micro-interactions — springy card hover lift, button click ripple (v-ripple directive), badge pulse glow for danger/warning states, filter select pulse on change
• Animated background — canvas dot-grid with sine-wave opacity and constellation lines
• Modal upgrades — spring scale entrance with backdrop blur on all 6 modals
• Accessibility — all animations respect prefers-reduced-motion, GSAP timelines cleaned up on component unmount

New files

• composables/usePageTransition.js — directional route transition logic
• composables/useAnimations.js — reusable GSAP presets with cleanup
• components/AnimatedBackground.vue — canvas dot-grid wave background
• directives/vRipple.js — click ripple effect directive

Test plan

• Navigate between all 6 tabs — verify smooth directional slide transitions
• Watch Dashboard load — KPI cards cascade, progress bars spring, donut animates
• Hover cards — verify springy lift + shadow effect
• Click "Create PO" buttons — verify ripple effect
• Check Low Stock / Backordered badges — pulsing glow animation
• Open/close any modal — spring entrance with backdrop blur
• Change a filter dropdown — select element pulses briefly
• Verify background dot-grid animation is visible and subtle
• Test with DevTools "prefers-reduced-motion: reduce" — animations should be skipped

🤖 Generated with Claude Code