header pass

src/pages/professional/index.astro

@@ -40,11 +40,12 @@ const projects = (await getCollection("projects")).sort(
   <!-- Page header -->
   <section class="relative overflow-hidden pt-28 sm:pt-32">
     {
-      /* Circuit-board field. Shares view-transition-name "sky" with the star
-        fields on other pages, so navigating here morphs constellations into
-        circuitry. */
+      /* Circuit-board field. Now self-contained (nebula gradient + canvas inside
+        one root div), mirroring AnimatedBackground's structure so the morph from
+        a star hero is element-to-element equivalent — no separate gradient
+        flash. Shares view-transition-name "sky" via vt-sky. */
     }
-    <CircuitField client:idle className="opacity-70" transitionName="sky" />
+    <CircuitField client:idle className="vt-sky opacity-80" />
     {/* Slowly rotating astrolabe ornament behind the header. */}
     <Astrolabe
       class="pointer-events-none absolute z-0 -right-48 -top-24 h-[34rem] w-[34rem] animate-spin-slow"
@@ -53,18 +54,24 @@ const projects = (await getCollection("projects")).sort(
     <div class="container-prose relative z-10 flex flex-col gap-10">
       <Reveal>
         <SectionHeader
+          tone="hero"
           kicker="Professional"
           icon="briefcase"
           title="Resume & Portfolio"
           subtitle="Clean, confident, skimmable."
         />
       </Reveal>
-      <Reveal delay={80}>
-        <SectionNav />
-      </Reveal>
     </div>
   </section>
 
+  {/* In-page section nav — sits BELOW the hero (out of the morphing region),
+      opaque against the dark surface so it stays readable while scrolling. */}
+  <div class="container-prose relative z-20 pt-4">
+    <Reveal>
+      <SectionNav />
+    </Reveal>
+  </div>
+
   <div class="container-prose flex flex-col gap-20 py-16 sm:gap-24 sm:py-20">
     {/* ===== 1. Summary ===== */}
     <section id="summary" class="scroll-mt-28 flex flex-col gap-6">