feat(ui): add CSS stagger entrance animation for page content sections

- Add stagger-fade-in CSS classes and fade-in-up keyframes to
  performance.css. Pure CSS animation (zero JS overhead, runs on
  compositor thread). Supports up to 8 children with 60ms stagger
  intervals, each child fades in and slides up 12px.
- Apply stagger-fade-in to TodayView's outer container, replacing
  Framer Motion staggerContainer + fadeInUp variants. The page's
  7 sections (Planner, Todos, QuickActions, Stats, Goals, Social,
  KnowledgePreview) now cascade in smoothly.
- Remove unused Framer Motion variants (staggerContainer,
  heroStatVariant, fadeInUp) and SPRING import.
- Retain motion.button/motion.div for interactive hover/tap
  effects (whileHover, whileTap) where gesture response is needed.

Author: Aparencia

client/src/features/dashboard/components/views/TodayView.tsx

@@ -10,7 +10,6 @@ import { useNavigate } from 'react-router-dom';
 import { motion } from 'framer-motion';
 import { Timer, FileText, Layers, Lightbulb } from 'lucide-react';
 import { cn } from '@/lib/utils';
-import { SPRING, fadeInUp } from '@/lib/animation/springConfig';
 import { useReducedMotion } from '@/hooks/useReducedMotion';
 import ModuleRitualHeader from '@/components/ui/ModuleRitualHeader';
 import { DashboardCard } from '../DashboardCard';
@@ -26,16 +25,6 @@ const accentText: Record<string, string> = {
   flashcard: 'text-flashcard', feynman: 'text-feynman',
 };
 
-const staggerContainer = {
-  hidden: {},
-  visible: { transition: { staggerChildren: 0.08, delayChildren: 0.1 } },
-};
-
-const heroStatVariant = {
-  hidden: { opacity: 0, y: 20, scale: 0.95 },
-  visible: { opacity: 1, y: 0, scale: 1, transition: SPRING.gentle },
-};
-
 const quickActions = [
   { label: '专注', icon: Timer, path: '/pomodoro', accent: 'pomodoro' as const },
   { label: '笔记', icon: FileText, path: '/notes', accent: 'note' as const },
@@ -76,12 +65,10 @@ export function TodayView({
   ];
 
   return (
-    <div>
+    <div className="stagger-fade-in">
       {/* ════ 今日航线：行动导向主角 ════ */}
       <section className="relative max-w-[1100px] mx-auto px-6 pt-rhythm-md">
-        <motion.div {...fadeInUp}>
-          <PlannerPanel />
-        </motion.div>
+        <PlannerPanel />
       </section>
 
       {/* ════ 今日待办：未完成显性化（蔡格尼克效应） ════ */}
@@ -128,7 +115,7 @@ export function TodayView({
 
       {/* ════ 快捷操作 ════ */}
       <section className="relative max-w-[1100px] mx-auto px-6 mt-rhythm-md">
-        <motion.div className="flex gap-3" variants={staggerContainer}>
+        <div className="flex gap-3">
           {quickActions.map((action) => {
             const Icon = action.icon;
             return (
@@ -142,31 +129,27 @@ export function TodayView({
                   'text-b3 font-medium text-text-secondary hover:text-text-primary',
                   'transition-all duration-beat-x2',
                 )}
-                variants={heroStatVariant}
                 whileHover={{ y: -2 }}
                 whileTap={{ scale: 0.96 }}
-                transition={SPRING.default}
               >
                 <Icon className={cn('w-4 h-4', accentText[action.accent])} strokeWidth={1.5} />
                 {action.label}
               </motion.button>
             );
           })}
-        </motion.div>
+        </div>
       </section>
 
       {/* ════ 今日统计：状态反馈 ════ */}
       <section className="relative max-w-[1100px] mx-auto px-6 mt-rhythm-md">
-        <motion.div className="grid grid-cols-2 lg:grid-cols-4 gap-rhythm-sm" variants={staggerContainer}>
+        <div className="grid grid-cols-2 lg:grid-cols-4 gap-rhythm-sm">
           {heroStats.map((stat) => {
             const Icon = stat.icon;
             return (
               <motion.div
                 key={stat.label}
-                variants={heroStatVariant}
                 whileHover={{ y: -2, scale: 1.02 }}
                 whileTap={{ scale: 0.97 }}
-                transition={SPRING.default}
               >
                 <DashboardCard
                   accent={stat.accent}
@@ -195,7 +178,7 @@ export function TodayView({
               </motion.div>
             );
           })}
-        </motion.div>
+        </div>
       </section>
 
       {/* 🎯 目标进度（目标梯度效应，紧邻计划区） */}
@@ -212,15 +195,15 @@ export function TodayView({
 
       {/* ════ 知识预览：回到学习现场 ════ */}
       <section className="relative max-w-[1100px] mx-auto px-6 mt-rhythm-lg pb-rhythm-xl">
-        <motion.div className="mb-rhythm-sm" {...fadeInUp}>
+        <div className="mb-rhythm-sm">
           <ModuleRitualHeader
             title="知识预览"
             note="最近的学习足迹"
             sealChar="星"
             sealColor="#40AB92"
             compact
           />
-        </motion.div>
+        </div>
 
         {isLoading ? (
           <div className="grid grid-cols-2 lg:grid-cols-3 gap-rhythm-sm">
@@ -233,18 +216,11 @@ export function TodayView({
             ))}
           </div>
         ) : knowledgeCards.length > 0 ? (
-          <motion.div
-            className="grid grid-cols-2 lg:grid-cols-3 gap-rhythm-sm"
-            variants={staggerContainer}
-            initial="hidden"
-            animate="visible"
-          >
+          <div className="grid grid-cols-2 lg:grid-cols-3 gap-rhythm-sm">
             {knowledgeCards.map((card, i) => (
-              <motion.div key={card.id} variants={heroStatVariant}>
-                <KnowledgePreviewCard card={card} index={i} />
-              </motion.div>
+              <KnowledgePreviewCard key={card.id} card={card} index={i} />
             ))}
-          </motion.div>
+          </div>
         ) : (
           <div className="text-center py-rhythm-xl">
             <p className="text-b2 text-text-tertiary">

client/src/styles/performance.css

@@ -48,3 +48,22 @@
     opacity: 0;
   }
 }
+
+/* ── 页面内容渐入动画（stagger） ── */
+/* 适用于页面多个 section 的渐入出场，子元素按顺序渐入 */
+.stagger-fade-in > * {
+  animation: fade-in-up 0.35s ease-out both;
+}
+.stagger-fade-in > :nth-child(1) { animation-delay: 0ms; }
+.stagger-fade-in > :nth-child(2) { animation-delay: 60ms; }
+.stagger-fade-in > :nth-child(3) { animation-delay: 120ms; }
+.stagger-fade-in > :nth-child(4) { animation-delay: 180ms; }
+.stagger-fade-in > :nth-child(5) { animation-delay: 240ms; }
+.stagger-fade-in > :nth-child(6) { animation-delay: 300ms; }
+.stagger-fade-in > :nth-child(7) { animation-delay: 360ms; }
+.stagger-fade-in > :nth-child(8) { animation-delay: 420ms; }
+
+@keyframes fade-in-up {
+  from { opacity: 0; transform: translateY(12px); }
+  to   { opacity: 1; transform: translateY(0); }
+}