refactor: centralize background crossfade, add light/dark toggle, project card reveal

[devin-ai-integration]

Summary

Background crossfade centralization (original scope). PageBackground is now the single owner of the animated page background: each dark↔light transition is a declarative phase in background/sceneConfig.ts (PAGE_BG_PHASES), observed by plain ScrollTriggers whose progress deterministically computes one light-layer opacity, applied through a single gsap.quickTo writer. This removes the three competing tweens that could leave the background stuck white after a fast bottom→top scroll. Navbar light/dark now derives from the same value (NAVBAR_LIGHT_THRESHOLD) instead of per-section enter/leave callbacks.

Fast-scroll seam fixes.

• New PAGE_BG_SNAP_DELTA: if a single update moves the target opacity by ≥0.35 (Home/End, fast fling), the layer snaps via gsap.set before resuming the smoothed writer, so it can never lag mid-crossfade.
• Removed opaque bg-background from the animated Teams/Constellation sections (directors message → constellation boundary line); the fixed PageBackground is now the only painter there. Reduced-motion fallbacks keep their own opaque backgrounds.

Site-wide light/dark toggle. Semantic tokens (--color-background/foreground/muted/surface/surface-foreground + new --color-card) now resolve through --theme-* variables declared on :root and [data-theme="light"]. A ThemeToggle in the navbar (sun/moon, desktop + mobile menu) flips documentElement.dataset.theme, persists to localStorage, and a pre-paint inline script in layout.tsx restores it without a flash. Navbar reads it via useSyncExternalStore; the white/black logo choice is scrollPhaseLight XOR siteThemeLight since the "light" phase surface is dark in light mode. The hero keeps its dark art direction via a .theme-scope-dark override plus an opaque backdrop layer that fades out with the rest of the scene. Hard-coded white/neutral classes in Teams, Constellation, NodeTooltip, Projects, Mission, and the timeline year labels were swept to token-based equivalents so both themes stay readable.

Project cards scroll-in reveal. Projects is now a client component: cards fade/slide in (autoAlpha 0, y 40, staggered, once: true) when the section reaches 75% viewport, configured in projects/sceneConfig.ts; skipped under reduced motion.

Thicker themed scrollbars. Global 12px rounded scrollbars (::-webkit-scrollbar + Firefox scrollbar-color) using color-mix on the foreground token so they adapt to the theme.

Also: useNavbarTheme moved to useSyncExternalStore, FooterReveal's ResizeObserver now debounces ScrollTrigger.refresh() and only fires on height change, and CometTrailBackground reuses the shared BrandShaderBackground config.

Known pre-existing lint error (also on main): ReunionTower.tsx:395 cam.near mutation (react-hooks/immutability) — untouched as out of scope.

Runtime/browser testing intentionally not performed per requester's instruction ("DO NOT test yourself through the web I WILL DO THAT"); validated via npm run lint, tsc --noEmit, and npm run build.

Link to Devin session: https://app.devin.ai/sessions/826fedd0d8ff4bcc8b4e3e8947dcfcf3
Requested by: @balebbae

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment, CI, and merge conflict monitoring

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
hackutd-co	Ready	Preview, Comment	Jul 12, 2026 9:02pm