Animated Background Glass

1/**
2 * AnimatedBackgroundGlass Component
3 *
4 * Animated gradient background with floating orbs for glassmorphism UIs.
5 * Provides an immersive atmosphere with theme-aware styling.
6 *
7 * ## Features
8 * - Theme-aware gradient background (glass/light/aurora)
9 * - 5 floating animated orbs with blur effects
10 * - Fixed positioning for full-page backgrounds
11 * - Performance-optimized CSS animations (8s cycle)
12 * - Configurable center orb visibility
13 *
14 * ## Orb Configuration
15 * - **Orb 1:** Top-left, 600px, purple/blue tones
16 * - **Orb 2:** Bottom-right, 700px, blue/violet tones, 2s delay
17 * - **Orb 3:** Center-right, 500px, pink/cyan tones, 4s delay
18 * - **Orb 4:** Bottom-left, 450px, cyan/violet tones, 6s delay
19 * - **Orb 5:** Center, 500px, violet (glass theme only by default)
20 *
21 * ## CSS Variables
22 * Customize colors via theme CSS variables:
23 * - `--orb-1` through `--orb-5`: Orb colors (OKLCH with opacity)
24 * - `--bg-from`, `--bg-via`, `--bg-to`: Gradient stops
25 *
26 * @example Basic usage
27 * ```tsx
28 * import { AnimatedBackgroundGlass } from 'shadcn-glass-ui'
29 *
30 * function App() {
31 *   return (
32 *     <>
33 *       <AnimatedBackgroundGlass />
34 *       <main className="relative z-10">
35 *         Your content here
36 *       </main>
37 *     </>
38 *   )
39 * }
40 * ```
41 *
42 * @example With center orb forced on
43 * ```tsx
44 * <AnimatedBackgroundGlass showCenterOrb={true} />
45 * ```
46 *
47 * @example With reduced opacity
48 * ```tsx
49 * <AnimatedBackgroundGlass className="opacity-50" />
50 * ```
51 *
52 * @example With dark overlay for better contrast
53 * ```tsx
54 * <>
55 *   <AnimatedBackgroundGlass />
56 *   <div className="fixed inset-0 bg-black/30 z-[1]" />
57 *   <main className="relative z-10">Content</main>
58 * </>
59 * ```
60 *
61 * @accessibility
62 * - Uses `aria-hidden="true"` as purely decorative element
63 * - Does not interfere with keyboard navigation
64 * - No interactive elements within the component
65 * - Animation uses CSS (respects `prefers-reduced-motion` when configured)
66 *
67 * @since v1.0.0
68 */
69 
70import { forwardRef, type CSSProperties } from 'react';
71import { cn } from '@/lib/utils';
72import { useTheme } from '@/lib/theme-context';
73import '@/glass-theme.css';
74 
75// ========================================
76// PROPS INTERFACE
77// ========================================
78 
79/**
80 * Props for AnimatedBackgroundGlass component.
81 *
82 * Extends standard div attributes (excluding `style`) for maximum flexibility.
83 * The `style` prop is excluded because the component uses internal inline styles
84// … truncated