frontend/css/immersive.css

/* Lightloom · immersive.css — the full-bleed corridor shell.
   The 3D world fills the screen; everything else floats over it as light chrome.
   Uses tokens.css variables where present, with safe fallbacks. */

:root {
  --ink: #f1ead9;
  --ink-soft: rgba(241, 234, 217, 0.72);
  --gold: #e7b75a;
  --atmo: #07080c;
  --glass: rgba(12, 13, 18, 0.46);
  --glass-line: rgba(241, 234, 217, 0.16);
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-ui: "Inter", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
/* The HTML `hidden` attribute must win over our display:grid/flex rules below. */
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; background: var(--atmo); color: var(--ink); font-family: var(--font-ui); overflow: hidden; }

/* ---- the world ---- */
#world-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; z-index: 0; }
#world-veil {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(130% 100% at 50% 40%, transparent 60%, rgba(0, 0, 0, 0.38) 100%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.16), transparent 18% 62%, rgba(0, 0, 0, 0.48));
}

/* ---- top HUD ---- */
.hud {
  position: fixed; top: 0; left: 0; right: 0; z-index: 6;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px clamp(16px, 3vw, 34px);
  pointer-events: none;
}
.hud__brand { font-family: var(--font-ui); font-weight: 700; letter-spacing: 0.22em; font-size: 13px; color: var(--ink); opacity: 0.92; }
.hud__count { font-size: 12px; letter-spacing: 0.14em; color: var(--ink-soft); min-width: 64px; text-align: right; text-transform: uppercase; }
.orchestra { display: flex; gap: 8px; }
.orch {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(241, 234, 217, 0.4);
  padding: 5px 11px; border-radius: 999px;
  background: var(--glass); border: 1px solid transparent;
  backdrop-filter: blur(7px); transition: color 0.3s, border-color 0.3s, background 0.3s;
}
.orch i { width: 6px; height: 6px; border-radius: 50%; background: rgba(241, 234, 217, 0.3); transition: background 0.3s, box-shadow 0.3s; }
.orch.is-active {
  color: var(--ink); border-color: rgba(231, 183, 90, 0.55);
  background: rgba(231, 183, 90, 0.1);
  box-shadow: 0 0 18px rgba(231, 183, 90, 0.22), inset 0 0 12px rgba(231, 183, 90, 0.08);
}
.orch.is-active i { background: var(--gold); box-shadow: 0 0 10px var(--gold); animation: orchPulse 1.1s ease-in-out infinite; }
@keyframes orchPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
/* Baton handoff: the chip that JUST lit flares once, like a conductor passing the baton. */
.orch.is-handoff { animation: orchBaton 0.62s var(--ease, cubic-bezier(0.4, 0, 0.2, 1)); }
@keyframes orchBaton {
  0%   { box-shadow: 0 0 0 0 rgba(231, 183, 90, 0.5), 0 0 18px rgba(231, 183, 90, 0.22); transform: translateY(0); }
  40%  { box-shadow: 0 0 0 7px rgba(231, 183, 90, 0), 0 0 26px rgba(231, 183, 90, 0.45); transform: translateY(-1px); }
  100% { box-shadow: 0 0 0 0 rgba(231, 183, 90, 0), 0 0 18px rgba(231, 183, 90, 0.22); transform: translateY(0); }
}
body.reduced-motion .orch.is-handoff { animation: none; }

/* "Now playing" — the live model's one-line job, so a judge reads WHICH tiny model is working. */
.hud__now {
  position: fixed; left: 50%; top: 86px; transform: translateX(-50%) translateY(-4px);
  z-index: 6; pointer-events: none; opacity: 0; white-space: nowrap;
  font-size: 12px; letter-spacing: 0.04em; color: var(--ink-soft);
  background: var(--glass); border: 1px solid var(--glass-line); border-radius: 999px;
  padding: 5px 14px; backdrop-filter: blur(7px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.hud__now.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }
.hud__now b { color: var(--gold); font-weight: 600; font-style: normal; }
@media (max-width: 640px) { .hud__now { display: none; } }

/* ---- intro ---- */
/* A clean, lower-anchored cluster: the living world fills the top two-thirds and stays
 * the star; only a small mic + one line invite you to speak. The container itself does
 * not capture pointer events (so the world is never "blocked"); its controls do. */
.intro {
  position: fixed; inset: 0; z-index: 5;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 14px;
  text-align: center; padding: 24px 24px clamp(40px, 9vh, 96px);
  transition: opacity 0.7s ease, transform 0.7s ease; pointer-events: none;
}
.intro > * { pointer-events: auto; }
.intro.is-gone { opacity: 0; transform: translateY(12px); pointer-events: none; }
.intro__tag { font-family: var(--font-display); font-style: italic; font-size: clamp(15px, 2vw, 21px); color: var(--ink); margin: 0; text-shadow: 0 1px 14px rgba(0, 0, 0, 0.85); }

/* the hero mic */
.mic {
  position: relative; width: 108px; height: 108px; margin-top: 4px;
  border-radius: 50%; border: 0; cursor: pointer;
  background: radial-gradient(circle at 50% 40%, rgba(231, 183, 90, 0.22), rgba(12, 13, 18, 0.5));
  display: grid; place-items: center; transition: transform 0.25s ease;
}
.mic:hover { transform: scale(1.06); }
.mic__dot { font-size: 44px; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.6)); }
.mic__ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(231, 183, 90, 0.55); animation: micRing 2.6s ease-out infinite; }
.mic__ring::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(231, 183, 90, 0.35); animation: micRing 2.6s ease-out infinite 1.3s; }
@keyframes micRing { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(1.5); opacity: 0; } }
.mic.is-recording { background: radial-gradient(circle at 50% 40%, rgba(224, 96, 86, 0.32), rgba(12, 13, 18, 0.55)); }
.mic.is-recording .mic__ring { border-color: rgba(224, 96, 86, 0.7); animation-duration: 1.1s; }
.mic__hint { font-size: 13px; color: var(--ink-soft); margin: 4px 0 0; max-width: 30ch; }

.intro__alt { display: flex; gap: 20px; margin-top: 6px; }
.ghost { background: none; border: 0; color: var(--ink-soft); font-size: 13px; cursor: pointer; border-bottom: 1px dotted rgba(241, 234, 217, 0.35); padding: 2px 0; transition: color 0.2s; }
.ghost:hover { color: var(--ink); }

.composer { display: flex; flex-direction: column; gap: 10px; width: min(620px, 90vw); margin-top: 6px; }
.composer__text {
  width: 100%; resize: vertical; border-radius: 14px; padding: 14px 16px;
  background: var(--glass); border: 1px solid var(--glass-line); color: var(--ink);
  font-family: var(--font-display); font-size: 16px; line-height: 1.5; backdrop-filter: blur(8px);
}
.composer__text:focus { outline: none; border-color: rgba(231, 183, 90, 0.5); }
.begin {
  align-self: center; padding: 11px 26px; border-radius: 999px; cursor: pointer;
  background: linear-gradient(180deg, var(--gold), #c8932f); color: #1a1206; border: 0;
  font-weight: 600; letter-spacing: 0.03em; box-shadow: 0 6px 20px rgba(231, 183, 90, 0.25);
  transition: transform 0.2s; font-size: 15px;
}
.begin:hover { transform: translateY(-1px); }

/* ---- floating transcript ---- */
.transcript {
  position: fixed; left: 50%; bottom: 13%; transform: translateX(-50%) translateY(8px);
  z-index: 5; max-width: min(70ch, 86vw); text-align: center; pointer-events: none;
  font-family: var(--font-display); font-style: italic; font-size: clamp(17px, 2.3vw, 27px);
  color: var(--ink); line-height: 1.35; opacity: 0;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 2px 16px rgba(0, 0, 0, 0.8);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.transcript.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---- world title (the Director names your world) ---- */
.world-title {
  position: fixed; left: 50%; top: 54px; transform: translateX(-50%) translateY(-6px);
  z-index: 6; max-width: 84vw; text-align: center; pointer-events: none;
  font-family: var(--font-display); font-style: italic; font-size: clamp(15px, 2vw, 22px);
  color: var(--gold); letter-spacing: 0.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.92), 0 0 22px rgba(231, 183, 90, 0.25);
  opacity: 0; transition: opacity 0.8s ease, transform 0.8s ease;
}
.world-title.is-on { opacity: 0.94; transform: translateX(-50%) translateY(0); }

/* ---- status line ---- */
.status {
  position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%);
  z-index: 6; font-size: 13px; color: var(--ink-soft); pointer-events: none;
  background: var(--glass); padding: 7px 16px; border-radius: 999px; border: 1px solid var(--glass-line);
  backdrop-filter: blur(7px); opacity: 0; transition: opacity 0.4s; white-space: nowrap;
}
.status.is-on { opacity: 1; }

/* ---- bottom controls ---- */
.controls { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 7; display: flex; gap: 10px; }
.ctl {
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer; font-size: 19px;
  line-height: 1;
  background: var(--glass); border: 1px solid var(--glass-line); color: var(--ink);
  display: grid; place-items: center; backdrop-filter: blur(8px); transition: transform 0.15s, border-color 0.2s, background 0.2s;
}
/* the mic is the primary "speak more" action — render it a touch larger and crisper than the rest */
#mic-mini { font-size: 23px; }
.ctl:hover { transform: translateY(-2px); border-color: rgba(231, 183, 90, 0.5); }
.ctl--lang { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; }
.ctl.is-active { border-color: var(--gold); color: var(--gold); }
.ctl.is-recording { background: radial-gradient(circle, rgba(224, 96, 86, 0.4), var(--glass)); border-color: rgba(224, 96, 86, 0.7); }

/* ---- showcase badge ---- */
.showcase-badge {
  position: fixed; top: 54px; left: 50%; transform: translateX(-50%); z-index: 7;
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em; color: var(--ink);
  background: var(--glass); border: 1px solid var(--glass-line); border-radius: 999px;
  padding: 6px 15px; backdrop-filter: blur(7px); pointer-events: none; white-space: nowrap;
}

/* ---- about overlay ---- */
.about { position: fixed; inset: 0; z-index: 9; display: grid; place-items: center; background: rgba(4, 5, 8, 0.7); backdrop-filter: blur(4px); padding: 24px; }
.about__panel { position: relative; max-width: 560px; background: rgba(14, 15, 20, 0.96); border: 1px solid var(--glass-line); border-radius: 18px; padding: 30px 32px; }
.about__panel h2 { font-family: var(--font-display); font-size: 30px; margin: 0 0 12px; }
.about__lead { font-size: 15px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 14px; }
.about__lead b { color: var(--ink); font-weight: 600; }
.about__note { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); margin: 0; }
.about__close { position: absolute; top: 14px; right: 16px; background: none; border: 0; color: var(--ink-soft); font-size: 18px; cursor: pointer; }

body.reduced-motion .mic__ring, body.reduced-motion .orch.is-active i { animation: none; }
/* Director's Cut keepsake overlay — the MiniCPM-V-named fly-through film of your finished world. */
.keepsake { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
  background: rgba(4, 5, 9, 0.82); backdrop-filter: blur(6px); padding: 4vmin; }
.keepsake[hidden] { display: none; }
.keepsake__panel { position: relative; max-width: min(94vw, 1100px); width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  background: rgba(12, 14, 20, 0.92); border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px; padding: 22px; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
  max-height: 92vh; overflow-y: auto;  /* so the Ask Your World row below the actions is reachable */
  animation: keepsakePop 0.42s cubic-bezier(0.2, 0.9, 0.25, 1.15) both; }
@keyframes keepsakePop {
  0%   { opacity: 0; transform: translateY(14px) scale(0.965); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
body.reduced-motion .keepsake__panel { animation-duration: 0.18s; animation-timing-function: ease-out; }
.keepsake__close { position: absolute; top: 12px; right: 14px; background: none; border: 0;
  color: var(--ink-soft, #cbd0db); font-size: 18px; cursor: pointer; }
.keepsake__title { font-family: var(--serif, "Fraunces", Georgia, serif); font-style: italic;
  font-size: clamp(20px, 3.4vw, 34px); color: var(--gold, #e8c98a); text-align: center; }
.keepsake__caption { margin-top: -4px; text-align: center; font-size: clamp(13px, 1.6vw, 15px);
  color: rgba(243, 244, 247, 0.72); max-width: 56ch; line-height: 1.45; }
.keepsake__notes { margin: -2px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap;
  gap: 6px; justify-content: center; max-width: 60ch; }
.keepsake__notes li { font-size: 12px; color: rgba(232, 201, 138, 0.85); border: 1px solid rgba(232, 201, 138, 0.28);
  border-radius: 999px; padding: 3px 11px; letter-spacing: 0.01em; }
/* The film + a buffering spinner overlaid while the MP4 streams in (removed on first frame). */
.keepsake__stage { position: relative; width: 100%; }
.keepsake__video { width: 100%; max-height: 64vh; border-radius: 10px; background: #000; display: block; }
.keepsake__spin { position: absolute; inset: 0; display: grid; place-items: center; gap: 10px;
  grid-auto-flow: row; align-content: center; border-radius: 10px;
  background: rgba(6, 7, 11, 0.55); backdrop-filter: blur(2px); color: rgba(243, 244, 247, 0.8);
  font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; pointer-events: none; }
.keepsake__spin::before { content: ""; width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid rgba(232, 201, 138, 0.25); border-top-color: var(--gold, #e8c98a);
  animation: keepsakeSpin 0.9s linear infinite; }
@keyframes keepsakeSpin { to { transform: rotate(360deg); } }
.keepsake__stage.is-ready .keepsake__spin { opacity: 0; transition: opacity 0.4s ease; pointer-events: none; }
body.reduced-motion .keepsake__spin::before { animation-duration: 1.6s; }

.keepsake__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.keepsake__dl { color: var(--ink, #f3f4f7); text-decoration: none; font-size: 15px;
  border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 999px; padding: 9px 20px; transition: background 0.15s ease; }
.keepsake__dl:hover { background: rgba(255, 255, 255, 0.08); }
.keepsake__explore { cursor: pointer; border-color: rgba(232, 201, 138, 0.5); color: var(--gold, #e8c98a); }
.keepsake__explore:hover { background: rgba(232, 201, 138, 0.12); }
/* Copy social caption — a one-tap share string; flips to a confirmed state on success. */
.keepsake__copy { cursor: pointer; background: none; font-family: inherit; }
.keepsake__copy.is-copied { border-color: rgba(232, 201, 138, 0.6); color: var(--gold, #e8c98a);
  background: rgba(232, 201, 138, 0.1); }
/* Ask Your World — MiniCPM-V Q&A over the finished world */
.keepsake__ask { width: 100%; max-width: 620px; display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.keepsake__askrow { display: flex; gap: 8px; }
.keepsake__askinput { flex: 1; border-radius: 999px; padding: 9px 16px; background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16); color: var(--ink, #f3f4f7); font-family: inherit; font-size: 14px; }
.keepsake__askinput:focus { outline: none; border-color: rgba(232, 201, 138, 0.55); }
.keepsake__askbtn { cursor: pointer; border-radius: 999px; padding: 9px 18px; border: 1px solid rgba(232, 201, 138, 0.5);
  background: rgba(232, 201, 138, 0.12); color: var(--gold, #e8c98a); font-family: inherit; font-weight: 600; }
.keepsake__askbtn:disabled { opacity: 0.5; cursor: progress; }
.keepsake__askout:not(:empty) { font-size: 14px; line-height: 1.5; color: rgba(243, 244, 247, 0.88);
  text-align: left; font-style: italic; padding: 2px 4px; }

/* Navigable 3D (explore3d.js): a full-bleed client-GPU viewer over the FINISHED world (post-process). */
.explore3d { position: fixed; inset: 0; z-index: 60; background: #05060a; }
.explore3d__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
.explore3d__canvas:active { cursor: grabbing; }
.explore3d__close { position: absolute; top: 16px; right: 18px; z-index: 2; width: 40px; height: 40px;
  border-radius: 999px; background: rgba(8, 10, 16, 0.6); border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--ink, #f3f4f7); font-size: 18px; cursor: pointer; backdrop-filter: blur(6px); }
.explore3d__hint { position: absolute; left: 50%; top: 18px; transform: translateX(-50%); z-index: 2; margin: 0;
  padding: 7px 16px; border-radius: 999px; background: rgba(8, 10, 16, 0.6); color: rgba(243, 244, 247, 0.85);
  font-size: 13px; letter-spacing: 0.02em; backdrop-filter: blur(6px); pointer-events: none; white-space: nowrap;
  border: 1px solid rgba(232, 201, 138, 0.22); box-shadow: 0 0 18px rgba(232, 201, 138, 0.1);
  opacity: 1; transition: opacity 0.7s ease; }
/* fade the hint out once the user has started exploring (set after first drag, or on a timeout) */
.explore3d__hint.is-faded { opacity: 0; }
@media (max-width: 640px) { .explore3d__hint { font-size: 12px; max-width: 86vw; white-space: normal; text-align: center; } }
.explore3d__scrub { position: absolute; left: 50%; bottom: calc(28px + env(safe-area-inset-bottom));
  transform: translateX(-50%); z-index: 2; width: min(70vw, 520px); accent-color: var(--gold, #e8c98a); cursor: pointer; }

@media (max-width: 640px) {
  .orchestra { display: none; }
  .mic { width: 104px; height: 104px; }
  .transcript { bottom: 16%; }
}

/* ============================================================================
   POLISH PASS (Gradio 10/10) — entrance choreography, tactility, status states,
   reduced-motion. Additive selectors; uses the tokens.css design system.
   ============================================================================ */
@keyframes llRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes llFade { from { opacity: 0; } to { opacity: 1; } }

/* the world "develops" like a warming projector; the intro cluster + HUD rise in, staggered.
   Hover/active elements (.mic) fade opacity-only so a held transform never kills their :hover scale. */
#world-canvas { animation: llFade 1.5s ease both; }
.hud { animation: llRise 0.7s var(--ease) both 0.05s; }
.intro__tag { animation: llRise 0.8s var(--ease) both 0.15s; }
.mic { animation: llFade 0.8s var(--ease) both 0.35s; }
.mic__hint { animation: llRise 0.8s var(--ease) both 0.6s; }
.intro__alt { animation: llRise 0.8s var(--ease) both 0.8s; }

/* press feedback (:active) + one shared focus-visible ring (this is a mic/touch-first app) */
.mic:active { transform: scale(0.96); }
.ctl:active { transform: translateY(0) scale(0.92); }
.begin:active { transform: translateY(1px) scale(0.98); }
.ghost:active { color: var(--gold); }
.keepsake__dl:active, .keepsake__close:active, .about__close:active, .explore3d__close:active, .keepsake__copy:active { transform: scale(0.95); }
:where(button, a, input, textarea, [tabindex]):focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 5px; }
:focus:not(:focus-visible) { outline: none; }

/* the toolbar ASSEMBLES (staggered fade) when a world goes live; the live mic physically breathes */
body.in-world .controls .ctl { animation: llFade 0.5s var(--ease) both; }
body.in-world .controls .ctl:nth-child(1) { animation-delay: 0.04s; }
body.in-world .controls .ctl:nth-child(2) { animation-delay: 0.11s; }
body.in-world .controls .ctl:nth-child(3) { animation-delay: 0.18s; }
body.in-world .controls .ctl:nth-child(4) { animation-delay: 0.25s; }
body.in-world .controls .ctl:nth-child(5) { animation-delay: 0.32s; }
@keyframes recPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(224, 96, 86, 0.5); } 50% { box-shadow: 0 0 0 9px rgba(224, 96, 86, 0); } }
.mic.is-recording { animation: recPulse 1.5s ease-in-out infinite; }

/* distinct status states: working (pulsing gold dot) · warning (amber) · error (red) */
.status--work::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 9px;
  border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px var(--gold); vertical-align: middle;
  animation: orchPulse 1.1s ease-in-out infinite; }
.status--warn { border-color: rgba(231, 183, 90, 0.6); background: rgba(231, 183, 90, 0.12); color: var(--ink); }
.status--err { border-color: rgba(224, 96, 86, 0.6); background: rgba(224, 96, 86, 0.14); color: #ffd9d2; }

/* iPhone home-bar clearance + a visible "working" state on the controls */
.controls { bottom: calc(22px + env(safe-area-inset-bottom)); }
.status { bottom: calc(84px + env(safe-area-inset-bottom)); }
.ctl:disabled { opacity: 0.5; cursor: progress; }

/* OS reduced-motion now disables ALL the above (immersive.css previously had none of its own) */
@media (prefers-reduced-motion: reduce) {
  #world-canvas, .hud, .intro__tag, .mic, .mic__hint, .intro__alt, body.in-world .controls .ctl {
    animation: none !important; opacity: 1 !important; transform: none !important; }
  .mic__ring, .mic__ring::after, .orch.is-active i, .orch.is-handoff,
  .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; }
}