feat: scroll to post bubble from recommended card + back-to-top button

Recommended cards already routed to /browse#post-<id>, but the stream had
no logic to scroll to the target bubble — and the post might not be paged
in yet. MessageStream now resolves the #post-<id> hash, auto-loads more
pages until the bubble renders, scrolls to it, and gives it a brief gold
highlight. Bubbles get scroll-mt so they clear the sticky header.

Also adds a global floating back-to-top button (BackToTop) mounted in
PublicLayout, shown after scrolling past 400px.

Bundles related staging UI work already present in the working tree.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

src/pages/Home/index.tsx

@@ -19,6 +19,7 @@ import {
   type PostBackedResource,
 } from "../../utils/postResourceAdapter";
 import type { Post } from "../../types/post";
+import { Reveal } from "../../motion";
 
 const FIGMA_CATEGORY_ORDER = [
   "project-ppt",
@@ -269,6 +270,7 @@ export function Home() {
         <FigmaBanner />
       </section>
 
+      <Reveal delay={0}>
       <section id="categories" className="scroll-mt-16 md:scroll-mt-24">
         <div className="px-4 md:px-0">
           <SectionHeader
@@ -342,25 +344,28 @@ export function Home() {
         </div>
 
         <div className="mt-7 hidden grid-cols-3 gap-3 min-[440px]:gap-3.5 md:grid md:grid-cols-5 md:gap-3 lg:grid-cols-6 xl:grid-cols-7 xl:gap-4">
-          {figmaOrderedCategories.map((c) => (
-            <Link
-              key={c.id}
-              to={`/category/${encodeURIComponent(c.slug)}`}
-              className="flex h-[88px] min-w-0 flex-col items-center justify-center gap-2 rounded-xl border border-[#27292E] bg-[#1D1E23] px-4 py-3 text-center outline-none transition hover:border-ark-gold/55 hover:bg-[#252630] focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg"
-            >
-              <CategoryIcon
-                iconKey={c.iconKey}
-                categorySlug={c.slug}
-                className="h-9 w-9 shrink-0 text-ark-gold"
-              />
-              <div className="w-full text-center text-[13px] font-medium leading-[19.5px] text-white line-clamp-2">
-                {cleanCategoryDisplayName(c.name)}
-              </div>
-            </Link>
+          {figmaOrderedCategories.map((c, index) => (
+            <Reveal key={c.id} delay={Math.min(index, 8) * 0.05}>
+              <Link
+                to={`/category/${encodeURIComponent(c.slug)}`}
+                className="flex h-[88px] min-w-0 flex-col items-center justify-center gap-2 rounded-xl border border-[#27292E] bg-[#1D1E23] px-4 py-3 text-center outline-none transition hover:border-ark-gold/55 hover:bg-[#252630] focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg"
+              >
+                <CategoryIcon
+                  iconKey={c.iconKey}
+                  categorySlug={c.slug}
+                  className="h-9 w-9 shrink-0 text-ark-gold"
+                />
+                <div className="w-full text-center text-[13px] font-medium leading-[19.5px] text-white line-clamp-2">
+                  {cleanCategoryDisplayName(c.name)}
+                </div>
+              </Link>
+            </Reveal>
           ))}
         </div>
       </section>
+      </Reveal>
 
+      <Reveal>
       <section id="official" className="scroll-mt-16 md:scroll-mt-24">
         <div className="px-4 md:px-0">
           <SectionHeader
@@ -376,7 +381,9 @@ export function Home() {
           >
             {rec.map((r, index) => (
               <div key={r.id}>
-                <RecommendedCard r={r} visualIndex={index} useFigmaDesign />
+                <Reveal delay={Math.min(index, 8) * 0.05}>
+                  <RecommendedCard r={r} visualIndex={index} useFigmaDesign />
+                </Reveal>
               </div>
             ))}
           </div>
@@ -435,7 +442,9 @@ export function Home() {
           ) : null}
         </div>
       </section>
+      </Reveal>
 
+      <Reveal>
       <section id="latest" className="scroll-mt-16 md:scroll-mt-24">
         <div className="px-4 md:px-0">
           <SectionHeader
@@ -490,8 +499,10 @@ export function Home() {
           ) : null}
         </div>
       </section>
+      </Reveal>
 
       {hasPopular ? (
+        <Reveal>
         <section id="popular" className="scroll-mt-16 md:scroll-mt-24">
           <div className="px-4 md:px-0">
             <SectionHeader
@@ -521,6 +532,7 @@ export function Home() {
             ))}
           </div>
         </section>
+        </Reveal>
       ) : null}
     </div>
   );