feat(animation): implement subtle and high-performance scroll reveal animations across public pages

- Enhance Reveal component with HTMLAttributes passthrough and inline style merging
- Integrate Reveal into Home, Members, Publications, Lectures, and Standardization sections
- Apply lightweight stagger delay (max 360ms cap) without breaking grid stretch (h-full)
- Preserve ProjectPageView CSS Scroll Snap direct-child contract via as='article' in-place replacement
- Integrate Counter component for metrics and category badges
- Support prefers-reduced-motion media query and noscript fallback
- All 12 quality gates passed clean with unanimous PASS from all reviewers

refer_landing_page/app/publications/page.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useEffect, useState } from "react";
+import Reveal from "@/components/Reveal";
 import { CategoryNav } from "./_components/CategoryNav";
 import { getPublications, getPatents } from "../../lib/api";
 import type { Publication, Patent } from "../../content/types";
@@ -31,9 +32,11 @@ export default function PublicationsIndexPage() {
     <div className="container-content py-8 sm:py-12 space-y-10 sm:space-y-14">
       {/* Page Header */}
       <section>
-        <h1 className="font-serif text-4xl sm:text-5xl font-normal text-ink tracking-tight">
-          PUBLICATIONS
-        </h1>
+        <Reveal variant="up">
+          <h1 className="font-serif text-4xl sm:text-5xl font-normal text-ink tracking-tight">
+            PUBLICATIONS
+          </h1>
+        </Reveal>
       </section>
 
       {/* Category Summary Cards */}
@@ -43,13 +46,21 @@ export default function PublicationsIndexPage() {
 
       {/* Highlights Section */}
       <section className="space-y-6 pt-6 md:pt-8 border-t border-line">
-        <h2 className="font-serif text-2xl sm:text-3xl font-normal text-cobalt-dark">
-          Highlights
-        </h2>
+        <Reveal variant="up">
+          <h2 className="font-serif text-2xl sm:text-3xl font-normal text-cobalt-dark">
+            Highlights
+          </h2>
+        </Reveal>
 
         <div className="divide-y divide-line border border-line bg-paper rounded-lg overflow-hidden shadow-sm">
           {highlights.map((pub, idx) => (
-            <article key={`${pub.category}-${idx}`} className="p-5 hover:bg-ivory/60 transition-colors space-y-2">
+            <Reveal
+              key={`${pub.category}-${idx}`}
+              as="article"
+              variant="up"
+              delay={Math.min(idx, 6) * 60}
+              className="p-5 hover:bg-ivory/60 transition-colors space-y-2"
+            >
               <div className="flex flex-wrap items-center gap-2 text-xs font-mono text-ink-mute">
                 <span className="px-2 py-0.5 rounded bg-ivory border border-line text-ink font-bold">
                   {pub.publishedAt?.substring(0, 7) || "Recent"}
@@ -76,7 +87,7 @@ export default function PublicationsIndexPage() {
                   {pub.venue}{pub.volume ? `, ${pub.volume}` : ""}
                 </p>
               )}
-            </article>
+            </Reveal>
           ))}
         </div>
       </section>