diff --git a/app/components/background/PageBackground.tsx b/app/components/background/PageBackground.tsx
index ca9e80d..fcb43a3 100644
--- a/app/components/background/PageBackground.tsx
+++ b/app/components/background/PageBackground.tsx
@@ -2,22 +2,34 @@
 
 import { useRef } from "react";
 import gsap from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
 import { useGSAP } from "@gsap/react";
 import { useIsMobile } from "@/app/hooks/useIsMobile";
 import { usePrefersReducedMotion } from "@/app/hooks/usePrefersReducedMotion";
 import { configureScrollTrigger } from "@/app/lib/scrollTrigger";
 import {
-  HERO_SCENE_DATA_ATTR,
-  MISSION_STATEMENT_DATA_ATTR,
-  PAGE_BG_DARKEN,
-  PAGE_BG_SPONSORS_LIGHTEN,
-  PAGE_BG_MOBILE_WHITEOUT_SCRUB,
-  PAGE_BG_WHITEOUT,
-  SPONSORS_SECTION_DATA_ATTR,
+  dispatchNavbarThemeOverride,
+  type NavbarTheme,
+} from "../navbar/navbarThemeOverride";
+import {
+  NAVBAR_LIGHT_THRESHOLD,
+  PAGE_BG_PHASES,
+  PAGE_BG_SMOOTHING,
+  PAGE_BG_SNAP_DELTA,
 } from "./sceneConfig";
 
 configureScrollTrigger();
 
+/**
+ * Owns the page background and the navbar light/dark theme.
+ *
+ * The light layer's opacity is a pure function of scroll position: each
+ * phase gets a plain ScrollTrigger (no tween) and on every update the last
+ * phase in page order with progress > 0 determines the value. A single
+ * quickTo writer applies it with a short catch-up for the scrub feel, so
+ * there are never competing tweens fighting over the same property and the
+ * background can't get stuck in the wrong state after a fast scroll.
+ */
 export default function PageBackground() {
   const lightLayerRef = useRef<HTMLDivElement>(null);
   const isMobile = useIsMobile();
@@ -30,71 +42,83 @@ export default function PageBackground() {
         return;
       }
 
+      gsap.set(lightLayer, { opacity: 0 });
+
       if (prefersReducedMotion) {
-        gsap.set(lightLayer, { opacity: 0 });
+        // Reduced-motion fallbacks paint their own section backgrounds and
+        // declare data-navbar-theme, which useNavbarTheme observes directly.
         return;
       }
 
-      gsap.set(lightLayer, { opacity: 0 });
+      const smoothing = isMobile
+        ? PAGE_BG_SMOOTHING.mobile
+        : PAGE_BG_SMOOTHING.desktop;
+      const setOpacity = gsap.quickTo(lightLayer, "opacity", {
+        duration: smoothing,
+        ease: "none",
+      });
+
+      let navbarTheme: NavbarTheme | null = null;
+
+      const phases: {
+        from: number;
+        to: number;
+        easeFn: gsap.EaseFunction;
+        trigger: ScrollTrigger;
+      }[] = [];
 
-      const heroScene = document.querySelector<HTMLElement>(
-        `[${HERO_SCENE_DATA_ATTR}]`,
-      );
-      const missionStatement = document.querySelector<HTMLElement>(
-        `[${MISSION_STATEMENT_DATA_ATTR}]`,
-      );
-      const sponsorsSection = document.querySelector<HTMLElement>(
-        `[${SPONSORS_SECTION_DATA_ATTR}]`,
-      );
-
-      const whiteoutScrub = isMobile
-        ? PAGE_BG_MOBILE_WHITEOUT_SCRUB
-        : PAGE_BG_WHITEOUT.scrub;
-
-      if (heroScene) {
-        gsap.to(lightLayer, {
-          opacity: 1,
-          ease: PAGE_BG_WHITEOUT.ease,
-          scrollTrigger: {
-            trigger: heroScene,
-            start: PAGE_BG_WHITEOUT.start,
-            end: PAGE_BG_WHITEOUT.end,
-            scrub: whiteoutScrub,
-          },
+      for (const phase of PAGE_BG_PHASES) {
+        const el = document.querySelector<HTMLElement>(`[${phase.attr}]`);
+        if (!el) {
+          continue;
+        }
+
+        phases.push({
+          from: phase.from,
+          to: phase.to,
+          easeFn: gsap.parseEase(phase.ease),
+          trigger: ScrollTrigger.create({
+            trigger: el,
+            start: phase.start,
+            end: phase.end,
+            onUpdate: () => update(),
+            onRefresh: () => update(),
+          }),
         });
       }
 
-      if (missionStatement) {
-        gsap.fromTo(
-          lightLayer,
-          { opacity: 1 },
-          {
-            opacity: 0,
-            ease: PAGE_BG_DARKEN.ease,
-            immediateRender: false,
-            scrollTrigger: {
-              trigger: missionStatement,
-              start: PAGE_BG_DARKEN.start,
-              end: PAGE_BG_DARKEN.end,
-              scrub: PAGE_BG_DARKEN.scrub,
-            },
-          },
-        );
-      }
+      function update() {
+        let value = 0;
+        for (const phase of phases) {
+          const { progress } = phase.trigger;
+          if (progress > 0) {
+            value = gsap.utils.interpolate(
+              phase.from,
+              phase.to,
+              phase.easeFn(progress),
+            );
+          }
+        }
 
-      if (sponsorsSection) {
-        gsap.to(lightLayer, {
-          opacity: 1,
-          ease: PAGE_BG_SPONSORS_LIGHTEN.ease,
-          immediateRender: false,
-          scrollTrigger: {
-            trigger: sponsorsSection,
-            start: PAGE_BG_SPONSORS_LIGHTEN.start,
-            end: PAGE_BG_SPONSORS_LIGHTEN.end,
-            scrub: PAGE_BG_SPONSORS_LIGHTEN.scrub,
-          },
-        });
+        const current = Number(gsap.getProperty(lightLayer, "opacity"));
+        if (Math.abs(value - current) >= PAGE_BG_SNAP_DELTA) {
+          gsap.set(lightLayer, { opacity: value });
+        }
+        setOpacity(value);
+
+        const nextTheme: NavbarTheme =
+          value >= NAVBAR_LIGHT_THRESHOLD ? "light" : "dark";
+        if (nextTheme !== navbarTheme) {
+          navbarTheme = nextTheme;
+          dispatchNavbarThemeOverride(nextTheme);
+        }
       }
+
+      update();
+
+      return () => {
+        dispatchNavbarThemeOverride(null);
+      };
     },
     { dependencies: [isMobile, prefersReducedMotion], revertOnUpdate: true },
   );
diff --git a/app/components/background/sceneConfig.ts b/app/components/background/sceneConfig.ts
index 9ba1266..539ed7a 100644
--- a/app/components/background/sceneConfig.ts
+++ b/app/components/background/sceneConfig.ts
@@ -1,39 +1,81 @@
 /**
  * Page-level background crossfade config.
  *
- * A single fixed background element is painted once and its light layer's
- * opacity is driven by scrubbed tweens:
- *   - WHITEOUT: dark → light, scoped to the Hero section
- *   - DARKEN:   light → dark, scoped to the Mission statement section
- *   - SPONSORS_LIGHTEN: dark → light, scoped to the Timeline/Sponsors handoff
+ * A single fixed background element is painted once. Its light layer's
+ * opacity is computed deterministically from the scroll position by
+ * PageBackground: the phases below are evaluated in page order and the
+ * last phase with progress > 0 owns the value. This guarantees the
+ * background always matches the scroll position, no matter how fast the
+ * user scrolls in either direction.
  *
- * Timings match what Hero and Mission previously controlled locally, so the
- * visual rhythm is unchanged — only the owning DOM node is unified.
+ * The navbar light/dark theme is derived from the same value, so the
+ * background and navbar can never disagree.
  */
 
-export const PAGE_BG_WHITEOUT = {
-  start: "70% bottom",
-  end: "bottom bottom",
-  ease: "power2.in",
-  scrub: 0.2,
-} as const;
+export const HERO_SCENE_DATA_ATTR = "data-bg-hero-scene";
+export const MISSION_STATEMENT_DATA_ATTR = "data-bg-mission-statement";
+export const TIMELINE_SECTION_DATA_ATTR = "data-bg-timeline-section";
 
-export const PAGE_BG_DARKEN = {
-  start: "center top",
-  end: "bottom top",
-  ease: "power1.in",
-  scrub: 1,
-} as const;
+export type PageBgPhase = {
+  /** Data attribute identifying the section that drives this phase */
+  attr: string;
+  /** Light-layer opacity at phase progress 0 */
+  from: number;
+  /** Light-layer opacity at phase progress 1 */
+  to: number;
+  start: string;
+  end: string;
+  ease: string;
+};
 
-export const PAGE_BG_SPONSORS_LIGHTEN = {
-  start: "top bottom",
-  end: "top center",
+/**
+ * Dark → light before the Sponsors section arrives. Completing the
+ * crossfade while the Timeline still fills the viewport (rather than
+ * while the opaque Sponsors edge is already visible) is what prevents
+ * the hard seam line at the section boundary.
+ */
+export const TIMELINE_LIGHTEN_PHASE = {
+  attr: TIMELINE_SECTION_DATA_ATTR,
+  from: 0,
+  to: 1,
+  start: "72% bottom",
+  end: "96% bottom",
   ease: "power1.out",
-  scrub: 1,
+} as const satisfies PageBgPhase;
+
+/** Phases in page order: hero whiteout → mission darken → timeline lighten */
+export const PAGE_BG_PHASES: readonly PageBgPhase[] = [
+  {
+    attr: HERO_SCENE_DATA_ATTR,
+    from: 0,
+    to: 1,
+    start: "70% bottom",
+    end: "bottom bottom",
+    ease: "power2.in",
+  },
+  {
+    attr: MISSION_STATEMENT_DATA_ATTR,
+    from: 1,
+    to: 0,
+    start: "center top",
+    end: "bottom top",
+    ease: "power1.in",
+  },
+  TIMELINE_LIGHTEN_PHASE,
+] as const;
+
+/** Seconds for the light layer to catch up to the computed value (scrub feel) */
+export const PAGE_BG_SMOOTHING = {
+  desktop: 0.2,
+  mobile: 0.6,
 } as const;
 
-export const PAGE_BG_MOBILE_WHITEOUT_SCRUB = 0.6;
+/**
+ * When a scroll jump moves the computed value by more than this in one
+ * update (e.g. Home/End or a fast fling), the layer snaps instead of
+ * easing so an opaque section edge is never crossed mid-catch-up.
+ */
+export const PAGE_BG_SNAP_DELTA = 0.35;
 
-export const HERO_SCENE_DATA_ATTR = "data-bg-hero-scene";
-export const MISSION_STATEMENT_DATA_ATTR = "data-bg-mission-statement";
-export const SPONSORS_SECTION_DATA_ATTR = "data-bg-sponsors-section";
+/** Light-layer opacity at which the navbar switches to its light theme */
+export const NAVBAR_LIGHT_THRESHOLD = 0.5;
diff --git a/app/components/footer/FooterReveal.tsx b/app/components/footer/FooterReveal.tsx
index fb2f6e0..8dae25b 100644
--- a/app/components/footer/FooterReveal.tsx
+++ b/app/components/footer/FooterReveal.tsx
@@ -81,14 +81,25 @@ export default function FooterReveal() {
         onLeaveBack: () => updateFooterState(false, false),
       });
 
-      const resizeObserver = new ResizeObserver(() => {
+      let lastFooterHeight = footer.offsetHeight;
+      const debouncedRefresh = gsap.delayedCall(0.2, () => {
         syncSpacerHeight();
         ScrollTrigger.refresh();
       });
+      debouncedRefresh.pause();
+
+      const resizeObserver = new ResizeObserver(() => {
+        if (footer.offsetHeight === lastFooterHeight) {
+          return;
+        }
+        lastFooterHeight = footer.offsetHeight;
+        debouncedRefresh.restart(true);
+      });
       resizeObserver.observe(footer);
 
       return () => {
         resizeObserver.disconnect();
+        debouncedRefresh.kill();
         trigger.kill();
       };
     },
diff --git a/app/components/hero/CometTrailBackground.tsx b/app/components/hero/CometTrailBackground.tsx
index 628964d..7be0a22 100644
--- a/app/components/hero/CometTrailBackground.tsx
+++ b/app/components/hero/CometTrailBackground.tsx
@@ -1,13 +1,12 @@
 "use client";
 
-import type { ComponentProps } from "react";
 import { useRef } from "react";
-import { ShaderGradient, ShaderGradientCanvas } from "@shadergradient/react";
 import gsap from "gsap";
 import { useGSAP } from "@gsap/react";
 import { useIsMobile } from "@/app/hooks/useIsMobile";
 import { usePrefersReducedMotion } from "@/app/hooks/usePrefersReducedMotion";
 import { configureScrollTrigger } from "@/app/lib/scrollTrigger";
+import BrandShaderBackground from "../background/BrandShaderBackground";
 import {
   COMET_TUNING,
   HERO_SCENE_SCROLL,
@@ -22,63 +21,6 @@ import {
 
 configureScrollTrigger();
 
-type ShaderGradientProps = ComponentProps<typeof ShaderGradient> & {
-  axesHelper?: string;
-  bgColor1?: string;
-  bgColor2?: string;
-  destination?: string;
-  embedMode?: string;
-  fov?: number;
-  format?: string;
-  frameRate?: number;
-  gizmoHelper?: string;
-  pixelDensity?: number;
-};
-
-const shaderGradientProps: ShaderGradientProps = {
-  animate: "on",
-  axesHelper: "off",
-  bgColor1: "#000000",
-  bgColor2: "#000000",
-  brightness: 1.5,
-  cAzimuthAngle: 110,
-  cDistance: 7.1,
-  cPolarAngle: 104,
-  cameraZoom: 10.5,
-  color1: "#6C17FE",
-  color3: "#FFA21F",
-  color2: "#F31667",
-  destination: "onCanvas",
-  embedMode: "off",
-  envPreset: "dawn",
-  format: "gif",
-  fov: 45,
-  frameRate: 10,
-  gizmoHelper: "hide",
-  grain: "off",
-  lightType: "3d",
-  pixelDensity: 1,
-  positionX: 0,
-  positionY: -0.05,
-  positionZ: 0,
-  range: "disabled",
-  rangeEnd: 40,
-  rangeStart: 0,
-  reflection: 0.1,
-  rotationX: 28,
-  rotationY: -18,
-  rotationZ: -32,
-  shader: "defaults",
-  type: "sphere",
-  uAmplitude: 2.2,
-  uDensity: 1.7,
-  uFrequency: 5.5,
-  uSpeed: 0.18,
-  uStrength: 0.85,
-  uTime: 0,
-  wireframe: false,
-};
-
 export default function CometTrailBackground() {
   const wrapperRef = useRef<HTMLDivElement>(null);
   const spineRef = useRef<SVGPathElement>(null);
@@ -201,15 +143,7 @@ export default function CometTrailBackground() {
             className="h-full w-full"
             style={{ height: "100%", width: "100%" }}
           >
-            <ShaderGradientCanvas
-              className="h-full w-full"
-              style={{ height: "100%", width: "100%" }}
-              pixelDensity={shaderGradientProps.pixelDensity}
-              fov={shaderGradientProps.fov}
-              pointerEvents="none"
-            >
-              <ShaderGradient {...shaderGradientProps} />
-            </ShaderGradientCanvas>
+            <BrandShaderBackground lazyLoad={false} />
           </div>
         </foreignObject>
       </svg>
diff --git a/app/components/hero/Hero.tsx b/app/components/hero/Hero.tsx
index 2a2e5ff..ceb9021 100644
--- a/app/components/hero/Hero.tsx
+++ b/app/components/hero/Hero.tsx
@@ -3,21 +3,18 @@
 import type { CSSProperties } from "react";
 import { useRef } from "react";
 import gsap from "gsap";
-import { ScrollTrigger } from "gsap/ScrollTrigger";
 import { useGSAP } from "@gsap/react";
 import Image from "next/image";
 import { useIsMobile } from "@/app/hooks/useIsMobile";
 import { usePrefersReducedMotion } from "@/app/hooks/usePrefersReducedMotion";
 import { configureScrollTrigger } from "@/app/lib/scrollTrigger";
 import AccentButton from "../ui/AccentButton";
-import { dispatchNavbarThemeOverride } from "../navbar/navbarThemeOverride";
 import { HERO_SCENE_DATA_ATTR } from "../background/sceneConfig";
 import CometAnimation from "./CometAnimation";
 import {
   HERO_COPY,
   HERO_COMET_SHADER,
   HERO_LAYOUT,
-  HERO_NAVBAR_THEME_TRIGGER,
   HERO_SCENE_SCROLL,
   HERO_SKYLINE_PARALLAX,
   HERO_STARS,
@@ -30,6 +27,7 @@ configureScrollTrigger();
 
 export default function Hero() {
   const sectionRef = useRef<HTMLElement>(null);
+  const backdropRef = useRef<HTMLDivElement>(null);
   const starsLayerRef = useRef<HTMLDivElement>(null);
   const cometBackgroundLayerRef = useRef<HTMLDivElement>(null);
   const skylineLayerRef = useRef<HTMLDivElement>(null);
@@ -97,6 +95,7 @@ export default function Hero() {
       }
 
       const sceneFadeTargets = [
+        backdropRef.current,
         skylineLayer,
         starsLayer,
         cometBackgroundLayer,
@@ -128,32 +127,6 @@ export default function Hero() {
           },
         });
       }
-
-      let navbarThemeOverride: "light" | "dark" | null = null;
-      const setNavbarThemeOverride = (theme: "light" | "dark" | null) => {
-        if (navbarThemeOverride === theme) {
-          return;
-        }
-
-        navbarThemeOverride = theme;
-        dispatchNavbarThemeOverride(theme);
-      };
-
-      const navbarThemeTrigger = ScrollTrigger.create({
-        trigger: section,
-        start: HERO_NAVBAR_THEME_TRIGGER.start,
-        end: HERO_NAVBAR_THEME_TRIGGER.end,
-        onEnter: () => setNavbarThemeOverride(HERO_NAVBAR_THEME_TRIGGER.theme),
-        onEnterBack: () =>
-          setNavbarThemeOverride(HERO_NAVBAR_THEME_TRIGGER.theme),
-        onLeave: () => setNavbarThemeOverride(null),
-        onLeaveBack: () => setNavbarThemeOverride(null),
-      });
-
-      return () => {
-        navbarThemeTrigger.kill();
-        setNavbarThemeOverride(null);
-      };
     },
     { scope: sectionRef, dependencies: [isMobile, prefersReducedMotion] },
   );
@@ -162,11 +135,18 @@ export default function Hero() {
     <section
       ref={sectionRef}
       {...{ [HERO_SCENE_DATA_ATTR]: "" }}
-      className={`relative ${HERO_LAYOUT.minHeight}`}
+      className={`theme-scope-dark relative text-foreground ${HERO_LAYOUT.minHeight}`}
     >
       <div
         className={`sticky top-0 overflow-hidden isolate ${HERO_LAYOUT.stickyViewportHeight}`}
       >
+        {/* Opaque dark backdrop so the hero art direction stays dark in the
+            light site theme; it fades out with the rest of the scene. */}
+        <div
+          ref={backdropRef}
+          aria-hidden="true"
+          className="absolute inset-0 z-0 bg-black"
+        />
         <div
           ref={starsLayerRef}
           aria-hidden="true"
diff --git a/app/components/hero/sceneConfig.ts b/app/components/hero/sceneConfig.ts
index ca2c181..5e710a9 100644
--- a/app/components/hero/sceneConfig.ts
+++ b/app/components/hero/sceneConfig.ts
@@ -65,12 +65,6 @@ export const HERO_SKYLINE_PARALLAX = {
   ease: "none",
 } as const;
 
-export const HERO_NAVBAR_THEME_TRIGGER = {
-  start: "84% bottom",
-  end: "bottom top",
-  theme: "light",
-} as const;
-
 export const COMET_TUNING = {
   spine: `
     M 735,870
diff --git a/app/components/mission/Mission.tsx b/app/components/mission/Mission.tsx
index e96cbab..dbcc876 100644
--- a/app/components/mission/Mission.tsx
+++ b/app/components/mission/Mission.tsx
@@ -2,15 +2,12 @@
 
 import { useRef } from "react";
 import gsap from "gsap";
-import { ScrollTrigger } from "gsap/ScrollTrigger";
 import { useGSAP } from "@gsap/react";
 import { usePrefersReducedMotion } from "@/app/hooks/usePrefersReducedMotion";
 import { missionContent } from "@/app/data/mission";
 import { configureScrollTrigger } from "@/app/lib/scrollTrigger";
 import { MISSION_STATEMENT_DATA_ATTR } from "../background/sceneConfig";
-import { dispatchNavbarThemeOverride } from "../navbar/navbarThemeOverride";
 import {
-  DIRECTORS_NAVBAR_THEME_TRIGGER,
   DIRECTORS_PIN,
   MISSION_DECORATION_COUNT,
   MISSION_LAYOUT,
@@ -35,7 +32,7 @@ function renderMissionStatement() {
 function renderDirectorsPanel() {
   return (
     <div className="flex flex-col items-center">
-      <div className="h-64 w-full max-w-lg rounded-lg bg-white/5" />
+      <div className="h-64 w-full max-w-lg rounded-lg bg-foreground/5" />
       <blockquote className="mt-8 max-w-lg text-center text-muted">
         <p>{missionContent.directorsMessage.quote}</p>
         <footer className="mt-4 font-medium text-foreground">
@@ -44,7 +41,7 @@ function renderDirectorsPanel() {
       </blockquote>
       <div className="mt-8 flex gap-2">
         {Array.from({ length: MISSION_DECORATION_COUNT }).map((_, i) => (
-          <div key={i} className="h-10 w-10 rounded-full bg-white/10" />
+          <div key={i} className="h-10 w-10 rounded-full bg-foreground/10" />
         ))}
       </div>
     </div>
@@ -90,37 +87,6 @@ export default function Mission() {
           scrub: DIRECTORS_PIN.scrub,
         },
       });
-
-      // Navbar theme — switch to dark when directors section enters
-      let navbarThemeOverride: "light" | "dark" | null = null;
-      const setNavbarThemeOverride = (theme: "light" | "dark" | null) => {
-        if (navbarThemeOverride === theme) {
-          return;
-        }
-        navbarThemeOverride = theme;
-        dispatchNavbarThemeOverride(theme);
-      };
-
-      const navbarThemeTrigger = ScrollTrigger.create({
-        trigger: directorsSection,
-        start: DIRECTORS_NAVBAR_THEME_TRIGGER.start,
-        end: DIRECTORS_NAVBAR_THEME_TRIGGER.end,
-        onEnter: () =>
-          setNavbarThemeOverride(
-            DIRECTORS_NAVBAR_THEME_TRIGGER.theme as "dark",
-          ),
-        onEnterBack: () =>
-          setNavbarThemeOverride(
-            DIRECTORS_NAVBAR_THEME_TRIGGER.theme as "dark",
-          ),
-        onLeave: () => setNavbarThemeOverride(null),
-        onLeaveBack: () => setNavbarThemeOverride(null),
-      });
-
-      return () => {
-        navbarThemeTrigger.kill();
-        setNavbarThemeOverride(null);
-      };
     },
     {
       dependencies: [prefersReducedMotion],
@@ -164,7 +130,6 @@ export default function Mission() {
           sections. */}
       <section
         ref={missionSectionRef}
-        data-navbar-theme="light"
         {...{ [MISSION_STATEMENT_DATA_ATTR]: "" }}
         className={`relative z-20 ${MISSION_LAYOUT.sectionPadding} ${MISSION_LAYOUT.sectionMinHeight}`}
       >
diff --git a/app/components/mission/sceneConfig.ts b/app/components/mission/sceneConfig.ts
index 8f7891a..bdf9fab 100644
--- a/app/components/mission/sceneConfig.ts
+++ b/app/components/mission/sceneConfig.ts
@@ -17,10 +17,4 @@ export const DIRECTORS_PIN = {
   initialYPercent: 12,
 } as const;
 
-export const DIRECTORS_NAVBAR_THEME_TRIGGER = {
-  start: "top 60%",
-  end: "bottom top",
-  theme: "dark",
-} as const;
-
 export const MISSION_DECORATION_COUNT = 6;
diff --git a/app/components/navbar/Navbar.tsx b/app/components/navbar/Navbar.tsx
index 4ff346c..2ca22c8 100644
--- a/app/components/navbar/Navbar.tsx
+++ b/app/components/navbar/Navbar.tsx
@@ -1,10 +1,17 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import { useState, useEffect, useSyncExternalStore } from "react";
 import Image from "next/image";
 import Link from "next/link";
 import AccentButton from "../ui/AccentButton";
 import useNavbarTheme from "./useNavbarTheme";
+import ThemeToggle, {
+  applySiteTheme,
+  getServerSiteTheme,
+  readSiteTheme,
+  subscribeSiteTheme,
+  type SiteTheme,
+} from "./ThemeToggle";
 
 const NAV_LINKS = [
   { href: "#hackathons", label: "WHO WE ARE" },
@@ -14,8 +21,22 @@ const NAV_LINKS = [
 
 export default function Navbar() {
   const [isOpen, setIsOpen] = useState(false);
+  const siteTheme = useSyncExternalStore(
+    subscribeSiteTheme,
+    readSiteTheme,
+    getServerSiteTheme,
+  );
   const theme = useNavbarTheme();
   const isLightTheme = theme === "light";
+  // The white/black logo assets track the actual underlying color: the
+  // "light" navbar phase sits on the surface color, which is dark when the
+  // user picks the light site theme.
+  const showBlackLogo = isLightTheme !== (siteTheme === "light");
+
+  const toggleSiteTheme = () => {
+    const next: SiteTheme = siteTheme === "dark" ? "light" : "dark";
+    applySiteTheme(next);
+  };
 
   useEffect(() => {
     document.body.style.overflow = isOpen ? "hidden" : "";
@@ -34,7 +55,7 @@ export default function Navbar() {
             width={2048}
             height={585}
             className={`absolute inset-0 h-6 w-auto transition-opacity duration-300 md:h-8 ${
-              isLightTheme ? "opacity-0" : "opacity-100"
+              showBlackLogo ? "opacity-0" : "opacity-100"
             }`}
             priority
           />
@@ -44,7 +65,7 @@ export default function Navbar() {
             width={2048}
             height={585}
             className={`absolute inset-0 h-6 w-auto transition-opacity duration-300 md:h-8 ${
-              isLightTheme ? "opacity-100" : "opacity-0"
+              showBlackLogo ? "opacity-100" : "opacity-0"
             }`}
             priority
           />
@@ -67,6 +88,11 @@ export default function Navbar() {
             <span className="absolute inset-x-0 bottom-0 h-px origin-left scale-x-0 bg-pink transition-transform duration-300 group-hover:scale-x-100" />
           </Link>
         ))}
+        <ThemeToggle
+          theme={siteTheme}
+          onToggle={toggleSiteTheme}
+          isLightNavbar={isLightTheme}
+        />
         <AccentButton>Gallery</AccentButton>
       </div>
 
@@ -116,6 +142,11 @@ export default function Navbar() {
               {link.label}
             </Link>
           ))}
+          <ThemeToggle
+            theme={siteTheme}
+            onToggle={toggleSiteTheme}
+            isLightNavbar={isLightTheme}
+          />
           <AccentButton
             className={
               isLightTheme
diff --git a/app/components/navbar/ThemeToggle.tsx b/app/components/navbar/ThemeToggle.tsx
new file mode 100644
index 0000000..ab39fba
--- /dev/null
+++ b/app/components/navbar/ThemeToggle.tsx
@@ -0,0 +1,89 @@
+"use client";
+
+export type SiteTheme = "dark" | "light";
+
+export const THEME_STORAGE_KEY = "site-theme";
+
+const THEME_CHANGE_EVENT = "site-theme-change";
+
+export function subscribeSiteTheme(onChange: () => void) {
+  window.addEventListener(THEME_CHANGE_EVENT, onChange);
+  return () => window.removeEventListener(THEME_CHANGE_EVENT, onChange);
+}
+
+export function readSiteTheme(): SiteTheme {
+  return document.documentElement.dataset.theme === "light" ? "light" : "dark";
+}
+
+export function getServerSiteTheme(): SiteTheme {
+  return "dark";
+}
+
+export function applySiteTheme(theme: SiteTheme) {
+  document.documentElement.dataset.theme = theme;
+  try {
+    localStorage.setItem(THEME_STORAGE_KEY, theme);
+  } catch {
+    // Storage unavailable (private mode) — theme still applies for the session.
+  }
+  window.dispatchEvent(new Event(THEME_CHANGE_EVENT));
+}
+
+/**
+ * Site-wide light/dark toggle button. The chosen theme swaps the semantic
+ * color variables (see globals.css) and persists across visits; an inline
+ * script in the root layout applies it before first paint.
+ */
+export default function ThemeToggle({
+  theme,
+  onToggle,
+  isLightNavbar,
+}: {
+  theme: SiteTheme;
+  onToggle: () => void;
+  isLightNavbar: boolean;
+}) {
+  const next: SiteTheme = theme === "dark" ? "light" : "dark";
+
+  return (
+    <button
+      type="button"
+      aria-label={`Switch to ${next} mode`}
+      onClick={onToggle}
+      className={`flex h-8 w-8 items-center justify-center rounded-full transition-colors duration-300 ${
+        isLightNavbar
+          ? "text-(--color-surface-foreground) hover:bg-(--color-surface-foreground)/10"
+          : "text-foreground hover:bg-foreground/10"
+      }`}
+    >
+      {theme === "dark" ? (
+        <svg
+          aria-hidden="true"
+          viewBox="0 0 24 24"
+          className="h-4.5 w-4.5"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.8"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <circle cx="12" cy="12" r="4" />
+          <path d="M12 2v2m0 16v2M4.93 4.93l1.41 1.41m11.32 11.32 1.41 1.41M2 12h2m16 0h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41" />
+        </svg>
+      ) : (
+        <svg
+          aria-hidden="true"
+          viewBox="0 0 24 24"
+          className="h-4.5 w-4.5"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.8"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79Z" />
+        </svg>
+      )}
+    </button>
+  );
+}
diff --git a/app/components/navbar/navbarThemeOverride.ts b/app/components/navbar/navbarThemeOverride.ts
index 77ba48d..d61dc15 100644
--- a/app/components/navbar/navbarThemeOverride.ts
+++ b/app/components/navbar/navbarThemeOverride.ts
@@ -5,7 +5,15 @@ export type NavbarThemeOverride = NavbarTheme | null;
 
 export const NAVBAR_THEME_OVERRIDE_EVENT = "navbar-theme-override";
 
+let currentOverride: NavbarThemeOverride = null;
+
+/** Last dispatched override, so late subscribers can sync on mount. */
+export function getNavbarThemeOverride(): NavbarThemeOverride {
+  return currentOverride;
+}
+
 export function dispatchNavbarThemeOverride(theme: NavbarThemeOverride) {
+  currentOverride = theme;
   window.dispatchEvent(
     new CustomEvent(NAVBAR_THEME_OVERRIDE_EVENT, {
       detail: { theme },
diff --git a/app/components/navbar/useNavbarTheme.ts b/app/components/navbar/useNavbarTheme.ts
index bb6b700..0a24032 100644
--- a/app/components/navbar/useNavbarTheme.ts
+++ b/app/components/navbar/useNavbarTheme.ts
@@ -1,15 +1,32 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useEffect, useState, useSyncExternalStore } from "react";
 import {
+  getNavbarThemeOverride,
   NAVBAR_THEME_OVERRIDE_EVENT,
   type NavbarTheme,
   type NavbarThemeOverride,
 } from "./navbarThemeOverride";
 
+function subscribeToOverride(callback: () => void) {
+  window.addEventListener(NAVBAR_THEME_OVERRIDE_EVENT, callback);
+
+  return () => {
+    window.removeEventListener(NAVBAR_THEME_OVERRIDE_EVENT, callback);
+  };
+}
+
+function getServerOverride(): NavbarThemeOverride {
+  return null;
+}
+
 export default function useNavbarTheme(): NavbarTheme {
   const [sectionTheme, setSectionTheme] = useState<NavbarTheme>("dark");
-  const [overrideTheme, setOverrideTheme] = useState<NavbarThemeOverride>(null);
+  const overrideTheme = useSyncExternalStore(
+    subscribeToOverride,
+    getNavbarThemeOverride,
+    getServerOverride,
+  );
 
   useEffect(() => {
     const lightSections = document.querySelectorAll<HTMLElement>(
@@ -50,24 +67,5 @@ export default function useNavbarTheme(): NavbarTheme {
     };
   }, []);
 
-  useEffect(() => {
-    const handleOverride = (event: Event) => {
-      const { detail } = event as CustomEvent<{ theme: NavbarThemeOverride }>;
-      setOverrideTheme(detail.theme);
-    };
-
-    window.addEventListener(
-      NAVBAR_THEME_OVERRIDE_EVENT,
-      handleOverride as EventListener,
-    );
-
-    return () => {
-      window.removeEventListener(
-        NAVBAR_THEME_OVERRIDE_EVENT,
-        handleOverride as EventListener,
-      );
-    };
-  }, []);
-
   return overrideTheme ?? sectionTheme;
 }
diff --git a/app/components/projects/Projects.tsx b/app/components/projects/Projects.tsx
index d2a96f7..0811f6b 100644
--- a/app/components/projects/Projects.tsx
+++ b/app/components/projects/Projects.tsx
@@ -1,5 +1,15 @@
+"use client";
+
+import { useRef } from "react";
+import gsap from "gsap";
+import { useGSAP } from "@gsap/react";
 import Image from "next/image";
 import { projects } from "@/app/data/projects";
+import { usePrefersReducedMotion } from "@/app/hooks/usePrefersReducedMotion";
+import { configureScrollTrigger } from "@/app/lib/scrollTrigger";
+import { PROJECTS_REVEAL } from "./sceneConfig";
+
+configureScrollTrigger();
 
 function pad(n: number) {
   return String(n).padStart(2, "0");
@@ -10,7 +20,7 @@ function ProjectNumber({ n, small }: { n: number; small?: boolean }) {
   const size = small ? "text-8xl" : "text-[160px]";
   const offset = small ? "mt-1" : "mt-2";
   return (
-    <div className="absolute right-10 top-0 flex items-start select-none leading-none text-white/[0.07] font-serif">
+    <div className="absolute right-10 top-0 flex items-start select-none leading-none text-foreground/[0.07] font-serif">
       <span className={`${size} font-light`}>{a}</span>
       <span className={`${offset} ${size} font-light`}>{b}</span>
     </div>
@@ -19,11 +29,40 @@ function ProjectNumber({ n, small }: { n: number; small?: boolean }) {
 
 export default function Projects() {
   const [featured, ...rest] = projects;
+  const sectionRef = useRef<HTMLElement>(null);
+  const prefersReducedMotion = usePrefersReducedMotion();
+
+  useGSAP(
+    () => {
+      const section = sectionRef.current;
+      if (!section || prefersReducedMotion) {
+        return;
+      }
+
+      const cards = gsap.utils.toArray<HTMLElement>("[data-project-card]");
+
+      gsap.from(cards, {
+        ...PROJECTS_REVEAL.from,
+        duration: PROJECTS_REVEAL.duration,
+        stagger: PROJECTS_REVEAL.stagger,
+        ease: PROJECTS_REVEAL.ease,
+        scrollTrigger: {
+          trigger: section,
+          start: PROJECTS_REVEAL.start,
+          once: true,
+        },
+      });
+    },
+    { scope: sectionRef, dependencies: [prefersReducedMotion] },
+  );
 
   return (
-    <section id="projects" className="px-8 py-32">
+    <section id="projects" ref={sectionRef} className="px-8 py-32">
       <div className="grid grid-cols-2 gap-6">
-        <div className="relative flex flex-col rounded-3xl border border-white/10 bg-neutral-900 px-8 pb-8 pt-12 shadow-[inset_0_1px_0_rgba(255,255,255,0.15)]">
+        <div
+          data-project-card
+          className="relative flex flex-col rounded-3xl border border-foreground/10 bg-(--color-card) px-8 pb-8 pt-12 shadow-[inset_0_1px_0_rgba(255,255,255,0.15)]"
+        >
           <ProjectNumber n={1} />
           <div className="flex flex-1 items-center justify-center py-12">
             <Image src={featured.image} alt={featured.name} width={400} height={400} className="object-contain" />
@@ -32,19 +71,23 @@ export default function Projects() {
             <p className="mb-1 text-xs uppercase text-muted/60">{featured.label}</p>
             <h3 className="text-3xl font-medium">{featured.name}</h3>
             <p className="mt-3 text-sm text-muted/60">{featured.description}</p>
-            <a href={featured.link} target="_blank" rel="noopener noreferrer" className="mt-2 inline-block text-xs font-semibold text-[#b5294e] transition-all duration-150 hover:text-sm">Learn More →</a>
+            <a href={featured.link} target="_blank" rel="noopener noreferrer" className="mt-2 inline-block text-xs font-semibold text-accent transition-all duration-150 hover:text-sm">Learn More →</a>
           </div>
         </div>
 
         <div className="flex flex-col gap-6">
           {rest.map((project, i) => (
-            <div key={project.name} className="relative flex flex-1 flex-row items-end justify-between rounded-3xl border border-white/10 bg-neutral-900 px-8 pb-8 pt-48 shadow-[inset_0_1px_0_rgba(255,255,255,0.15)]">
+            <div
+              key={project.name}
+              data-project-card
+              className="relative flex flex-1 flex-row items-end justify-between rounded-3xl border border-foreground/10 bg-(--color-card) px-8 pb-8 pt-48 shadow-[inset_0_1px_0_rgba(255,255,255,0.15)]"
+            >
               <ProjectNumber n={i + 2} small />
               <div>
                 <p className="mb-1 text-xs uppercase text-muted/60">{project.label}</p>
                 <h3 className="text-3xl font-light">{project.name}</h3>
                 <p className="mt-3 text-sm text-muted/60">{project.description}</p>
-                <a href={project.link} target="_blank" rel="noopener noreferrer" className="mt-2 inline-block text-xs font-semibold text-[#b5294e] transition-all duration-150 hover:text-sm">Learn More →</a>
+                <a href={project.link} target="_blank" rel="noopener noreferrer" className="mt-2 inline-block text-xs font-semibold text-accent transition-all duration-150 hover:text-sm">Learn More →</a>
               </div>
               <Image src={project.image} alt={project.name} width={160} height={160} className="-mr-4 self-center object-contain" />
             </div>
diff --git a/app/components/projects/sceneConfig.ts b/app/components/projects/sceneConfig.ts
new file mode 100644
index 0000000..207d623
--- /dev/null
+++ b/app/components/projects/sceneConfig.ts
@@ -0,0 +1,13 @@
+/** Scroll-in reveal for the project cards. */
+export const PROJECTS_REVEAL = {
+  /** Initial offset/state each card animates from */
+  from: {
+    autoAlpha: 0,
+    y: 40,
+  },
+  duration: 0.8,
+  stagger: 0.12,
+  ease: "power2.out",
+  /** Trigger window on the projects section */
+  start: "top 75%",
+} as const;
diff --git a/app/components/sponsors/Sponsors.tsx b/app/components/sponsors/Sponsors.tsx
index 8d3934e..9b38266 100644
--- a/app/components/sponsors/Sponsors.tsx
+++ b/app/components/sponsors/Sponsors.tsx
@@ -6,9 +6,7 @@ import { ScrollTrigger } from "gsap/ScrollTrigger";
 import { useGSAP } from "@gsap/react";
 import { SPONSORS } from "../../data/sponsors";
 import { configureScrollTrigger } from "@/app/lib/scrollTrigger";
-import { dispatchNavbarThemeOverride } from "../navbar/navbarThemeOverride";
 import { usePrefersReducedMotion } from "@/app/hooks/usePrefersReducedMotion";
-import { SPONSORS_SECTION_DATA_ATTR } from "@/app/components/background/sceneConfig";
 
 const ReunionTower = lazy(() => import("./ReunionTower"));
 
@@ -85,7 +83,7 @@ export default function Sponsors() {
     };
   }, [reducedMotion]);
 
-  // ── GSAP: scroll entrance, scroll progress, navbar
+  // ── GSAP: scroll entrance, scroll progress
   useGSAP(() => {
     const section = sectionRef.current;
     const towerWrap = towerWrapRef.current;
@@ -139,18 +137,6 @@ export default function Sponsors() {
         },
       );
     }
-
-    // Navbar theme
-    const nav = ScrollTrigger.create({
-      trigger: section,
-      start: "top 10%",
-      end: "bottom 10%",
-      onEnter: () => dispatchNavbarThemeOverride("light"),
-      onEnterBack: () => dispatchNavbarThemeOverride("light"),
-      onLeave: () => dispatchNavbarThemeOverride(null),
-      onLeaveBack: () => dispatchNavbarThemeOverride(null),
-    });
-    return () => nav.kill();
   });
 
   const towerH = "max(100vh, 1000px)";
@@ -163,7 +149,7 @@ export default function Sponsors() {
           ref={sectionRef}
           id="sponsors"
           className="relative bg-surface px-8 py-32 text-surface-foreground"
-          {...{ [SPONSORS_SECTION_DATA_ATTR]: "" }}
+          data-navbar-theme="light"
         >
           <div className="flex items-end justify-between">
             <h2 className="text-4xl font-bold md:text-5xl">Our Sponsors</h2>
@@ -203,8 +189,6 @@ export default function Sponsors() {
         ref={sectionRef}
         id="sponsors"
         className="relative z-20 bg-surface px-8 py-32 text-surface-foreground"
-        data-navbar-theme="light"
-        {...{ [SPONSORS_SECTION_DATA_ATTR]: "" }}
       >
         {/* Header */}
         <div className="flex items-end justify-between">
diff --git a/app/components/teams/NodeTooltip.tsx b/app/components/teams/NodeTooltip.tsx
index e10df9c..e373226 100644
--- a/app/components/teams/NodeTooltip.tsx
+++ b/app/components/teams/NodeTooltip.tsx
@@ -32,7 +32,7 @@ export function NodeTooltip({
 }) {
   return (
     <div
-      className={`absolute z-40 w-72 max-w-[calc(100vw-2rem)] rounded-2xl border border-white/12 bg-black/95 px-5 py-4 text-left shadow-[0_24px_64px_rgba(0,0,0,0.6)] backdrop-blur-md ${placement}`}
+      className={`absolute z-40 w-72 max-w-[calc(100vw-2rem)] rounded-2xl border border-foreground/12 bg-background/95 px-5 py-4 text-left shadow-[0_24px_64px_rgba(0,0,0,0.6)] backdrop-blur-md ${placement}`}
       onMouseEnter={() => {
         clearTooltipClose();
         setActiveTeamId(teamId);
@@ -56,7 +56,7 @@ export function NodeTooltip({
       <button
         type="button"
         aria-label="Close"
-        className="absolute right-3 top-3 text-white/30 hover:text-white/70 transition-colors"
+        className="absolute right-3 top-3 text-foreground/30 hover:text-foreground/70 transition-colors"
         onClick={(e) => {
           e.stopPropagation();
           scheduleTooltipClose();
@@ -71,10 +71,10 @@ export function NodeTooltip({
             alt={person.name}
             width={48}
             height={48}
-            className="h-12 w-12 rounded-full object-cover shrink-0 border border-white/10"
+            className="h-12 w-12 rounded-full object-cover shrink-0 border border-foreground/10"
           />
         ) : (
-          <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-full border border-white/10 bg-white/6 text-sm font-medium text-white/40">
+          <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-full border border-foreground/10 bg-foreground/6 text-sm font-medium text-foreground/40">
             {getInitials(person.name)}
           </div>
         )}
@@ -82,13 +82,13 @@ export function NodeTooltip({
           <p className="text-base font-semibold text-foreground truncate">
             {person.name}
           </p>
-          <p className="mt-0.5 text-[0.7rem] uppercase tracking-[0.18em] text-white/40 truncate">
+          <p className="mt-0.5 text-[0.7rem] uppercase tracking-[0.18em] text-foreground/40 truncate">
             {person.role}
           </p>
         </div>
       </div>
       {person.quote ? (
-        <p className="mt-3 text-sm italic leading-snug text-white/60 border-l-2 border-pink/40 pl-3">
+        <p className="mt-3 text-sm italic leading-snug text-foreground/60 border-l-2 border-pink/40 pl-3">
           &ldquo;{person.quote}&rdquo;
         </p>
       ) : null}
@@ -97,7 +97,7 @@ export function NodeTooltip({
           href={person.linkedinUrl}
           target="_blank"
           rel="noreferrer"
-          className="inline-flex items-center gap-1.5 rounded-lg bg-white/6 px-3 py-1.5 text-xs font-medium text-white/70 transition-colors hover:bg-white/12 hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-pink/70"
+          className="inline-flex items-center gap-1.5 rounded-lg bg-foreground/6 px-3 py-1.5 text-xs font-medium text-foreground/70 transition-colors hover:bg-foreground/12 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-pink/70"
         >
           <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
             <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
diff --git a/app/components/teams/TeamConstellation.tsx b/app/components/teams/TeamConstellation.tsx
index 7322234..6068656 100644
--- a/app/components/teams/TeamConstellation.tsx
+++ b/app/components/teams/TeamConstellation.tsx
@@ -119,7 +119,7 @@ export function TeamConstellation({
       >
         <svg
           aria-hidden="true"
-          className="absolute inset-0 h-full w-full overflow-visible"
+          className="absolute inset-0 h-full w-full overflow-visible text-foreground"
           viewBox={`0 0 ${box.width} ${box.height}`}
         >
           {layout.edges.map((edge, index) => {
@@ -132,7 +132,8 @@ export function TeamConstellation({
                 y1={trimmedEdge.y1}
                 x2={trimmedEdge.x2}
                 y2={trimmedEdge.y2}
-                stroke="rgba(255, 255, 255, 0.16)"
+                stroke="currentColor"
+                strokeOpacity="0.16"
                 strokeWidth="4"
                 strokeLinecap="round"
               />
@@ -183,8 +184,8 @@ export function TeamConstellation({
                 aria-label={`${node.person.name}, ${node.person.role}`}
                 className={`flex items-center justify-center rounded-full border transition-[transform,box-shadow,border-color] duration-300 ease-[cubic-bezier(0.16,1,0.3,1)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-pink/70 focus-visible:ring-offset-2 focus-visible:ring-offset-black ${
                   node.isLead
-                    ? "constellation-lead border-[3px] border-pink bg-[#1f1f1f] text-white/56 hover:scale-[1.04]"
-                    : "border-[3px] border-white/12 bg-[#1f1f1f] text-white/32 hover:scale-[1.07]"
+                    ? "constellation-lead border-[3px] border-pink bg-(--color-card) text-foreground/56 hover:scale-[1.04]"
+                    : "border-[3px] border-foreground/12 bg-(--color-card) text-foreground/32 hover:scale-[1.07]"
                 }`}
                 style={nodeButtonStyle}
                 onClick={
@@ -219,13 +220,13 @@ export function TeamConstellation({
 
       {showCaption ? (
         <div className="mt-6 w-[15rem] text-left">
-          <p className="text-[0.72rem] uppercase tracking-[0.18em] text-white/30">
+          <p className="text-[0.72rem] uppercase tracking-[0.18em] text-foreground/30">
             {layout.template.name}
           </p>
           <h3 className="text-3xl font-medium tracking-[-0.03em] text-foreground">
             {layout.team.label}
           </h3>
-          <p className="mt-2 text-[0.78rem] uppercase tracking-[0.1em] text-white/34">
+          <p className="mt-2 text-[0.78rem] uppercase tracking-[0.1em] text-foreground/34">
             {memberCountLabel}
           </p>
         </div>
diff --git a/app/components/teams/Teams.tsx b/app/components/teams/Teams.tsx
index 5ab7631..5e06ab2 100644
--- a/app/components/teams/Teams.tsx
+++ b/app/components/teams/Teams.tsx
@@ -406,7 +406,7 @@ export default function Teams() {
             opacity: star.opacity,
           };
           return (
-            <span key={star.id} className="absolute rounded-full bg-white" style={starStyle} />
+            <span key={star.id} className="absolute rounded-full bg-foreground" style={starStyle} />
           );
         })}
       </div>
@@ -421,7 +421,7 @@ export default function Teams() {
         >
           {mobileStars}
           <div className="relative mx-auto max-w-6xl">
-            <p className="text-[0.62rem] uppercase tracking-[0.2em] text-white/26">
+            <p className="text-[0.62rem] uppercase tracking-[0.2em] text-foreground/26">
               {TEAMS_COPY.eyebrow}
             </p>
             <h2 className={TEAMS_LAYOUT.mobileHeading}>
@@ -455,7 +455,7 @@ export default function Teams() {
       <section
         id="team"
         ref={mobileSectionRef}
-        className="relative bg-background"
+        className="relative"
         style={{ minHeight: `${100 + ORDERED_OFFICER_TEAMS.length * 22}vh` }}
       >
         <div className={`sticky top-0 overflow-hidden ${isAndroid ? TEAMS_LAYOUT.mobileViewportHeightAndroid : TEAMS_LAYOUT.mobileViewportHeight}`}>
@@ -467,7 +467,7 @@ export default function Teams() {
               className="shrink-0 overflow-y-auto px-5 pt-16 pb-3"
               style={{ maxHeight: isAndroid ? "52%" : "50%" }}
             >
-              <p className="text-[0.62rem] uppercase tracking-[0.2em] text-white/26">
+              <p className="text-[0.62rem] uppercase tracking-[0.2em] text-foreground/26">
                 {TEAMS_COPY.eyebrow}
               </p>
               <h2 className={TEAMS_LAYOUT.mobileHeading}>
@@ -481,7 +481,7 @@ export default function Teams() {
                 style={{ opacity: descVisible ? 1 : 0 }}
               >
                 {ORDERED_OFFICER_TEAMS[displayedTeamIndex]?.description ? (
-                  <p className="text-sm leading-relaxed text-white/50">
+                  <p className="text-sm leading-relaxed text-foreground/50">
                     {ORDERED_OFFICER_TEAMS[displayedTeamIndex]!.description}
                   </p>
                 ) : null}
@@ -493,15 +493,15 @@ export default function Teams() {
                       alt={`${ORDERED_OFFICER_TEAMS[displayedTeamIndex]?.label} team`}
                       width={400}
                       height={96}
-                      className="w-full rounded-xl object-cover border border-white/10"
+                      className="w-full rounded-xl object-cover border border-foreground/10"
                       style={{ maxHeight: "96px" }}
                     />
                   ) : (
                     <div
-                      className="flex w-full items-center justify-center rounded-xl border border-white/8 bg-white/[0.02]"
+                      className="flex w-full items-center justify-center rounded-xl border border-foreground/8 bg-foreground/[0.02]"
                       style={{ height: "72px" }}
                     >
-                      <p className="text-[0.68rem] uppercase tracking-[0.18em] text-white/20">
+                      <p className="text-[0.68rem] uppercase tracking-[0.18em] text-foreground/20">
                         Group photo coming soon
                       </p>
                     </div>
@@ -541,8 +541,8 @@ export default function Teams() {
                   key={i}
                   className={`h-1 rounded-full transition-all duration-300 ${
                     i === displayedTeamIndex
-                      ? "w-4 bg-white/60"
-                      : "w-1 bg-white/20"
+                      ? "w-4 bg-foreground/60"
+                      : "w-1 bg-foreground/20"
                   }`}
                 />
               ))}
@@ -572,7 +572,7 @@ export default function Teams() {
             return (
               <span
                 key={star.id}
-                className="absolute rounded-full bg-white"
+                className="absolute rounded-full bg-foreground"
                 style={starStyle}
               />
             );
@@ -580,7 +580,7 @@ export default function Teams() {
         </div>
 
         <div className="relative mx-auto max-w-7xl">
-          <p className="text-[0.62rem] uppercase tracking-[0.2em] text-white/26">
+          <p className="text-[0.62rem] uppercase tracking-[0.2em] text-foreground/26">
             {TEAMS_COPY.eyebrow}
           </p>
           <h2 className={TEAMS_LAYOUT.mobileHeading}>
@@ -593,7 +593,7 @@ export default function Teams() {
             {desktopLayouts.map((layout) => (
               <div
                 key={layout.team.id}
-                className="rounded-[28px] border border-white/10 bg-white/[0.03] p-6"
+                className="rounded-[28px] border border-foreground/10 bg-foreground/[0.03] p-6"
               >
                 <TeamConstellation
                   layout={layout}
@@ -618,7 +618,7 @@ export default function Teams() {
     <section
       id="team"
       ref={sectionRef}
-      className={`relative bg-background ${TEAMS_LAYOUT.desktopSectionMinHeight}`}
+      className={`relative ${TEAMS_LAYOUT.desktopSectionMinHeight}`}
     >
       <div className={`sticky top-0 overflow-visible ${TEAMS_LAYOUT.desktopViewportHeight}`}>
         <div aria-hidden="true" className="pointer-events-none absolute inset-0">
@@ -634,7 +634,7 @@ export default function Teams() {
             return (
               <span
                 key={star.id}
-                className="absolute rounded-full bg-white"
+                className="absolute rounded-full bg-foreground"
                 style={starStyle}
               />
             );
@@ -643,7 +643,7 @@ export default function Teams() {
 
         <div className={TEAMS_LAYOUT.desktopContainer}>
           <div className={`relative z-30 ${TEAMS_LAYOUT.introWidth}`}>
-            <p className="text-[0.62rem] uppercase tracking-[0.2em] text-white/26">
+            <p className="text-[0.62rem] uppercase tracking-[0.2em] text-foreground/26">
               {TEAMS_COPY.eyebrow}
             </p>
             <h2 className={TEAMS_LAYOUT.desktopHeading}>
@@ -652,7 +652,7 @@ export default function Teams() {
               {TEAMS_COPY.heading[1]}
             </h2>
             <p
-              className="mt-5 text-lg leading-relaxed text-white/50 transition-opacity duration-200"
+              className="mt-5 text-lg leading-relaxed text-foreground/50 transition-opacity duration-200"
               style={{ opacity: descVisible ? 1 : 0 }}
             >
               {ORDERED_OFFICER_TEAMS[displayedTeamIndex]?.description ?? ""}
@@ -669,15 +669,15 @@ export default function Teams() {
                   alt={`${ORDERED_OFFICER_TEAMS[displayedTeamIndex]?.label} team`}
                   width={320}
                   height={200}
-                  className="w-full rounded-2xl object-cover border border-white/10"
+                  className="w-full rounded-2xl object-cover border border-foreground/10"
                   style={{ maxWidth: "320px" }}
                 />
               ) : (
                 <div
-                  className="flex w-full items-center justify-center rounded-2xl border border-white/8 bg-white/[0.02]"
+                  className="flex w-full items-center justify-center rounded-2xl border border-foreground/8 bg-foreground/[0.02]"
                   style={{ maxWidth: "320px", height: "200px" }}
                 >
-                  <p className="text-[0.68rem] uppercase tracking-[0.18em] text-white/20">
+                  <p className="text-[0.68rem] uppercase tracking-[0.18em] text-foreground/20">
                     Group photo coming soon
                   </p>
                 </div>
diff --git a/app/components/timeline/RocketTrailAnimation.tsx b/app/components/timeline/RocketTrailAnimation.tsx
index 643e13c..d6eacd2 100644
--- a/app/components/timeline/RocketTrailAnimation.tsx
+++ b/app/components/timeline/RocketTrailAnimation.tsx
@@ -193,7 +193,7 @@ export default function RocketTrailAnimation() {
       >
         <svg
           viewBox="0 0 1371 402"
-          className="w-screen"
+          className="w-screen text-foreground"
           style={{ height: "auto", minWidth: isMobile ? "300px" : "900px", overflow: "visible" }}
           aria-hidden="true"
           xmlns="http://www.w3.org/2000/svg"
@@ -284,7 +284,7 @@ export default function RocketTrailAnimation() {
                     x={0}
                     y={labelBaseY}
                     textAnchor="middle"
-                    fill="white"
+                    fill="currentColor"
                     fontSize={yearFontSize}
                     fontWeight="700"
                     fontFamily="var(--font-satoshi, sans-serif)"
@@ -295,7 +295,7 @@ export default function RocketTrailAnimation() {
                     x={0}
                     y={labelBaseY + nameFontSize * 1.6}
                     textAnchor="middle"
-                    fill="white"
+                    fill="currentColor"
                     fontSize={nameFontSize}
                     fontWeight="600"
                     letterSpacing={nameLetterSpacing}
diff --git a/app/components/timeline/Timeline.tsx b/app/components/timeline/Timeline.tsx
index c733ce0..d98d48a 100644
--- a/app/components/timeline/Timeline.tsx
+++ b/app/components/timeline/Timeline.tsx
@@ -1,18 +1,58 @@
 "use client";
 
+import { useRef } from "react";
+import gsap from "gsap";
+import { useGSAP } from "@gsap/react";
+import { usePrefersReducedMotion } from "@/app/hooks/usePrefersReducedMotion";
 import { configureScrollTrigger } from "@/app/lib/scrollTrigger";
+import {
+  TIMELINE_LIGHTEN_PHASE,
+  TIMELINE_SECTION_DATA_ATTR,
+} from "../background/sceneConfig";
 import RocketTrailAnimation from "./RocketTrailAnimation";
-import { TIMELINE_LAYOUT } from "./sceneConfig";
+import { TIMELINE_EXIT_FADE, TIMELINE_LAYOUT } from "./sceneConfig";
 
 configureScrollTrigger();
 
 export default function Timeline() {
+  const sectionRef = useRef<HTMLElement>(null);
+  const stickyRef = useRef<HTMLDivElement>(null);
+  const prefersReducedMotion = usePrefersReducedMotion();
+
+  useGSAP(
+    () => {
+      const section = sectionRef.current;
+      const sticky = stickyRef.current;
+      if (!section || !sticky || prefersReducedMotion) {
+        return;
+      }
+
+      // Fade the sticky scene out in step with the page background's
+      // dark → light crossfade so white trail text never sits on a light
+      // background.
+      gsap.to(sticky, {
+        autoAlpha: 0,
+        ease: TIMELINE_EXIT_FADE.ease,
+        scrollTrigger: {
+          trigger: section,
+          start: TIMELINE_LIGHTEN_PHASE.start,
+          end: TIMELINE_LIGHTEN_PHASE.end,
+          scrub: TIMELINE_EXIT_FADE.scrub,
+        },
+      });
+    },
+    { scope: sectionRef, dependencies: [prefersReducedMotion] },
+  );
+
   return (
     <section
+      ref={sectionRef}
       id="hackathons"
+      {...{ [TIMELINE_SECTION_DATA_ATTR]: "" }}
       className={`relative ${TIMELINE_LAYOUT.minHeight}`}
     >
       <div
+        ref={stickyRef}
         className={`sticky top-0 overflow-hidden ${TIMELINE_LAYOUT.stickyViewportHeight}`}
       >
         <RocketTrailAnimation />
diff --git a/app/components/timeline/sceneConfig.ts b/app/components/timeline/sceneConfig.ts
index f71d2a6..55316b8 100644
--- a/app/components/timeline/sceneConfig.ts
+++ b/app/components/timeline/sceneConfig.ts
@@ -50,6 +50,13 @@ export const TIMELINE_LAYOUT = {
 
 export const MOBILE_TIMELINE_SCRUB = 0.6;
 
+// Sticky scene fade-out during the page background's dark → light
+// crossfade (scroll range comes from TIMELINE_LIGHTEN_PHASE).
+export const TIMELINE_EXIT_FADE = {
+  ease: "power1.in",
+  scrub: 0.3,
+} as const;
+
 export const TRAIL_WAVE = {
   numPoints: 80,
   startX: 202,
diff --git a/app/globals.css b/app/globals.css
index a815a93..2e4df7a 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -8,12 +8,14 @@
   --color-amber: #ffa21f;
   --color-black: #1a1a1a;
 
-  /* Semantic tokens */
-  --color-background: #1a1a1a;
-  --color-foreground: #ffffff;
-  --color-muted: #a3a3a3;
-  --color-surface: #f2f2f2;
-  --color-surface-foreground: #1a1a1a;
+  /* Semantic tokens — theme-aware, values declared on :root and
+     [data-theme="light"] below */
+  --color-background: var(--theme-background);
+  --color-foreground: var(--theme-foreground);
+  --color-muted: var(--theme-muted);
+  --color-surface: var(--theme-surface);
+  --color-surface-foreground: var(--theme-surface-foreground);
+  --color-card: var(--theme-card);
   --color-primary: #6c17fe;
   --color-accent: #f31667;
 
@@ -22,12 +24,68 @@
   --font-serif: var(--font-cormorant);
 }
 
+:root {
+  --theme-background: #1a1a1a;
+  --theme-foreground: #ffffff;
+  --theme-muted: #a3a3a3;
+  --theme-surface: #f2f2f2;
+  --theme-surface-foreground: #1a1a1a;
+  --theme-card: #171717;
+}
+
+[data-theme="light"] {
+  --theme-background: #f2f2f2;
+  --theme-foreground: #1a1a1a;
+  --theme-muted: #5f5f5f;
+  --theme-surface: #1a1a1a;
+  --theme-surface-foreground: #ffffff;
+  --theme-card: #ffffff;
+}
+
+/* Sections whose art direction is always dark (e.g. the hero scene)
+   opt out of the user theme by re-declaring the theme variables. */
+.theme-scope-dark {
+  --theme-background: #1a1a1a;
+  --theme-foreground: #ffffff;
+  --theme-muted: #a3a3a3;
+  --theme-surface: #f2f2f2;
+  --theme-surface-foreground: #1a1a1a;
+  --theme-card: #171717;
+}
+
 html,
 body {
   background: var(--color-background);
   color: var(--color-foreground);
 }
 
+/* ── Scrollbars — thicker, theme-aware ── */
+* {
+  scrollbar-width: auto;
+  scrollbar-color: color-mix(in srgb, var(--color-foreground) 28%, transparent)
+    transparent;
+}
+
+::-webkit-scrollbar {
+  width: 12px;
+  height: 12px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 9999px;
+  border: 3px solid transparent;
+  background-clip: content-box;
+  background-color: color-mix(in srgb, var(--color-foreground) 28%, transparent);
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: color-mix(in srgb, var(--color-foreground) 45%, transparent);
+}
+
 @keyframes hero-star-twinkle {
   0%,
   100% {
diff --git a/app/layout.tsx b/app/layout.tsx
index 846b95c..9a9376f 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -26,7 +26,20 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en" className={`${satoshi.variable} ${cormorant.variable} h-full antialiased`}>
+    <html
+      lang="en"
+      className={`${satoshi.variable} ${cormorant.variable} h-full antialiased`}
+      suppressHydrationWarning
+    >
+      <head>
+        {/* Apply the persisted theme before first paint to avoid a flash */}
+        <script
+          dangerouslySetInnerHTML={{
+            __html:
+              'try{if(localStorage.getItem("site-theme")==="light")document.documentElement.dataset.theme="light"}catch(e){}',
+          }}
+        />
+      </head>
       <body className="min-h-full flex flex-col">{children}</body>
     </html>
   );