header pass

src/pages/about.astro

@@ -14,7 +14,7 @@ import SectionHeader from "@components/layout/SectionHeader.astro";
 import SplitTransition from "@components/layout/SplitTransition.astro";
 import CelestialImage from "@components/mystic/CelestialImage.astro";
 import AlchemicalDivider from "@components/mystic/AlchemicalDivider.astro";
-import ConstellationField from "@components/mystic/ConstellationField.tsx";
+import AnimatedBackground from "@components/hero/AnimatedBackground.tsx";
 
 // Spec "Quick Facts", emojis -> mdi icons.
 const quickFacts = [
@@ -37,17 +37,13 @@ const quickFacts = [
   title="About"
   description="The human story behind the resume: Greg Kilmer on curiosity, tabletop RPGs, resin dice, and a Philadelphia apartment with too many board games."
 >
-  <!-- Header -->
-  <section class="relative overflow-hidden pb-10 pt-28 sm:pt-32">
-    <ConstellationField
-      client:idle
-      className="opacity-40"
-      tint="violet"
-      transitionName="sky"
-    />
-    <div class="container-prose relative z-10 flex flex-col gap-10">
+  <!-- Hero — full animated Milky Way field, matching the Interests hero. -->
+  <section class="relative min-h-[60vh] overflow-hidden pt-28 sm:pt-32">
+    <AnimatedBackground client:idle className="vt-sky" />
+    <div class="container-prose relative z-10 flex flex-col gap-10 py-16">
       <Reveal>
         <SectionHeader
+          tone="hero"
           kicker="About"
           icon="account-details"
           title="The person behind the projects"

src/pages/contact.astro

@@ -155,7 +155,8 @@ const social = [
         </section>
       </Reveal>
 
-      {/* Availability note */}
+      {
+        /* Availability note 
       <Reveal delay={120}>
         <p
           class="rounded-xl border-l-2 p-4 text-sm"
@@ -165,7 +166,8 @@ const social = [
           opportunities in AI/ML, app and cloud development, SAP BTP, and technical
           leadership.
         </p>
-      </Reveal>
+      </Reveal>*/
+      }
     </div>
 
     {/* Right: contact form */}

src/pages/index.astro

@@ -54,7 +54,7 @@ const cards = [
   <section
     class="vt-hero-sky relative flex min-h-[88vh] items-center overflow-hidden pt-16"
   >
-    <AnimatedBackground client:idle transitionName="sky" />
+    <AnimatedBackground client:idle className="vt-sky" />
 
     <div
       class="container-prose relative z-10 flex flex-col items-start gap-8 py-20"

src/pages/interests/index.astro

@@ -78,12 +78,13 @@ const interests = [
     {
       /* Full animated Milky Way field + stars, matching the Home hero treatment. */
     }
-    <AnimatedBackground client:idle transitionName="sky" />
+    <AnimatedBackground client:idle className="vt-sky" />
     <div
       class="container-prose relative z-10 flex flex-col items-start gap-6 py-16"
     >
       <Reveal>
         <SectionHeader
+          tone="hero"
           kicker="The personal wing"
           icon="heart"
           title="Interests"

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">