perf(backgrounds): animated chat backgrounds cost ~5% CPU instead of 50 to 70% (#337)

background-position can't run on the compositor, so every frame of the
animated chat backgrounds repainted the whole chat area: 51 to 72% main-thread
busy while idle in a room at 60 fps. The drifts are slow (3 to 22 px/s,
under a pixel per frame), so each animation now uses steps(): about 12
updates/s for fireflies, stars and aurora and about 24/s for rain and
pulse.

Measured headless (20 s idle in a room, CDP TaskDuration):
  none 0.7% → 0.9%; rain 50.7 → 5.9; stars 71.2 → 4.5;
  pulse 64.9 → 5.8; aurora 58.9 → 4.2; fireflies 71.7 → 3.8.

Aurora and pulse used ease-in-out; with steps() their motion is now
even-paced. Pause animations / reduced motion still strip the animation.

Fixes #337

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_017PCb59uY3UKqDqt7B6hzd5

src/app/features/lotus/backgrounds/animRain.ts

@@ -97,7 +97,7 @@ export const animRain: ChatBgVariants = {
     ].join(','),
     backgroundSize: ['260px 200px', '100% 100%', '100% 100%', '100% 100%'].join(','),
     backgroundPosition: ['0 0', '0 0', '0 0', '0 0'].join(','),
-    animation: `${rainFall} 12s linear infinite`,
+    animation: `${rainFall} 12s steps(288) infinite`,
   },
 
   // Light: soft teal-grey streaks on a pale cool base — elegant, never neon.
@@ -118,6 +118,6 @@ export const animRain: ChatBgVariants = {
     ].join(','),
     backgroundSize: ['260px 200px', '100% 100%', '100% 100%', '100% 100%'].join(','),
     backgroundPosition: ['0 0', '0 0', '0 0', '0 0'].join(','),
-    animation: `${rainFall} 12s linear infinite`,
+    animation: `${rainFall} 12s steps(288) infinite`,
   },
 };