diff --git a/app/globals.css b/app/globals.css
index 87057292..e55a75d8 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -109,6 +109,10 @@
    3. Base styles — applied to plain HTML elements before any classes hit.
    --------------------------------------------------------------------------- */
 @layer base {
+  html {
+    background: var(--bg);
+  }
+
   html {
     scroll-behavior: smooth;
   }
@@ -135,6 +139,10 @@
   }
 }
 
+html[data-ui-ready="0"] body {
+  opacity: 0;
+}
+
 /* ---------------------------------------------------------------------------
    4. Site shell + ambient effects
    The .site-shell class is on the <main> element in page.tsx. The two
diff --git a/app/layout.tsx b/app/layout.tsx
index 79814b20..64e6e342 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -62,11 +62,36 @@ export default function RootLayout({
   children,
 }: Readonly<{ children: React.ReactNode }>) {
   return (
-    <html lang="en-GB" suppressHydrationWarning>
+    <html lang="en-GB" suppressHydrationWarning data-ui-ready="0">
+      <head>
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
+              (function () {
+                var root = document.documentElement;
+                root.dataset.uiReady = "0";
+                try {
+                  var consent = window.localStorage.getItem("novarix-cookie-consent");
+                  var introSeen = window.sessionStorage.getItem("novarix-intro-seen");
+                  var shouldShowBanner = consent !== "ack" && consent !== "rst";
+                  var shouldPlayIntro = !shouldShowBanner && !introSeen;
+
+                  root.dataset.showCookieBanner = shouldShowBanner ? "1" : "0";
+                  root.dataset.showIntro = shouldPlayIntro ? "1" : "0";
+                } catch (error) {
+                  root.dataset.showCookieBanner = "1";
+                  root.dataset.showIntro = "0";
+                }
+                root.dataset.uiReady = "1";
+              })();
+            `,
+          }}
+        />
+      </head>
       <body>
         {children}
         <CookieBanner />
       </body>
     </html>
   );
-}
\ No newline at end of file
+}
diff --git a/app/page.tsx b/app/page.tsx
index bca523f0..6b582793 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -31,6 +31,8 @@ import { openCookieBanner } from "@/components/CookieBanner";
 
 // Type for the mouse-pointer position used to move the background glow.
 type PointerState = { x: number; y: number };
+const INTRO_SEEN_KEY = "novarix-intro-seen";
+const INTRO_EVENT = "novarix:start-intro";
 
 export default function HomePage() {
   // ---------------------------------------------------------------------------
@@ -40,43 +42,72 @@ export default function HomePage() {
   //  pointer    — the mouse position (in % of page width/height). Used by the
   //               soft glow that follows the cursor in the background.
   // ---------------------------------------------------------------------------
-  const [showIntro, setShowIntro] = useState(false);
+  const [showIntro, setShowIntro] = useState(() => {
+    if (typeof document === "undefined") return false;
+    return document.documentElement.dataset.showIntro === "1";
+  });
   const [pointer, setPointer] = useState<PointerState>({ x: 50, y: 22 });
 
   // ---------------------------------------------------------------------------
   //  INTRO OVERLAY EFFECT
   //  Plays the animated logo + wordmark the first time someone visits the
-  //  site in this browser tab. We remember they've seen it using
-  //  sessionStorage so it doesn't replay on every navigation. The intro lasts
-  //  a little under 4 seconds, with a softer fade into the main page.
+  //  site in this browser tab. We decide before hydration whether to play it,
+  //  which avoids the homepage flashing briefly before the intro appears.
+  //  After the user accepts cookies on their first visit, we trigger the intro
+  //  immediately from the banner close action.
   // ---------------------------------------------------------------------------
   useEffect(() => {
+    function playIntro() {
+      document.documentElement.dataset.showIntro = "1";
+      setShowIntro(true);
+      try {
+        window.sessionStorage.setItem(INTRO_SEEN_KEY, "true");
+      } catch {
+        /* storage unavailable — silently ignore */
+      }
+
+      const timer = window.setTimeout(() => {
+        document.documentElement.dataset.showIntro = "0";
+        setShowIntro(false);
+      }, 3950);
+
+      return timer;
+    }
+
+    let timer: number | null = null;
+
     try {
-      const introSeen = window.sessionStorage.getItem("novarix-intro-seen");
-      // Only set the "seen" flag if the user has accepted cookies. Without
-      // consent we still play the intro — we just don't remember it played.
+      const introSeen = window.sessionStorage.getItem(INTRO_SEEN_KEY);
       const consent = window.localStorage.getItem("novarix-cookie-consent");
+      const shouldPlayNow =
+        document.documentElement.dataset.showIntro === "1" &&
+        consent === "ack" &&
+        !introSeen;
 
-      if (!introSeen) {
-        // Sync once with sessionStorage on first client mount.
+      if (shouldPlayNow) {
+        timer = playIntro();
+      } else {
+        document.documentElement.dataset.showIntro = "0";
         // eslint-disable-next-line react-hooks/set-state-in-effect
-        setShowIntro(true);
-        if (consent === "ack") {
-          window.sessionStorage.setItem("novarix-intro-seen", "true");
-        }
-
-        // The SVG's built-in stroke + fill animation lasts ~3s.
-        // We hold a little longer so the page underneath can ease in while
-        // the overlay fades away.
-        const timer = window.setTimeout(() => {
-          setShowIntro(false);
-        }, 3950);
-
-        return () => window.clearTimeout(timer);
+        setShowIntro(false);
       }
     } catch {
-      /* storage unavailable — silently skip the intro */
+      document.documentElement.dataset.showIntro = "0";
+      // eslint-disable-next-line react-hooks/set-state-in-effect
+      setShowIntro(false);
     }
+
+    function handleStartIntro() {
+      if (timer !== null) window.clearTimeout(timer);
+      timer = playIntro();
+    }
+
+    window.addEventListener(INTRO_EVENT, handleStartIntro);
+
+    return () => {
+      if (timer !== null) window.clearTimeout(timer);
+      window.removeEventListener(INTRO_EVENT, handleStartIntro);
+    };
   }, []);
 
   // ---------------------------------------------------------------------------
diff --git a/components/CookieBanner.tsx b/components/CookieBanner.tsx
index d5bdcf77..095d2c76 100644
--- a/components/CookieBanner.tsx
+++ b/components/CookieBanner.tsx
@@ -28,28 +28,35 @@ import { site } from "@/content";
 const CONSENT_KEY = "novarix-cookie-consent";
 const INTRO_SEEN_KEY = "novarix-intro-seen";
 const REOPEN_EVENT = "novarix:open-cookie-banner";
+const INTRO_EVENT = "novarix:start-intro";
 
 type Consent = "unknown" | "ack" | "rst";
 
 export default function CookieBanner() {
-  // Start hidden on the server and on first client paint to avoid a flash.
-  const [visible, setVisible] = useState(false);
+  // Start from the pre-hydration decision made in layout.tsx so the banner
+  // can appear immediately on first visit without waiting for a delayed effect.
+  const [visible, setVisible] = useState(() => {
+    if (typeof document === "undefined") return false;
+    return document.documentElement.dataset.showCookieBanner === "1";
+  });
 
   // Read the stored consent on mount and decide whether to show the banner.
   useEffect(() => {
     try {
       const stored = window.localStorage.getItem(CONSENT_KEY) as Consent | null;
       if (stored !== "ack" && stored !== "rst") {
-        // No decision yet — show the banner. We delay slightly so the page
-        // settles in first; feels less aggressive than appearing instantly.
-        const t = window.setTimeout(() => setVisible(true), 600);
-        return () => window.clearTimeout(t);
+        document.documentElement.dataset.showCookieBanner = "1";
+        // eslint-disable-next-line react-hooks/set-state-in-effect
+        setVisible(true);
+      } else {
+        document.documentElement.dataset.showCookieBanner = "0";
       }
     } catch {
       // localStorage unavailable (private mode, blocked, etc.) — show the
       // banner so the user is still told. Sync-once-on-mount is a legitimate
       // use of setState in an effect.
       // eslint-disable-next-line react-hooks/set-state-in-effect
+      document.documentElement.dataset.showCookieBanner = "1";
       setVisible(true);
     }
   }, []);
@@ -67,10 +74,13 @@ export default function CookieBanner() {
       if (choice === "rst") {
         // Honour the rejection by clearing any non-consent storage.
         window.sessionStorage.removeItem(INTRO_SEEN_KEY);
+      } else {
+        window.dispatchEvent(new Event(INTRO_EVENT));
       }
     } catch {
       /* storage unavailable — nothing to do */
     }
+    document.documentElement.dataset.showCookieBanner = "0";
     setVisible(false);
   }
 
@@ -81,7 +91,7 @@ export default function CookieBanner() {
       role="dialog"
       aria-live="polite"
       aria-label="Cookie consent"
-      className="fixed inset-x-0 bottom-0 z-[1500] flex justify-center p-3 sm:p-5"
+      className="fixed inset-x-0 bottom-0 z-[2500] flex justify-center p-3 sm:p-5"
     >
       <div className="pointer-events-auto w-full max-w-3xl rounded-2xl border border-[var(--border-strong)] bg-[var(--surface-strong)] p-4 shadow-[0_24px_60px_-20px_oklch(0_0_0/0.45)] backdrop-blur-xl sm:p-5">
         <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between sm:gap-6">
