Animation Updates

src/layouts/BaseLayout.astro

@@ -43,6 +43,10 @@ const {
   ogImage,
 } = Astro.props;
 
+// True on the Home page. Used to switch the NavBar's view-transition-name so
+// the Home hero can morph into / out of the nav bar (expand/collapse effect).
+const isHome = Astro.url.pathname === '/';
+
 const fullTitle = title
   ? `${title} | ${siteIdentity.name}`
   : `${siteIdentity.name} — Developer. Maker. Storyteller.`;
@@ -95,14 +99,28 @@ const ogImageUrl = ogImage
       import '@/scripts/reveal-init';
     </script>
 
+    <!-- View Transitions flash-killer. The incoming page is snapshotted with its
+         `.reveal` elements still at opacity:0 (the observer hasn't fired yet),
+         which makes content vanish during the morph. This toggles a class on
+         <html> around the swap so global.css forces reveals visible mid-flight,
+         then lets the observer take over for scroll reveals on the new page. -->
+    <script is:inline>
+      document.addEventListener('astro:before-swap', () => {
+        document.documentElement.classList.add('vt-transitioning');
+      });
+      document.addEventListener('astro:after-swap', () => {
+        document.documentElement.classList.remove('vt-transitioning');
+      });
+    </script>
+
     <ClientRouter />
   </head>
-  <body data-surface={surface}>
+  <body data-surface={surface} data-page={isHome ? 'home' : 'other'}>
     <a href="#main" class="sr-only focus:not-sr-only focus:fixed focus:top-2 focus:left-2 focus:z-[100] focus:rounded-lg focus:bg-(--color-amber) focus:px-4 focus:py-2 focus:text-(--color-ink)">
       Skip to content
     </a>
 
-    <NavBar />
+    <NavBar isHome={isHome} />
 
     <main id="main">
       <slot />