Refactor overlay behavior to improve user interaction during descent transition. The start button now has its pointer events disabled when the overlay is hidden, preventing click interference with underlying elements while maintaining a smooth fade-out effect.

frontend/main.js

@@ -550,10 +550,8 @@ function startDescent() {
   intro.phase = "descending";
   intro.t0 = performance.now();
   overlay.classList.add("hidden");
-  // The overlay only fades out (opacity), so its still-`ready` start button
-  // would stay pinned on top and swallow clicks meant for the scene behind it
-  // (e.g. the bench / cassette collection). Hide the spent button outright.
-  startBtn.hidden = true;
+  // The button stops capturing clicks via CSS (#title-overlay.hidden #start-btn)
+  // so it can keep fading out with the overlay instead of popping out of layout.
 }
 
 const pageLoaded = new Promise((resolve) =>

frontend/style.css

@@ -35,6 +35,16 @@ body {
   transform: translateY(-48px);
 }
 
+/* Once the intro is dismissed the overlay only fades (no display:none, so the
+   exit animation can play). But the spent start button keeps .ready, i.e.
+   pointer-events: auto, leaving an invisible button on top that swallows clicks
+   on the scene behind it (e.g. the bench / cassette collection). Drop its
+   pointer-events the instant the overlay hides — it still fades out in place,
+   so there's no layout jump. */
+#title-overlay.hidden #start-btn {
+  pointer-events: none;
+}
+
 #title {
   font-family: "Baloo 2", sans-serif;
   font-weight: 800;