@ Banner: drop column morph + .enter to stop SPA-nav glitches

Two related glitches when navigating between / and a sketch:

- "Page slides down dramatically + fades" on outbound nav from a
  pinned state. Cause: <section class="column" transition:name="column">
  made the browser morph column's bbox between OLD and NEW pages
  during view transition. With pinned sticky descendants, OLD column
  is much taller (banner at e.g. 21% relative offset); NEW sketch
  column is ~1500px, scaling that 21% lands the banner at viewport
  y≈315 — a ~250px drop during the morph, with h1 and list items
  getting the same treatment. Amplitude tracked scroll position
  because higher scroll = higher relative offset in OLD column.
  Removing the name leaves the column under Astro's generic page
  fade; nothing repositions. Stage keeps its name (canvas needs to
  persist across nav).

- Banner sometimes invisible after SPA nav back from a sketch. The
  banner-wrap had .enter class which sets opacity: 0 in its initial
  keyframe with animation-fill-mode: both. If the animation timeline
  paused / stalled (view transitions can suspend it), the banner
  was stranded at opacity 0 even though init() runs synchronously
  to remove the class — there was a race window. Dropping .enter
  from the markup entirely removes the race; h1 / .sub / list items
  still get their staggered reveal on first load.

Also gave banner-wrap its own transition:name="banner" as a belt-
and-braces — even if column ever gets a name back, banner now has
an independent pseudo anchored to its own bbox.

Author: RuitingMa

src/layouts/BaseLayout.astro

@@ -59,7 +59,19 @@ const ogImage = image ? new URL(image, Astro.site).toString() : undefined;
         <slot name="stage" />
         <span class="stage-pause" aria-hidden="true">paused</span>
       </aside>
-      <section class="column" transition:name="column">
+      {/* No transition:name on column. With it, the browser morphs
+          the column's bbox between OLD and NEW pages — and when the
+          user is scrolled with sticky elements pinned (banner, header)
+          the OLD bbox is much taller than NEW (sketch pages have less
+          content), so during the morph every descendant is repositioned
+          by relative offset (e.g. a banner pinned at scrollY=1000 sits
+          at ~21% of the OLD column; scaled into a 1500px NEW column it
+          lands at viewport y=315 — dropping ~250px during nav). h1 and
+          list items get the same treatment. Without the name, the
+          column just fades as a generic page-level transition; nothing
+          repositions. Stage keeps its name because the canvas needs to
+          persist its render across navigation. */}
+      <section class="column">
         <slot />
       </section>
     </main>

src/pages/index.astro

@@ -62,7 +62,29 @@ const BANNER_H = 120;
       <p class="sub enter" style="--i: 1;">SUNKEN KEEP / 保持沉没</p>
     </header>
 
-    <div class="banner-wrap enter" style={`--i: 2; --banner-h: ${BANNER_H}px;`}>
+    {/* No `.enter` class on the banner-wrap. The fade-in is purely
+        cosmetic and its `animation-fill-mode: both` initial frame
+        (opacity: 0) can strand the banner invisible if the timeline
+        ever gets paused or stalls — view transitions on SPA nav back
+        from a sketch can do that intermittently, even after init's
+        classList.remove('enter') would normally fire. Skipping the
+        animation entirely on the banner removes the race; h1 / .sub /
+        list items still get their .enter staggered reveal.
+
+        transition:name lifts the banner out of the column's view
+        transition. The column has its own name and morphs between
+        OLD/NEW bboxes — when scrolled, OLD column is much taller than
+        NEW (sketch pages have less content), so its descendants get
+        positioned by *relative offset* during the morph. A pinned
+        banner at scrollY=1000 lives at ~21% down the OLD column;
+        scaled into NEW's ~1500px column it lands at viewport y=315 —
+        the "big downward drop + fade" the user saw on nav. With its
+        own transition name the banner gets an independent pseudo
+        anchored to its current bbox, so it just fades from where it
+        sits. The further scrolled (= higher % in OLD column), the
+        bigger the drop without this — explains why amplitude tracks
+        scroll position. */}
+    <div class="banner-wrap" style={`--banner-h: ${BANNER_H}px;`} transition:name="banner">
       <CineBanner
         sources={["/banner/lobby/lamp.mp4"]}
         height={BANNER_H}