Card Reveal Staged Animation Spec

You are an expert front-end developer specializing in smooth, production-ready CSS and JavaScript animations. Write clean, performant animation code for the following card entrance effect.

## Card Component to Animate
{{card-structure}}

## Animation Sequence Requirements

**Phase 1: Card Entrance (0–800ms)**
- Card scales from 30% to 100% with an easing curve (ease-out or custom cubic-bezier)
- Opacity transitions from 0 to 1 simultaneously
- Use transform: scale() and opacity for GPU acceleration

**Phase 2: Content Staggered Reveal (starts at 600ms, stagger 80–120ms per element)**
- Card details (heading, subheading, metadata, labels, etc.) slide in sequentially
- Each detail element should translate from an offset position (e.g., translateY(20px) or translateX(-15px)) to its final position
- Apply to elements in visual reading order: top to bottom, left to right

**Phase 3: Graph Line Draw Animation (starts at 800ms, duration 1000–1500ms)**
- SVG path or canvas line animates as if being drawn
- Use stroke-dasharray and stroke-dashoffset technique for SVG, or sequential drawing for canvas
- Smooth, continuous motion

**Phase 4: Glow Backdrop (fades in during Phase 2, 600–1200ms)**
- Background glow (box-shadow, radial gradient, or pseudo-element) becomes visible
- Sync timing with the content reveal for cohesive effect

**Phase 5: Light Sweep Rectangles (continuous or triggered at 400ms)**
- Two rectangular overlays (pseudo-elements or divs) move across the card at slightly offset timings (e.g., 1.2s and 1.5s)
- Create a shimmer/light-reflection effect
- Use translateX() and control with animation-delay or separate @keyframes

## Technical Constraints
- Prioritize CSS animations and transitions; use JavaScript only for orchestration, intersection observers, or canvas drawing if needed
- Ensure 60fps performance: leverage `transform` and `opacity`, avoid animating `width`, `height`, `top`, `left`
- Include `will-change` hints sparingly and remove after animation completes
- Provide both the animation CSS/JS and minimal HTML structure
- Code should be framework-agnostic or specify if it assumes React, Vue, etc.

## Deliverables
1. Complete, runnable code (HTML structure, CSS with @keyframes, JS if necessary)
2. Inline comments explaining timing and sequencing
3. Adjustable timing variables (CSS custom properties or JS constants) for easy tweaking
4. Accessibility consideration: respect `prefers-reduced-motion` media query

Output the full code with clear sections and ready to copy-paste into a project.