Build a 5.0s motion-graphics video: Two cards tilt in from opposite sides; the old way fades to grey while the new one lights up.

## Skills
- Use the `remotion-best-practices` skill for all composition code. If this project uses HyperFrames instead of Remotion, use `/hyperframes` with `hyperframes-animation` and keep the same beats.
- Use the `motion-graphics` skill (if installed) for motion direction and polish.
- If there is no Remotion project yet, scaffold one first with the `remotion-create` workflow, then open Studio so I can watch the preview while you build.

## Hooks (set up first)
Merge this into `.claude/settings.json` so every edit is type-checked and every finished turn renders a verification still:
```json
{
  "hooks": {
    "PostToolUse": [
      {
        "matcher": "Edit|Write|MultiEdit",
        "hooks": [
          {
            "type": "command",
            "command": "npx tsc --noEmit -p . 2>&1 | head -30"
          }
        ]
      }
    ],
    "Stop": [
      {
        "hooks": [
          {
            "type": "command",
            "command": "npx remotion still BeforeAfter out/BeforeAfter-check.png --frame=105 2>&1 | tail -5"
          }
        ]
      }
    ]
  }
}
```

## Composition
- id `BeforeAfter`, 1080x1920 (9:16), 30 fps, 150 frames.
- Define a zod schema for the props below and pass them as `defaultProps`, so the copy stays editable in Studio.
- Default props:
```json
{
  "title": "Your mornings, upgraded",
  "beforeLabel": "Before",
  "beforeItems": [
    "Lumpy foam",
    "Sad latte art",
    "Milk skin"
  ],
  "afterLabel": "Cloud Oat",
  "afterItems": [
    "Silky microfoam",
    "Pours like dairy",
    "No skin, ever"
  ]
}
```

## Look
- Colours: background #EAFBF4, surface #C6F0DD, text #0F2A20, single accent #0E9F6E. Use only these.
- Typeface: Bricolage Grotesque (load it with `@remotion/google-fonts`), heavy weights for display text, tight negative tracking.
- Motion vocabulary: before and after comparison, two rounded cards sliding in from opposite sides with opposing 3D tilts, list items rising inside each card, the before card desaturates to grey and sinks slightly while the after card scales up in bright accent colour with a ring pulse, soft pastel background.

## Beats
- 0.0s: title "Your mornings, upgraded" rises in.
- 0.1s: two cards slide in from opposite sides with opposing 3D tilts: "Before" ("Lumpy foam", "Sad latte art", "Milk skin") and "Cloud Oat" in the accent colour ("Silky microfoam", "Pours like dairy", "No skin, ever"); list items rise in.
- 2.1s: the "before" card desaturates to grey, dims and sinks 40px; the "after" card scales up 4% and emits an accent ring pulse.

## Rules
- Drive every animation from `useCurrentFrame()` with `interpolate()`/`spring()` and clamped extrapolation. No CSS transitions or Tailwind animation classes.
- Deterministic only: no `Math.random()` or `Date.now()`; use `random(seed)` from remotion.
- Animate transforms and opacity only (`scale`, `translate`, `rotate`); never linear easing for movement.
- Keep key content inside the platform safe area (on 9:16 leave about 220px top and 420px bottom clear). Size display text so the longest word never overflows.
- One accent colour. Strong contrast for all text. No em dashes in on-screen copy.

## Done when
- Studio plays the full 5.0s without errors, and the Stop hook still renders cleanly.
- You have rendered stills at frames 0, 52, 105 and 149 and checked each for overflow, clipped text and contrast.
- Do not render the final MP4 unless I ask.