feat: seasonal theme overlays + improved animated chat backgrounds

Adds 11 CSS-only seasonal overlays (Halloween, Christmas, New Year, Autumn,
April Fool's, Lunar New Year, Valentine's Day, St. Patrick's Day, Earth Day,
Deep Space, Retro Arcade) with date-based auto-detection and a manual override
dropdown in Settings → Appearance → Seasonal Theme. All themes respect
prefers-reduced-motion. SeasonalEffect mounts at z-index 9997 in App.tsx.

Also rewrites all 5 animated chat background keyframes for smoother, more
organic motion: Digital Rain gains a phosphor glow flicker; Star Drift now
loops each layer by exactly its own tile size (no more seam); Grid Pulse adds
an independent brightness oscillation at a prime period; Aurora Flow drives
all four gradient layers through distinct paths; Fireflies adds glow-pulse and
opacity-blink animations at prime periods for unsynchronised bioluminescence.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/app/features/lotus/chatBackground.ts

@@ -2,10 +2,14 @@ import { CSSProperties } from 'react';
 import { ChatBackground } from '../../state/settings';
 import {
   animRainKeyframe,
+  animRainGlowKeyframe,
   animStarsDriftKeyframe,
   animGridPulseKeyframe,
+  animGridBrightnessKeyframe,
   animAuroraKeyframe,
   animFirefliesKeyframe,
+  animFirefliesGlowKeyframe,
+  animFirefliesBlinkKeyframe,
 } from '../../styles/Animations.css';
 
 export const BG_OPTIONS: { value: ChatBackground; label: string }[] = [
@@ -197,19 +201,19 @@ const DARK: Record<ChatBackground, CSSProperties> = {
     ].join(','),
   },
 
-  // Animated: Matrix digital rain — scrolling vertical green stripes
+  // Animated: Matrix digital rain — scrolling stripe columns + phosphor glow flicker
   'anim-rain': {
     backgroundColor: '#010804',
     backgroundImage: [
-      'repeating-linear-gradient(180deg, rgba(0,255,136,0.13) 0px, rgba(0,255,136,0.13) 1px, transparent 1px, transparent 20px)',
+      'repeating-linear-gradient(180deg, rgba(0,255,136,0.16) 0px, rgba(0,255,136,0.16) 1px, transparent 1px, transparent 20px)',
       'repeating-linear-gradient(180deg, rgba(0,255,136,0.07) 0px, rgba(0,255,136,0.07) 1px, transparent 1px, transparent 8px)',
     ].join(','),
     backgroundSize: '40px 200px, 12px 200px',
     backgroundPosition: '0 0, 0 0',
-    animation: `${animRainKeyframe} 8s linear infinite`,
+    animation: `${animRainKeyframe} 8s linear infinite, ${animRainGlowKeyframe} 2.1s ease-in-out infinite`,
   },
 
-  // Animated: drifting star field — three layers at different speeds
+  // Animated: drifting star field — three seamlessly-tiling layers at different speeds
   'anim-stars': {
     backgroundColor: '#050510',
     backgroundImage: [
@@ -219,10 +223,10 @@ const DARK: Record<ChatBackground, CSSProperties> = {
     ].join(','),
     backgroundSize: '130px 130px, 190px 190px, 260px 260px',
     backgroundPosition: '0 0, 65px 32px, 32px 97px',
-    animation: `${animStarsDriftKeyframe} 25s linear infinite`,
+    animation: `${animStarsDriftKeyframe} 30s linear infinite`,
   },
 
-  // Animated: neon grid pulse — grid lines that expand/contract
+  // Animated: neon grid pulse — size breathe + independent brightness oscillation
   'anim-pulse': {
     backgroundColor: '#030508',
     backgroundImage: [
@@ -232,34 +236,34 @@ const DARK: Record<ChatBackground, CSSProperties> = {
       'linear-gradient(90deg, rgba(0,212,255,0.06) 1px, transparent 1px)',
     ].join(','),
     backgroundSize: '60px 60px, 60px 60px, 12px 12px, 12px 12px',
-    animation: `${animGridPulseKeyframe} 4s ease-in-out infinite`,
+    animation: `${animGridPulseKeyframe} 4s ease-in-out infinite, ${animGridBrightnessKeyframe} 3.3s ease-in-out infinite`,
   },
 
-  // Animated: aurora borealis — slowly drifting gradient bands
+  // Animated: aurora borealis — four bands each travel an independent path
   'anim-aurora': {
     backgroundColor: '#020a10',
     backgroundImage: [
-      'radial-gradient(ellipse at 20% 30%, rgba(0,255,136,0.10) 0%, transparent 55%)',
-      'radial-gradient(ellipse at 80% 70%, rgba(0,100,255,0.10) 0%, transparent 55%)',
-      'radial-gradient(ellipse at 50% 10%, rgba(191,95,255,0.08) 0%, transparent 50%)',
-      'radial-gradient(ellipse at 60% 90%, rgba(0,212,255,0.08) 0%, transparent 50%)',
+      'radial-gradient(ellipse 80% 60% at 20% 30%, rgba(0,255,136,0.12) 0%, transparent 70%)',
+      'radial-gradient(ellipse 70% 50% at 80% 70%, rgba(0,100,255,0.12) 0%, transparent 70%)',
+      'radial-gradient(ellipse 90% 70% at 50% 10%, rgba(191,95,255,0.09) 0%, transparent 65%)',
+      'radial-gradient(ellipse 75% 55% at 60% 90%, rgba(0,212,255,0.09) 0%, transparent 65%)',
     ].join(','),
-    backgroundSize: '200% 200%',
-    backgroundPosition: '0% 0%',
-    animation: `${animAuroraKeyframe} 20s ease-in-out infinite`,
+    backgroundSize: '200% 200%, 250% 250%, 300% 300%, 220% 220%',
+    backgroundPosition: '0% 0%, 100% 0%, 50% 100%, 0% 50%',
+    animation: `${animAuroraKeyframe} 28s ease-in-out infinite`,
   },
 
-  // Animated: fireflies — three layers of glowing dots at different speeds
+  // Animated: fireflies — drift + brightness glow + opacity blink at prime periods
   'anim-fireflies': {
     backgroundColor: '#030508',
     backgroundImage: [
-      'radial-gradient(circle, rgba(255,220,50,0.55) 1.5px, rgba(255,160,0,0.15) 3px, transparent 4px)',
-      'radial-gradient(circle, rgba(255,200,30,0.45) 1px, rgba(255,140,0,0.12) 2.5px, transparent 3.5px)',
-      'radial-gradient(circle, rgba(255,240,100,0.35) 1px, transparent 2px)',
+      'radial-gradient(circle, rgba(255,220,50,0.7) 1.5px, rgba(255,160,0,0.18) 3px, transparent 4px)',
+      'radial-gradient(circle, rgba(255,200,30,0.55) 1px, rgba(255,140,0,0.14) 2.5px, transparent 3.5px)',
+      'radial-gradient(circle, rgba(255,240,100,0.4) 1px, transparent 2px)',
     ].join(','),
     backgroundSize: '200px 200px, 280px 280px, 160px 160px',
     backgroundPosition: '0 0, 120px 80px, 60px 140px',
-    animation: `${animFirefliesKeyframe} 15s linear infinite`,
+    animation: `${animFirefliesKeyframe} 30s linear infinite, ${animFirefliesGlowKeyframe} 2.3s ease-in-out infinite, ${animFirefliesBlinkKeyframe} 1.7s ease-in-out infinite`,
   },
 };
 
@@ -423,12 +427,12 @@ const LIGHT: Record<ChatBackground, CSSProperties> = {
   'anim-rain': {
     backgroundColor: '#f0fff4',
     backgroundImage: [
-      'repeating-linear-gradient(180deg, rgba(0,160,80,0.14) 0px, rgba(0,160,80,0.14) 1px, transparent 1px, transparent 20px)',
+      'repeating-linear-gradient(180deg, rgba(0,160,80,0.16) 0px, rgba(0,160,80,0.16) 1px, transparent 1px, transparent 20px)',
       'repeating-linear-gradient(180deg, rgba(0,160,80,0.07) 0px, rgba(0,160,80,0.07) 1px, transparent 1px, transparent 8px)',
     ].join(','),
     backgroundSize: '40px 200px, 12px 200px',
     backgroundPosition: '0 0, 0 0',
-    animation: `${animRainKeyframe} 8s linear infinite`,
+    animation: `${animRainKeyframe} 8s linear infinite, ${animRainGlowKeyframe} 2.1s ease-in-out infinite`,
   },
 
   'anim-stars': {
@@ -440,7 +444,7 @@ const LIGHT: Record<ChatBackground, CSSProperties> = {
     ].join(','),
     backgroundSize: '130px 130px, 190px 190px, 260px 260px',
     backgroundPosition: '0 0, 65px 32px, 32px 97px',
-    animation: `${animStarsDriftKeyframe} 25s linear infinite`,
+    animation: `${animStarsDriftKeyframe} 30s linear infinite`,
   },
 
   'anim-pulse': {
@@ -452,32 +456,32 @@ const LIGHT: Record<ChatBackground, CSSProperties> = {
       'linear-gradient(90deg, rgba(0,98,184,0.06) 1px, transparent 1px)',
     ].join(','),
     backgroundSize: '60px 60px, 60px 60px, 12px 12px, 12px 12px',
-    animation: `${animGridPulseKeyframe} 4s ease-in-out infinite`,
+    animation: `${animGridPulseKeyframe} 4s ease-in-out infinite, ${animGridBrightnessKeyframe} 3.3s ease-in-out infinite`,
   },
 
   'anim-aurora': {
     backgroundColor: '#f0f8f4',
     backgroundImage: [
-      'radial-gradient(ellipse at 20% 30%, rgba(0,160,80,0.12) 0%, transparent 55%)',
-      'radial-gradient(ellipse at 80% 70%, rgba(0,80,200,0.12) 0%, transparent 55%)',
-      'radial-gradient(ellipse at 50% 10%, rgba(140,60,220,0.09) 0%, transparent 50%)',
-      'radial-gradient(ellipse at 60% 90%, rgba(0,160,200,0.09) 0%, transparent 50%)',
+      'radial-gradient(ellipse 80% 60% at 20% 30%, rgba(0,160,80,0.13) 0%, transparent 70%)',
+      'radial-gradient(ellipse 70% 50% at 80% 70%, rgba(0,80,200,0.13) 0%, transparent 70%)',
+      'radial-gradient(ellipse 90% 70% at 50% 10%, rgba(140,60,220,0.10) 0%, transparent 65%)',
+      'radial-gradient(ellipse 75% 55% at 60% 90%, rgba(0,160,200,0.10) 0%, transparent 65%)',
     ].join(','),
-    backgroundSize: '200% 200%',
-    backgroundPosition: '0% 0%',
-    animation: `${animAuroraKeyframe} 20s ease-in-out infinite`,
+    backgroundSize: '200% 200%, 250% 250%, 300% 300%, 220% 220%',
+    backgroundPosition: '0% 0%, 100% 0%, 50% 100%, 0% 50%',
+    animation: `${animAuroraKeyframe} 28s ease-in-out infinite`,
   },
 
   'anim-fireflies': {
     backgroundColor: '#fffdf0',
     backgroundImage: [
-      'radial-gradient(circle, rgba(180,120,0,0.55) 1.5px, rgba(160,90,0,0.15) 3px, transparent 4px)',
-      'radial-gradient(circle, rgba(160,100,0,0.45) 1px, rgba(140,80,0,0.12) 2.5px, transparent 3.5px)',
-      'radial-gradient(circle, rgba(200,140,0,0.35) 1px, transparent 2px)',
+      'radial-gradient(circle, rgba(180,120,0,0.70) 1.5px, rgba(160,90,0,0.18) 3px, transparent 4px)',
+      'radial-gradient(circle, rgba(160,100,0,0.55) 1px, rgba(140,80,0,0.14) 2.5px, transparent 3.5px)',
+      'radial-gradient(circle, rgba(200,140,0,0.40) 1px, transparent 2px)',
     ].join(','),
     backgroundSize: '200px 200px, 280px 280px, 160px 160px',
     backgroundPosition: '0 0, 120px 80px, 60px 140px',
-    animation: `${animFirefliesKeyframe} 15s linear infinite`,
+    animation: `${animFirefliesKeyframe} 30s linear infinite, ${animFirefliesGlowKeyframe} 2.3s ease-in-out infinite, ${animFirefliesBlinkKeyframe} 1.7s ease-in-out infinite`,
   },
 };
 

src/app/features/settings/general/General.tsx

@@ -341,6 +341,10 @@ function Appearance() {
     'mentionHighlightColor',
   );
   const [fontFamily, setFontFamily] = useSetting(settingsAtom, 'fontFamily');
+  const [seasonalThemeOverride, setSeasonalThemeOverride] = useSetting(
+    settingsAtom,
+    'seasonalThemeOverride',
+  );
 
   return (
     <Box direction="Column" gap="100">
@@ -408,6 +412,51 @@ function Appearance() {
         />
       </SequenceCard>
 
+      <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
+        <SettingTile
+          title="Seasonal Theme"
+          description="Decorative overlays that activate automatically on holidays and events, or choose one manually."
+          after={
+            <select
+              value={seasonalThemeOverride ?? 'auto'}
+              onChange={(e) =>
+                setSeasonalThemeOverride(
+                  e.target.value as typeof seasonalThemeOverride,
+                )
+              }
+              style={{
+                background: 'var(--bg-surface-variant)',
+                color: 'inherit',
+                border: '1px solid var(--border-interactive)',
+                borderRadius: '6px',
+                padding: '4px 8px',
+                fontSize: '14px',
+                fontFamily: 'inherit',
+                cursor: 'pointer',
+              }}
+            >
+              <option value="auto">🗓 Auto (date-based)</option>
+              <option value="off">Off</option>
+              <optgroup label="Holidays">
+                <option value="newyear">🎆 New Year (Dec 31–Jan 2)</option>
+                <option value="lunar">🏮 Lunar New Year (Jan 22–Feb 5)</option>
+                <option value="valentines">💖 Valentine&apos;s Day (Feb 10–15)</option>
+                <option value="stpatricks">🍀 St. Patrick&apos;s Day (Mar 15–18)</option>
+                <option value="aprilfools">🃏 April Fool&apos;s Day (Apr 1)</option>
+                <option value="earthday">🌱 Earth Day (Apr 22)</option>
+                <option value="autumn">🍂 Autumn (Sep 21–Oct 31)</option>
+                <option value="halloween">🎃 Halloween (Oct 15–Nov 1)</option>
+                <option value="christmas">❄️ Christmas (Dec 10–Jan 2)</option>
+              </optgroup>
+              <optgroup label="Events">
+                <option value="arcade">👾 Retro Arcade Day (Sep 12)</option>
+                <option value="deepspace">🚀 Deep Space Week (Oct 4–10)</option>
+              </optgroup>
+            </select>
+          }
+        />
+      </SequenceCard>
+
       <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
         <SettingTile
           title="Show Profile on Every Message"