Animation Updates

src/styles/global.css

@@ -308,3 +308,71 @@
 .vt-sky {
   view-transition-name: sky;
 }
+
+/* Hero expand/collapse morph. The Home hero section carries this name on Home;
+ * the NavBar carries it on every OTHER page. So leaving Home morphs the tall
+ * hero down into the nav bar (collapse), and arriving Home expands it back up
+ * from the nav bar. The custom animation below makes the morph a smooth
+ * vertical scale + position interpolation rather than the default cross-fade,
+ * so the starry field reads as growing/shrinking rather than fading. */
+.vt-hero-sky {
+  view-transition-name: hero-sky;
+}
+
+::view-transition-group(hero-sky) {
+  animation-duration: 0.4s;
+  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
+}
+::view-transition-old(hero-sky),
+::view-transition-new(hero-sky) {
+  /* A gentle height/scale blend reads as expand/collapse rather than a swap. */
+  animation-duration: 0.4s;
+  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
+  overflow: clip;
+}
+
+/* ---------------------------------------------------------------------------
+ * View Transitions — smooth cross-page navigation.
+ *
+ * Astro's <ClientRouter /> uses the native View Transitions API. Without the
+ * rules below the browser falls back to a blunt default cross-fade that feels
+ * harsh, and worse: the NEW page is snapshotted while its `.reveal` elements
+ * are still at opacity:0 (the scroll-reveal observer hasn't fired yet), so all
+ * content flashes out during the morph and re-appears after the swap. The two
+ * fixes here:
+ *
+ *   1. `::view-transition-group(root)` gets a short, soft duration + ease so
+ *      the swap is quick and gentle instead of slow and jarring.
+ *   2. `html:has(...)::view-transition-*` + an `astro:before-swap` class forces
+ *      every `.reveal` to `is-visible` DURING the transition — so the snapshot
+ *      of the incoming page shows its content, eliminating the flash. (The
+ *      reveal-init.ts observer still handles the normal scroll case.)
+ *
+ * Reduced-motion users get an instant swap (no animation).
+ * ------------------------------------------------------------------------- */
+@view-transition {
+  navigation: auto;
+}
+
+::view-transition-old(root),
+::view-transition-new(root) {
+  animation-duration: 0.28s;
+  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+/* During a transition, force all reveal content visible so the incoming page's
+ * snapshot isn't blank. `.vt-transitioning` is toggled by the script below on
+ * astro:before-swap and removed on astro:after-swap. */
+html.vt-transitioning .reveal {
+  opacity: 1 !important;
+  transform: none !important;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  ::view-transition-old(root),
+  ::view-transition-new(root),
+  ::view-transition-group(*) {
+    animation: none !important;
+  }
+}
+