perf: optimize animated backgrounds for mobile — reduce GPU load and memory pressure

- Add useAnimationLoop hook with FPS throttling (30fps mobile/60fps desktop),
  Page Visibility API pause, and Telegram WebApp activated/deactivated events
- Add useAnimationPause hook for CSS/Framer Motion components
- Validate animation config with type allowlist, numeric clamping, JSON size guard
- Move ctx.setTransform from per-frame to init/resize across all canvas backgrounds
- Move ctx.lineCap to init/resize in vortex, replace Float32Array.set with direct writes
- Pre-compute shooting star delay instead of per-frame Math.random
- Cap DPR to 1.5 on mobile, reduce particle counts, cap blur to 4px
- Disable aurora CSS animation on mobile, remove blur on mobile spotlight
- Remove mix-blend-hard-light on mobile gradient-animation
- Add NaN/Infinity guard to clampNumber, remove dead CSS variables
- Add conditional unmount for Framer Motion backgrounds when paused
- Add animationPlayState pause for CSS-animated backgrounds

src/components/ui/backgrounds/meteors.tsx

@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
 import { sanitizeColor, clampNumber } from './types';
+import { useAnimationPause } from '@/hooks/useAnimationLoop';
 
 interface Props {
   settings: Record<string, unknown>;
@@ -8,6 +9,7 @@ interface Props {
 export default function Meteors({ settings }: Props) {
   const count = clampNumber(settings.count, 1, 50, 20);
   const meteorColor = sanitizeColor(settings.meteorColor, '#ffffff');
+  const paused = useAnimationPause();
 
   const meteors = useMemo(
     () =>
@@ -31,6 +33,7 @@ export default function Meteors({ settings }: Props) {
             left: meteor.left,
             animationDelay: meteor.delay,
             animationDuration: meteor.duration,
+            animationPlayState: paused ? 'paused' : 'running',
             width: meteor.size,
             height: meteor.size,
             boxShadow: `0 0 0 1px rgba(255,255,255,0.05), 0 0 2px 1px ${meteorColor}20, 0 0 20px 2px ${meteorColor}40`,