docs: rewrite add-animation for the CSS-first theme

[gabriel-lisboa-azion]

Summary

• Step 1 still described the deleted v3 plugin: semantic/animations.js, addUtilities/addComponents, and the camelCase keyframe object form. Adding an animation is now two edits in two files under packages/theme/src/tokens/primitives/animations/ — the shorthand in animate.js (what makes animate-<name> a utility at all) and CSS-declaration-string keyframes in keyframes.js (which Tailwind v4 registers but does not generate).
• Step 3 now says to run build:tokens before catalog:build: the catalog reads the token source, but nothing renders until dist/v4/globals.css carries the utility and its @keyframes.
• Records the three things the shell's two arrivals taught: a per-instance value rides a var() with a token default inside the keyframe; a stagger rides a var() delay in the shorthand (backwards is load-bearing); and fill is a decision — forwards leaves a translate that makes the element a containing block for any position: fixed descendant.
• Notes that the shell's two arrivals (animate-page-enter, animate-content-enter) are catalogued, so the "size/direction animations are per-component" carve-out is not a reason to hand-roll one.

How to test

1. node packages/webkit/scripts/check-authoring-docs.mjs → 0 new.
2. Follow the rewritten steps to add a throwaway animation: the two edits land in animate.js + keyframes.js, pnpm --filter @aziontech/theme build:tokens emits both the --animate-* entry and the @keyframes block, and catalog:build then lists it in tokens.animations.

Notes

• Internal steering doc only — no package content, so this ships nothing to consumers. Kept in its own PR per .claude/rules/git-workflow.md (shared .claude/skills/* docs do not travel with code).
• Not reformatted with prettier: the file is already outside the gated scope (packages/webkit/**) and unformatted on main, so a reformat would bury the change in churn.