/* Rosemary cinematic voxels — the scene owns the frame. Built from the Gulf
   Expanse page chrome: an overture before the song, a quiet title cue, controls
   that step back while it plays, plus tiny floating names over the ten figures. */
:root {
  color-scheme: light dark;
  --haze: #E6D6BC;          /* late-afternoon haze, matches the first frame */
  --ink: #F7F4EC;
  --shadow: 6 26 38;
  --serif: "Cormorant Infant", "Iowan Old Style", Palatino, serif;
  /* phase ribbon: begin, gather, expand, close */
  --ph-begin: #F2D9A8;
  --ph-gather: #EBB57A;
  --ph-expand: #8ED3D3;
  --ph-close: #9C8FC0;
  /* chrome theme: deep gulf glass */
  --chrome-bg: rgb(28 30 44 / 0.72);
  --chrome-edge: rgb(247 244 236 / 0.22);
  --chrome-fill: #F2D79A;
  --chrome-focus: #F2D79A;
  --chrome-primary-ink: #0B2536;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--haze); }
body { color: var(--ink); font: 400 16px/1.5 var(--chrome-sans); }

#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

/* opens out of the sea haze on the first frame */
.veil {
  position: fixed; inset: 0; pointer-events: none;
  background: var(--haze);
  transition: opacity 2.8s cubic-bezier(.3,.1,.2,1);
}
html[data-scene="on"] .veil { opacity: 0; }

/* ---- overture: the title on the haze, low-left like a line of coast ---------- */
.overture {
  position: fixed; inset: 0; z-index: 3;
  display: flex; align-items: flex-end;
  padding: clamp(1.25rem, 5vw, 4.5rem);
  padding-bottom: clamp(2rem, 11vh, 7rem);
  background:
    linear-gradient(180deg, rgb(var(--shadow) / 0) 30%, rgb(var(--shadow) / 0.55) 100%),
    rgb(var(--shadow) / 0.18);
  cursor: pointer;
  transition: opacity 1.6s cubic-bezier(.3,.1,.2,1), visibility 0s linear 1.6s;
}
html[data-started="yes"] .overture { opacity: 0; visibility: hidden; pointer-events: none; }
.overture-inner { width: min(44rem, 100%); display: grid; gap: 1rem; cursor: auto; }
.place {
  margin: 0;
  font: italic 400 1.3rem/1.2 var(--serif);
  color: var(--ink);
  text-shadow: 0 1px 12px rgb(var(--shadow) / 0.7);
}
.overture h1 {
  margin: 0;
  font: 300 clamp(2.6rem, 7.4vw, 6rem)/0.98 var(--serif);
  letter-spacing: -0.018em;
  color: var(--ink);
  text-wrap: balance;
  text-shadow: 0 2px 30px rgb(var(--shadow) / 0.6), 0 1px 3px rgb(var(--shadow) / 0.45);
}
.lede {
  margin: 0; max-width: 32rem;
  font: 400 1.3rem/1.45 var(--serif);
  color: var(--ink);
  text-shadow: 0 1px 12px rgb(var(--shadow) / 0.8);
}
.begin-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin-top: 0.5rem; }
.begin.chrome-btn {
  min-height: 52px; padding: 0 1.6rem;
  background: var(--ink); border-color: var(--ink); color: var(--chrome-primary-ink);
  font-size: 17px;
}
.begin.chrome-btn:hover:not(:disabled) { background: var(--chrome-fill); border-color: var(--chrome-fill); }
.begin.chrome-btn:disabled { background: var(--chrome-bg); color: var(--chrome-muted); }
.keys { margin: 0; color: var(--ink); font-size: 14px; text-shadow: 0 1px 8px rgb(var(--shadow) / 0.9); }
.overture .chrome-banner { max-width: 34rem; }
/* once the song is ready the banner has nothing urgent to say */
html[data-audio="ready"] .overture .chrome-banner { display: none; }

/* ---- the title cue, driven by song progress ------------------------------ */
.cue {
  position: fixed; z-index: 1;
  left: clamp(1.25rem, 5vw, 4.5rem); bottom: clamp(7rem, 20vh, 11rem);
  pointer-events: none; opacity: 0;
}
.cue p { margin: 0; color: var(--ink); text-shadow: 0 2px 26px rgb(var(--shadow) / 0.55), 0 1px 3px rgb(var(--shadow) / 0.4); }
.cue-title { font: italic 300 clamp(2rem, 5vw, 4rem)/1 var(--serif); letter-spacing: -0.012em; }
.cue-place { margin-top: 0.5rem !important; font: 400 1.15rem/1.3 var(--serif); }

/* ---- controls -------------------------------------------------------------- */
.mast { position: fixed; top: 1rem; left: 1rem; z-index: 4; }
.dock {
  position: fixed; z-index: 2;
  left: 50%; bottom: clamp(0.75rem, 2.5vw, 1.5rem);
  width: min(54rem, calc(100vw - 1.5rem));
  transform: translateX(-50%);
  display: grid; gap: 0.4rem;
}
.mast, .dock { transition: opacity 0.9s ease; }
html[data-idle="yes"] .mast,
html[data-idle="yes"] .dock { opacity: 0; }
html[data-idle="yes"], html[data-idle="yes"] * { cursor: none; }
html[data-started="no"] .dock { opacity: 0; visibility: hidden; }
/* ?qa=1: a still frame for headless screenshots: no page chrome, no transitions */
html[data-qa="1"] .mast, html[data-qa="1"] .dock, html[data-qa="1"] .overture { display: none; }
html[data-qa="1"] *, html[data-qa="1"] *::before, html[data-qa="1"] *::after { transition: none !important; animation: none !important; }

.phase-now {
  margin: 0 0 0 1rem;
  font: italic 400 1.15rem/1.2 var(--serif);
  color: var(--ink);
  text-shadow: 0 1px 10px rgb(var(--shadow) / 0.85);
}
html[data-mode="preview"] .phase-now { color: #F6D3AE; }

.chrome-seek { position: relative; }
.arc {
  position: absolute; left: 0; right: 0; bottom: 5px;
  display: flex; gap: 3px;
  margin: 0; padding: 0; list-style: none;
  pointer-events: none;
}
.arc li { height: 3px; border-radius: 2px; opacity: 0.45; transition: opacity 0.6s ease; }
.arc li[data-current] { opacity: 1; }
.arc [data-phase="begin"] { background: var(--ph-begin); }
.arc [data-phase="gather"] { background: var(--ph-gather); }
.arc [data-phase="expand"] { background: var(--ph-expand); }
.arc [data-phase="close"] { background: var(--ph-close); }

/* ---- tiny floating names over the ten figures ------------------------------- */
.names { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.name {
  position: absolute; left: 0; top: 0; opacity: 0;
  padding: 1px 6px 2px; border-radius: 6px;
  background: rgb(20 22 34 / 0.55); color: #FBF6EA;
  font: 500 12px/1.3 var(--chrome-sans); letter-spacing: 0.02em; white-space: nowrap;
  transform-origin: 50% 100%; /* people.js scales labels up near the camera, anchored at the head */
  will-change: transform, opacity;
}
html[data-idle="yes"] .name { background: rgb(20 22 34 / 0.38); }
button[data-ctl="fullscreen"][hidden] { display: none; }

.debug {
  position: fixed; top: 4rem; right: 1rem; z-index: 5; margin: 0;
  padding: 0.6rem 0.8rem; border-radius: 0.5rem;
  background: rgb(0 0 0 / 0.6); color: #E8F0F2;
  font: 12px/1.45 ui-monospace, Menlo, monospace; white-space: pre;
}

.gl-error {
  position: fixed; inset: auto 1rem 50% 1rem; z-index: 6; margin: 0 auto; max-width: 30rem;
  padding: 1rem 1.2rem; border-radius: 1rem;
  background: #0B2536; color: #F7F4EC; font: 500 16px/1.45 var(--chrome-sans);
}

@media (max-width: 640px) {
  .phase-now { font-size: 1rem; }
  .cue { bottom: 9.5rem; }
  .keys { display: none; }
  button[data-ctl="fullscreen"] { padding: 0 0.8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .veil { transition-duration: 0.6s; }
  .overture { transition-duration: 0.4s, 0s; transition-delay: 0s, 0.4s; }
  .mast, .dock, .arc li { transition: none; }
}