fix: register idleYawn keyframes via direct css interpolation + cover wheel scroll (F-4)

The idleSpriteWrapperStyle was using `keyframes.toString()` inside a JS
template literal, so Emotion's serializer hit the string-handling branch
and never injected the @keyframes block — the animation silently did
nothing. Switch to direct Keyframes-object interpolation inside css\`...\`
so Emotion registers the rule and returns the animation name.

Also add 'wheel' to ACTIVITY_EVENTS so desktop mouse-wheel scrolling on
the inner scrollable content area resets the idle timer (the existing
'scroll' listener on window only catches mobile/touch scroll).

Update the source plan doc to reflect the corrected idiom so future
implementers don't repeat the bug.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/lib/useIdleMood.ts

@@ -10,6 +10,7 @@ const ACTIVITY_EVENTS: Array<keyof WindowEventMap> = [
   'touchstart',
   'keydown',
   'scroll',
+  'wheel',
 ];
 
 export function useIdleMood(idleAfterMs: number = IDLE_AFTER_MS): Mood {