feat: UI animation enhancements across all major pages

P1 - Critical UX feedback:
- Add scale-in + slide-up-in entrance animations to profile popover and notification panel
- Port SmoothedProgressBar to EcommercePage (4 generation tools: clone, detail, tryOn, productSet)
- Add result-reveal stagger animation to ecommerce result grids
- Add heart-pop spring animation to CommunityPage favorite toggle

P2 - Visual polish:
- Add scroll-entrance IntersectionObserver animations for HomePage feature sections and experience section
- Add chat-message-in entrance animation to WorkbenchPage message rows
- Fix prefers-reduced-motion accessibility in WelcomeSplash canvas (skip animation, instant entry)

P3 - CSS consolidation:
- Remove conflicting .page-motion definition from legacy-pages.css (keep translateY version from legacy-components.css)
- Consolidate skeleton-shimmer: remove opacity-pulse keyframe from primitives.css, unify with gradient sweep
- Wire up --ease-spring token for heart-pop animation
- Add :active press states (scale 0.97) to topbar buttons, brand lockup

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

src/features/home/HomePage.tsx

@@ -9,6 +9,16 @@ import {
 } from "@ant-design/icons";
 import { useCallback, useEffect, useMemo, useRef, useState, type CSSProperties } from "react";
 import WelcomeSplash from "./WelcomeSplash";
+import { useScrollEntrance } from "../../hooks/useScrollEntrance";
+
+function ScrollEntrance({ children, className, ...rest }: { children: React.ReactNode; className?: string } & React.HTMLAttributes<HTMLElement>) {
+  const { ref, isVisible } = useScrollEntrance<HTMLElement>();
+  return (
+    <section ref={ref} className={`${className ?? ""} scroll-entrance${isVisible ? " is-visible" : ""}`} {...rest}>
+      {children}
+    </section>
+  );
+}
 
 const OSS_MUBAN = "https://stringtest.oss-cn-hangzhou.aliyuncs.com/muban";
 const heroImage1 = `${OSS_MUBAN}/hero-1.png`;
@@ -282,7 +292,7 @@ function HomePage({ onOpenGenerate, onOpenEcommerce, onOpenScriptReview, onOpenT
 
       <main className="omni-home__feature-pages" aria-label="OmniAI 功能介绍">
         {HOME_FEATURES.map((feature, index) => (
-          <section key={feature.key} className={`omni-home__feature-page is-${feature.key}${index % 2 ? " is-alt" : ""}`}>
+          <ScrollEntrance key={feature.key} className={`omni-home__feature-page is-${feature.key}${index % 2 ? " is-alt" : ""}`}>
             <div className="omni-home__feature-copy">
               <span>
                 {feature.icon}
@@ -303,10 +313,10 @@ function HomePage({ onOpenGenerate, onOpenEcommerce, onOpenScriptReview, onOpenT
                 <span key={item}>{item}</span>
               ))}
             </div>
-          </section>
+          </ScrollEntrance>
         ))}
 
-        <section className="omni-home__experience" aria-label="点击体验">
+        <ScrollEntrance className="omni-home__experience" aria-label="点击体验">
           <div className="omni-home__experience-copy">
             <span>
               <ThunderboltOutlined />
@@ -337,7 +347,7 @@ function HomePage({ onOpenGenerate, onOpenEcommerce, onOpenScriptReview, onOpenT
               体验电商生成
             </button>
           </div>
-        </section>
+        </ScrollEntrance>
       </main>
     </section>
     </>

src/features/home/WelcomeSplash.tsx

@@ -8,6 +8,10 @@ const MATRIX_CHARS =
   "01アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン" +
   "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()_+[]{};:?/\\|~`";
 
+const prefersReducedMotion = typeof window !== "undefined"
+  ? window.matchMedia("(prefers-reduced-motion: reduce)").matches
+  : false;
+
 export default function WelcomeSplash({ onEnter }: WelcomeSplashProps) {
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const rafRef = useRef(0);
@@ -16,15 +20,27 @@ export default function WelcomeSplash({ onEnter }: WelcomeSplashProps) {
 
   const handleEnter = useCallback(() => {
     setExiting(true);
-    setTimeout(onEnter, 700);
+    setTimeout(onEnter, prefersReducedMotion ? 0 : 700);
   }, [onEnter]);
 
   useEffect(() => {
-    const timer = setTimeout(() => setShowWelcome(true), 6000);
+    const timer = setTimeout(() => setShowWelcome(true), prefersReducedMotion ? 0 : 6000);
     return () => clearTimeout(timer);
   }, []);
 
   useEffect(() => {
+    if (prefersReducedMotion) {
+      const canvas = canvasRef.current;
+      if (!canvas) return;
+      const ctx = canvas.getContext("2d");
+      if (!ctx) return;
+      canvas.width = window.innerWidth;
+      canvas.height = window.innerHeight;
+      ctx.fillStyle = "rgba(0, 0, 0, 0.85)";
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+      return;
+    }
+
     const canvas = canvasRef.current;
     if (!canvas) return;
     const ctx = canvas.getContext("2d");