/* Deep Space shell — the room view.
   Wall on top (~62%), a thin amber seam line, floor beneath (~38%).
   This is a SIMULATION of the venue on a web preview. In the actual venue
   the wall and floor are physical projections on orthogonal surfaces. */

:root {
  --seam-amber: rgba(232, 164, 74, 0.35);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: var(--ink-deep, #050302);
  color: var(--cream, #F2E8D9);
  font-family: var(--sans, 'DM Sans', sans-serif);
  -webkit-font-smoothing: antialiased;
}

#room {
  position: fixed; inset: 0;
  display: grid;
  grid-template-rows: 62fr 1px 38fr;
  background: #000;
}

.surface {
  display: block;
  width: 100%; height: 100%;
  background: #000;
}

#seam {
  background: linear-gradient(90deg,
    transparent 0%,
    var(--seam-amber) 8%,
    rgba(232, 164, 74, 0.85) 50%,
    var(--seam-amber) 92%,
    transparent 100%);
  box-shadow:
    0 -1px 14px rgba(232, 164, 74, 0.25),
    0  1px 14px rgba(232, 164, 74, 0.25);
}

/* Surface labels — tiny, in corner, so the format is legible in a demo. */
.surface-label {
  position: absolute;
  font-family: var(--mono, 'DM Mono', monospace);
  font-size: 0.5rem; letter-spacing: 0.32em; text-transform: uppercase;
  color: rgba(232, 164, 74, 0.4);
  pointer-events: none;
  z-index: 5;
}
.surface-label.wall  { top: 1.2rem; left: 1.6rem; }
.surface-label.floor { bottom: 1rem; left: 1.6rem; }

/* Operator HUD — shows current cue, navigable state, shortcut hints.
   Hidden in presentation mode (?hud=off). */
#op-hud {
  position: fixed; top: 1.2rem; right: 1.6rem;
  z-index: 10;
  display: flex; flex-direction: column; gap: 0.5rem;
  align-items: flex-end;
  pointer-events: none;
  font-family: var(--mono, 'DM Mono', monospace);
  font-size: 0.52rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(216, 207, 193, 0.55);
}
#op-hud .op-tag {
  background: rgba(10, 8, 6, 0.75);
  border: 1px solid rgba(232, 164, 74, 0.3);
  padding: 0.4rem 0.7rem;
  backdrop-filter: blur(8px);
}
#op-hud .op-cue {
  color: var(--amber, #E8A44A);
  max-width: 28ch; text-align: right;
  letter-spacing: 0.14em;
}
#op-hud[data-nav="true"] .op-nav {
  background: rgba(232, 164, 74, 0.18);
  border-color: rgba(232, 164, 74, 0.7);
  color: var(--cream);
}
#op-hud .op-keys {
  opacity: 0.6;
  font-size: 0.44rem;
  letter-spacing: 0.18em;
}
html[data-hud="off"] #op-hud { display: none; }

/* MassiveText, ThreadNarrator, Veil, Artist dialog inherit styling from base.css.
   They sit on the top layer, spanning both surfaces. */

#massive-text {
  z-index: 45;
}
#thread-narrator {
  z-index: 42;
}
#veil {
  z-index: 90;
}

/* Presenter intro card — only visible on initial load until first advance. */
#ds-intro {
  position: fixed; inset: 0;
  z-index: 80;
  background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(8,5,3,0.94) 0%, rgba(5,3,2,1) 70%);
  display: flex; align-items: center; justify-content: center;
  transition: opacity 1.2s var(--easing-quiet, cubic-bezier(0.22,1,0.36,1));
}
#ds-intro[data-state="dismissed"] { opacity: 0; pointer-events: none; }
#ds-intro .intro-inner {
  text-align: center;
  max-width: 720px;
  padding: 2rem;
}
#ds-intro .ds-eyebrow {
  font-family: var(--mono, 'DM Mono', monospace);
  font-size: 0.6rem; letter-spacing: 0.36em; text-transform: uppercase;
  color: var(--amber, #E8A44A);
  margin-bottom: 1.6rem;
}
#ds-intro .ds-title {
  font-family: var(--serif, 'Playfair Display', serif);
  font-weight: 400; font-style: italic;
  font-size: clamp(2rem, 5vw, 3.6rem);
  color: var(--cream, #F2E8D9);
  letter-spacing: -0.01em;
  margin-bottom: 2rem;
  line-height: 1.15;
}
#ds-intro .ds-sub {
  font-family: var(--mono, 'DM Mono', monospace);
  font-size: 0.58rem; letter-spacing: 0.28em; text-transform: uppercase;
  color: rgba(216, 207, 193, 0.5);
  margin-bottom: 2.4rem;
}
#ds-intro .ds-start {
  font-family: var(--mono, 'DM Mono', monospace);
  font-size: 0.56rem; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--amber, #E8A44A);
  opacity: 0;
  animation: ds-arm 3s var(--easing-quiet, cubic-bezier(0.22,1,0.36,1)) 0.8s forwards;
}
@keyframes ds-arm { to { opacity: 0.85; } }