refactor(web): purge dead sections, share section metadata, polish UI

Delete 9 unused section components and ~1400 lines of dead CSS, hoist
the section list to lib/sections.ts so the marginalia ribbon and the
two progress rails share one source of truth, lazy-load the 144 KB
filers JSON out of the layout chunk, restore neutral hardware-fit
verdict copy, and add the missing mobile drawer + SVG theme-toggle.

Author: javierdejesusda

web/app/globals.css

@@ -1,4 +1,5 @@
 import Link from "next/link";
+import { Arrow } from "@/components/ui/arrow";
 
 export default function NotFound() {
   return (
@@ -53,9 +54,7 @@ export default function NotFound() {
         style={{ marginTop: 24 }}
       >
         Back to YuhoLens
-        <span className="arr" aria-hidden="true">
-          →
-        </span>
+        <Arrow className="arr" />
       </Link>
     </main>
   );

web/app/not-found.tsx

@@ -4,11 +4,20 @@ export const dynamic = "force-static";
 
 const BASE = "https://yuholens.site";
 
+// Stable lastmod: derive from BUILD_DATE (set at build time via env), or
+// fall back to today. Avoids "always now" timestamps that misrepresent
+// content age to crawlers on every redeploy.
+function buildDate(): string {
+  const env = process.env.NEXT_PUBLIC_BUILD_DATE;
+  const d = env ? new Date(env) : new Date();
+  return d.toISOString();
+}
+
 export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
   return [
     {
       url: `${BASE}/`,
-      lastModified: new Date(),
+      lastModified: buildDate(),
       changeFrequency: "weekly",
       priority: 1,
     },

web/app/sitemap.ts

@@ -181,7 +181,7 @@ export function KanjiField() {
     const obs = new IntersectionObserver(([e]) => {
       if (e.isIntersecting && !active) {
         active = true;
-        raf = requestAnimationFrame(tick);
+        if (!document.hidden) raf = requestAnimationFrame(tick);
       } else if (!e.isIntersecting && active) {
         active = false;
         cancelAnimationFrame(raf);
@@ -190,6 +190,23 @@ export function KanjiField() {
     obs.observe(canvas);
     raf = requestAnimationFrame(tick);
 
+    // Pause the rAF loop while the tab is hidden. The IntersectionObserver
+    // above never fires "out" because the canvas is fixed (always
+    // intersecting), so without this, particles keep advancing on a
+    // backgrounded tab and burn CPU for no visible benefit.
+    const onVisibility = () => {
+      if (document.hidden) {
+        if (active) {
+          cancelAnimationFrame(raf);
+          active = false;
+        }
+      } else if (!active) {
+        active = true;
+        raf = requestAnimationFrame(tick);
+      }
+    };
+    document.addEventListener("visibilitychange", onVisibility);
+
     const onMotionChange = (ev: MediaQueryListEvent) => {
       if (ev.matches) {
         active = false;
@@ -207,6 +224,7 @@ export function KanjiField() {
       ro.disconnect();
       cancelAnimationFrame(raf);
       window.removeEventListener("resize", resize);
+      document.removeEventListener("visibilitychange", onVisibility);
       if (typeof motionMedia.removeEventListener === "function") {
         motionMedia.removeEventListener("change", onMotionChange);
       }

web/components/canvas/kanji-field.tsx

@@ -12,15 +12,8 @@ type StageKey =
   | "problem"
   | "how"
   | "repro"
-  | "demo"
   | "hardware"
-  | "dag"
   | "readalong"
-  | "kg2"
-  | "reports"
-  | "failures"
-  | "manifest"
-  | "faq"
   | "access";
 
 type PaperSide = "right" | "left" | "centre";
@@ -79,15 +72,6 @@ const STAGES: Record<StageKey, StagePose> = {
   repro: { ...PARK_RIGHT, side: "right", texture: "rail", inkProgram: 3 },
   hardware: { ...PARK_RIGHT, side: "right", texture: "rail", inkProgram: 3 },
   access: { ...PARK_RIGHT, side: "right", texture: "footer", inkProgram: 5 },
-  // Legacy stages — kept so type stays in sync with old data-paper-stage
-  // attributes if they linger; all park on the right and are fade-hidden.
-  demo: { ...PARK_RIGHT, side: "right", texture: "rail", inkProgram: 3 },
-  dag: { ...PARK_RIGHT, side: "right", texture: "how", inkProgram: 2 },
-  kg2: { ...PARK_RIGHT, side: "right", texture: "rail", inkProgram: 3 },
-  reports: { ...PARK_RIGHT, side: "right", texture: "rail", inkProgram: 3 },
-  failures: { ...PARK_RIGHT, side: "right", texture: "problem", inkProgram: 1 },
-  manifest: { ...PARK_RIGHT, side: "right", texture: "manifest", inkProgram: 4 },
-  faq: { ...PARK_RIGHT, side: "right", texture: "manifest", inkProgram: 4 },
 };
 
 const cachedTextures: Partial<Record<TextureKey, THREE.Texture>> = {};