Gate the intro camera descent behind a 'click to start' button

The descent auto-fired HOLD_MS after load; now the camera holds on the sky until the user clicks a 'click to start' button on the title overlay (a glass pill matching the subtitle, revealed once assets + fonts are ready). The same click is the user gesture that also starts the lobby music. Drops the now-unused HOLD_MS and the auto-descent timer.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/index.html

@@ -70,6 +70,7 @@
       <div class="subtitle-wrap">
         <p id="subtitle">♪ chill beats, freshly vended</p>
       </div>
+      <button id="start-btn" type="button">▶ click to start</button>
     </div>
     <div id="vending-label" class="hover-label"><span>♪ vend a vibe</span></div>
     <div id="collection-label" class="hover-label">

frontend/main.js

@@ -539,7 +539,6 @@ import("https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js")
 // Intro: hold on the sky, then ease the gaze down to the scene
 // ---------------------------------------------------------------------------
 
-const HOLD_MS = 3000; // sky time after everything (fonts included) has loaded
 const DESCENT_MS = 4600;
 
 const intro = { phase: "loading", t0: 0, idleStart: 0 };
@@ -558,9 +557,14 @@ const pageLoaded = new Promise((resolve) =>
     ? resolve()
     : window.addEventListener("load", resolve),
 );
+// Click-to-start: the camera holds on the sky until the user clicks. The button
+// is revealed (and made clickable) once assets + fonts are ready; the same click
+// also kicks off the lobby music (audio autoplay needs a user gesture).
+const startBtn = document.getElementById("start-btn");
 Promise.all([pageLoaded, document.fonts.ready]).then(() =>
-  setTimeout(startDescent, HOLD_MS),
+  startBtn.classList.add("ready"),
 );
+startBtn.addEventListener("click", startDescent);
 
 const easeInOutCubic = (t) =>
   t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;

frontend/style.css

@@ -109,6 +109,56 @@ body {
   }
 }
 
+#start-btn {
+  margin-top: 2.4rem;
+  pointer-events: none; /* the overlay ignores pointers; we opt in once ready */
+  cursor: pointer;
+  font-family: "Baloo 2", sans-serif;
+  font-weight: 700;
+  font-size: clamp(0.95rem, 2.2vw, 1.25rem);
+  letter-spacing: 0.12em;
+  text-transform: lowercase;
+  color: #ffffff;
+  padding: 0.7em 1.9em;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.16);
+  border: 1px solid rgba(255, 255, 255, 0.4);
+  backdrop-filter: blur(6px);
+  -webkit-backdrop-filter: blur(6px);
+  /* fades in via opacity only (a transform here would kill the backdrop blur,
+     per the subtitle note above); the glow uses box-shadow, also transform-free */
+  opacity: 0;
+  transition:
+    opacity 0.8s ease,
+    background 0.2s ease,
+    border-color 0.2s ease;
+}
+
+#start-btn.ready {
+  opacity: 1;
+  pointer-events: auto;
+  animation: start-glow 2.6s ease-in-out 0.6s infinite;
+}
+
+#start-btn:hover {
+  background: rgba(255, 255, 255, 0.3);
+  border-color: rgba(255, 255, 255, 0.7);
+}
+
+#start-btn:active {
+  background: rgba(255, 255, 255, 0.4);
+}
+
+@keyframes start-glow {
+  0%,
+  100% {
+    box-shadow: 0 0 0 0 rgba(173, 211, 255, 0);
+  }
+  50% {
+    box-shadow: 0 0 22px 2px rgba(173, 211, 255, 0.5);
+  }
+}
+
 @keyframes title-bob {
   from {
     transform: translateY(0);