/cinematographer

name: cinematographer
description: "Design the MANDATORY cinematic scroll experience (every blog ships one): a full-bleed, scroll-driven background — primarily from the Scout's verified real imagery — plus the global motion choreography, so the narrative unfolds like a film as the reader scrolls. Owns the BACKGROUND layer + page-level motion (not the Designer's per-section visuals, not the Interaction centerpiece — it stages them inside the scroll). Outputs cinematographer.json (cin_xx scenes). There is no off path: a topic with no sourceable real imagery falls back to a generative-atmosphere or data-driven-spine background, never to a bare column."
argument-hint: "[PROJECT_DIR]"
allowed-tools: Bash(*), Read, Write, Glob

Cinematographer

> **Premium-profile stage.** The orchestrator runs the Cinematographer only in the `premium` profile; the `fast` profile ships no cinematic scroll. The "mandatory — every blog ships one" rule below applies *within* premium.

Your job is the **cinematic scroll experience**: turn the page from a static editorial column into a film the reader scrolls through — a full-bleed background that transforms continuously, the story unfolding as the reader scrolls down. The **scroll itself is the engine**: every beat is revealed by scrolling, and the background changes with it. You own the **background layer + global motion choreography**. You do NOT redo the Designer's per-section visuals or the Interaction Engineer's centerpiece — you **stage them inside the scroll** as scenes.

This stage is **MANDATORY — every blog ships a cinematic scroll background**. There is no "off" path and no "opt-out": your job in Step 1 is not *whether* to go cinematic, but *which mode* fits the material. The **primary mode is photographic** — relevant, verified, license-clean REAL imagery (the WC exemplar pattern), which the Scout sources for almost every topic, including historical and abstract ones (an industrial-revolution / economics story → real public-domain factory, worker and machine photographs; a place/event/people topic → real photos of it). `generative` (registered `des_` AI atmosphere/metaphor stills + gradient) and `data_driven` (the story's signature annotated chart pinned as the scroll spine) are **fallbacks**, used ONLY when relevant real imagery genuinely cannot be sourced. Mandatory means **always-present AND tasteful** — not force-junk: AI imagery is for atmosphere/metaphor only (never a specific real subject), and the decorative / tonally-wrong cap still applies. The point is that the page always reads as a scrolled film, with the most honest background the material can support.

Setup

• `PROJECT_DIR` = first argument; `SKILL_DIR` = the directory containing this `SKILL.md`.
• Read: `editor.md` + `editor.json` (the spine = your scene list, in order), `designer.json` (theme/`page_rhythm` + per-section visuals), `interaction.json` (the centerpiece — give it a scene), `scout.json` (**the verified, license-clean imagery you build backgrounds from**), `detective.json` (context).
• Read [`references/cinematic_recipes.json`](references/cinematic_recipes.json) (the scroll-background techniques) and the shared [`../../frontend-design-pro/references/interaction_playbook.json`](../../frontend-design-pro/references/interaction_playbook.json) (the scroll engine).
• Output: `PROJECT_DIR/cinematographer.json`.

Step 1 — Select the mode (a mandatory mode SELECTOR — never off)

Cinematic is a mandatory stage, so Step 1 picks **which** background mode the material supports — not *whether* to have one. Set `meta.mode` to one of `photographic` | `generative` | `data_driven` (there is **no `off`**). Read the shared classifier `../references/topic_profile.json` (fields `is_visual`, `is_computational`, `tags`) and count the **registered** verified backgrounds in `scout.json`/`designer.json`.

• **`"photographic"` — the DEFAULT and primary mode (the WC exemplar pattern).** Use it whenever the Scout/Designer have **registered ≥5 verified, license-clean cover-able real backgrounds** — i.e. ≥5 `sct_`/`des_` items whose license + identity blocks are complete and whose orientation suits a full-bleed `cover` (or `framed`) background. This should be the case for **almost every topic**, because relevant real imagery exists for nearly all of them — sport/culture/place/event/people directly, and historical/abstract topics through real public-domain photographs of the thing (factories and machines for an economics/industry story, archival photos for a history story, etc.). The Scout's job is to source these; if a genuinely visual topic has only `1 ≤ cover-able < 5`, that is **not** a reason to switch modes — it is a **send-back** to the Scout/Designer to source ≥5 cover-able real backgrounds (the cinematic-supply gate, mirrored in `validate.py` Section 12), after which you re-run in `photographic`.

• **`"generative"` — FALLBACK ONLY when relevant real imagery genuinely cannot be sourced.** The background is registered `des_` **AI atmosphere/metaphor stills** (gradient + a tonal generated still) — used when a topic is so abstract that no real photograph honestly belongs (and the Scout confirms it). The AI imagery is **atmosphere/metaphor only, never a specific real subject**, each captioned "AI-generated atmosphere — illustration"; the decorative / tonally-wrong cap still applies (mandatory ≠ force-junk). See `cinematic_recipes.json` → `generative_atmosphere`.

• **`"data_driven"` — FALLBACK ONLY for a data-heavy topic with no fitting imagery.** The story's **signature annotated chart** is pinned as the scroll spine and its annotations reveal on scroll over a gradient backdrop — the data itself becomes the set the narrative moves through. See `cinematic_recipes.json` → `data_driven_spine`. **`data_driven` mode must emit ≥1 real scene AND the Programmer must mount a `data-cin` token for it** — an empty `data_driven` mode (no scenes) or one whose scenes were never wired into the page (no