cinematic-landinglisted

# Cinematic Landing — design system + composition rules This is a **fat skill**: the markdown is most of the value. The runtime code under `components/landing/cinematic/` is a few hundred lines of CSS + four small React primitives. Everything that makes a cinematic landing *feel* cinematic — the design tokens, the motion timings, the copy patterns, the Pexels query strategy — lives here. Smarter Claude models produce better landings from the same spec without any code change. The skill auto-applies to two archetypes during `create_full_workspace`: - **cinematic-aspirational** — coaching, medspa, wellness, fitness, salons, premium lifestyle, anywhere the customer buys the dream before the service - **technical-restrained** — marketing/dev agencies, consultancies, technical SaaS, fractional executives, anywhere the buyer is sophisticated and the work itself signals quality For other archetypes the hero falls back to the previous variant (`left-aligned-asymmetric`, `split-screen-50-50`, `cinematic-fullbleed`, `founder-portrait`). A craft-roofer doesn't need a cinematic video hero; their proof is the work itself. ## The four pillars A page is "cinematic" when **all four** are present. Each is independent — adding three of four feels off; adding all four feels like Aura. ### 1. Looping MP4 background (full-bleed) - Sourced from Pexels via `searchPexelsVideo()` in `lib/assets/pexels.ts` - One call per workspace creation, URL persisted into the hero JSONB (the render