chore: deploy private lightloom build

frontend/css/immersive.css

@@ -313,3 +313,31 @@ body.in-world .controls .ctl:nth-child(5) { animation-delay: 0.32s; }
   .status--work::after, .mic.is-recording { animation: none !important; }
   *, *::before, *::after { transition-duration: 0.01ms !important; }
 }
+
+/* ---- IF-TIME polish: wordmark · title-card · entrance fades · contrast ---- */
+/* 8 · the wordmark reads as a logo: gilded LOOM + a glowing projector dot */
+.hud__brand { display: inline-flex; align-items: center; letter-spacing: 0.2em; opacity: 0.96; }
+.hud__brand b { color: var(--amber); font-weight: 700; }
+.hud__brand::before { content: ""; width: 6px; height: 6px; border-radius: 50%; margin-right: 9px; flex: none;
+  background: var(--amber); box-shadow: 0 0 9px var(--amber), 0 0 3px var(--amber); }
+
+/* 9 · the Director NAMING your world is a cinematic title card: tracking-in + a growing gold filet */
+.world-title { letter-spacing: 0.3em; transition: opacity 0.8s ease, transform 0.8s ease, letter-spacing 0.8s var(--ease); }
+.world-title.is-on { letter-spacing: 0.015em; }
+.world-title::after { content: ""; display: block; height: 1px; width: 0; margin: 7px auto 0;
+  background: linear-gradient(90deg, transparent, var(--amber), transparent); transition: width 0.8s var(--ease) 0.12s; }
+.world-title.is-on::after { width: 130px; }
+
+/* 11 · keepsake + explore cross-fade in (the panel already pops); stagger the keepsake text */
+.keepsake, .explore3d { animation: llFade 0.42s ease both; }
+.keepsake__title { animation: llRise 0.5s var(--ease) both 0.12s; }
+.keepsake__caption { animation: llRise 0.5s var(--ease) both 0.2s; }
+.keepsake__notes { animation: llRise 0.5s var(--ease) both 0.28s; }
+
+/* 13 · idle orchestra labels crisp on a big projector, not muddy */
+.orch { color: rgba(241, 234, 217, 0.52); }
+
+@media (prefers-reduced-motion: reduce) {
+  .keepsake, .explore3d, .keepsake__title, .keepsake__caption, .keepsake__notes {
+    animation: none !important; opacity: 1 !important; transform: none !important; }
+}

frontend/index.html

@@ -17,6 +17,9 @@
       name="description"
       content="Speak, and your world unrolls ahead of you. Lightloom turns your voice into an endless, explorable 3D world — tiny local models listen, direct, paint and give depth to every scene in real time."
     />
+    <!-- Preload the self-hosted hero fonts so the title card / wordmark never FOUT-flash Georgia first. -->
+    <link rel="preload" as="font" type="font/woff2" crossorigin href="/assets/fonts/Fraunces-Variable.woff2" />
+    <link rel="preload" as="font" type="font/woff2" crossorigin href="/assets/fonts/Inter-Variable.woff2" />
     <link rel="stylesheet" href="/frontend/css/tokens.css" />
     <link rel="stylesheet" href="/frontend/css/immersive.css" />
     <script type="importmap">
@@ -31,7 +34,7 @@
 
     <!-- Top HUD: brand + the live orchestra (which tiny model is working now) + counter. -->
     <header id="hud" class="hud">
-      <span class="hud__brand">LIGHTLOOM</span>
+      <span class="hud__brand">LIGHT<b>LOOM</b></span>
       <nav class="orchestra" aria-label="Model orchestra">
         <span class="orch" id="orch-asr"><i></i>Voice</span>
         <span class="orch" id="orch-director"><i></i>Director</span>

frontend/js/controller.js

@@ -700,7 +700,17 @@ const controller = {
 
   _about(show) {
     const el = document.getElementById("about");
-    if (el) el.hidden = !show;
+    if (!el) return;
+    el.hidden = !show;
+    if (show) {
+      this._aboutReturn = document.activeElement;
+      const c = document.getElementById("about-close"); if (c) { try { c.focus(); } catch (_) {} }
+      this._aboutKey = (e) => { if (e.key === "Escape") this._about(false); };
+      document.addEventListener("keydown", this._aboutKey);
+    } else {
+      if (this._aboutKey) { document.removeEventListener("keydown", this._aboutKey); this._aboutKey = null; }
+      const r = this._aboutReturn; if (r && r.focus) { try { r.focus(); } catch (_) {} } // restore focus to the opener
+    }
   },
 
   setReducedMotion(on, fromOS) {
@@ -712,20 +722,12 @@ const controller = {
     if (!fromOS) try { localStorage.setItem("ll.rm", this.reducedMotion ? "1" : "0"); } catch (_) {}
   },
 
-  // English-only app (the hackathon is judged in English): the language is locked to "en".
-  setLang() {
-    this.lang = "en";
-    this._applyLang("en");
-  },
-
   _applyLang(lang) {
     document.documentElement.setAttribute("lang", lang);
     document.querySelectorAll("[data-en],[data-es]").forEach((n) => {
       if (n.hasAttribute("data-en") && !n.hasAttribute("data-es")) n.hidden = lang !== "en";
       else if (n.hasAttribute("data-es") && !n.hasAttribute("data-en")) n.hidden = lang !== "es";
     });
-    const lb = document.getElementById("lang-btn");
-    if (lb) lb.textContent = lang.toUpperCase();
     this._setCount();
   },