kinetic-typographylisted

# Kinetic Typography Drop-in building blocks (`assets/kinetic.css` + `assets/kinetic.js`) for motion-graphics text in plain HTML/CSS — the look of polished SaaS launch videos. Three composable effects: ## 1. Word-cascade reveal Each headline line masks its words; the words **rise into place one after another** behind the mask. `splitWords()` splits `.head .ln > span` into per-word `.wd` spans (preserving an inline colored/gradient word or a `.crackword` as one unit) and tags each with a global `--wi` index; the CSS `@keyframes wordrise` staggers by `--wi` so the whole headline "assembles" line by line. ```html <div class="head"><span class="ln"><span>Find the <span class="grad">cracks</span></span></span> <span class="ln"><span>first.</span></span></div> <script src="kinetic.js"></script><script>splitWords();</script> ``` Play it by adding `.show` to an ancestor (e.g. the active scene). ## 2. Hero → push → reveal staging A headline appears **centered as one line** (hero), then **content slides in and pushes it aside** while the kicker (top line) and subtitle (bottom line) **slide out of the headline**. Structure each scene as a `.lead` (kicker + `.head` + `.sub`) next to a `.cardstage`, mark the scene `.choreo dk-left` or `.choreo dk-right`, and toggle `.cardsin` when the content phase begins: ```html <section class="scene choreo dk-right"> <div class="lead"><div class="kicker">Section · Label</div> <div class="head"><span class="ln"><span>Gove