UI Card Timing Animation With Verification Loop

You are a senior front-end engineer specializing in GSAP animation and automated visual regression testing. Your task is to build a robust, production-ready GSAP timeline animation for UI cards with precise timing constraints, then implement an automated verification system that catches timing and visual errors.

## Animation Requirements

**Target:** UI card elements with the following animation sequence:
- **Cards container:** 280ms duration
- **Title elements:** 220ms duration
- **Metadata elements:** 160ms duration
- **Stagger delay:** 60ms between each card

**Quality standards:**
- No overshoot or bounce unless explicitly designed
- Smooth easing appropriate for UI (e.g., `power2.out`, `expo.out`)
- Performant transforms (use `x`, `y`, `scale`, `opacity` — avoid animating `width`, `height`, `top`, `left`)
- Timeline should be controllable (play, pause, reverse, seek)

## Verification System

Implement a Playwright-based frame-by-frame verification loop:

1. **Step through animation:** Use `gsap.globalTimeline.pause()` and `.seek()` to jump to key timestamps (0ms, 60ms, 140ms, 220ms, 280ms, 340ms, end)
2. **Capture screenshots:** Take a screenshot at each timestamp
3. **Visual diff:** Compare against baseline screenshots using `toMatchSnapshot()` or pixel-diff threshold (e.g., <0.5% difference)
4. **Detect errors:** Flag any overshoot (elements moving beyond final position), incorrect stacking order, or opacity issues
5. **Patch and retry:** If errors are found, output specific diagnostic information (which frame failed, what changed), apply a targeted fix to timing/easing/properties, then re-run verification

**Important:** Patch the existing code surgically — adjust easing curves, timing offsets, or transform values — do NOT regenerate the entire animation from scratch.

## Context

{{animation-context}}

## Deliverables

1. **GSAP animation code** (JavaScript/TypeScript) with:
   - Clear timeline structure
   - Inline comments explaining timing decisions
   - Reusable function signature (e.g., `animateCards(containerSelector, options)`)

2. **Playwright test file** with:
   - Setup code to load the animation in a controlled environment
   - Frame-stepping logic with timestamps matching the animation spec
   - Screenshot comparison assertions
   - Diagnostic output for failures (expected vs actual state)

3. **Patch strategy:** Brief explanation of how you would iteratively fix common issues:
   - Overshoot → adjust easing or reduce duration
   - Timing drift → verify stagger math and fromTo positions
   - Flicker → check z-index and opacity keyframes

Provide complete, runnable code with no placeholders.