/* 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%; min-height: 100vh; min-width: 100vw; background: var(--ink-deep, #050302); color: var(--cream, #F2E8D9); font-family: var(--sans, 'DM Sans', sans-serif); -webkit-font-smoothing: antialiased; /* In WALL or FLOOR view, no scroll needed — overflow hidden. In BOTH view, body scrolls so the floor is reachable on tight viewports. */ overflow-x: hidden; overflow-y: auto; } html[data-view="wall"] body, html[data-view="floor"] body { overflow-y: hidden; } /* Room layout — reserves space at the bottom for the act strip when HUD is on, so the floor canvas is never occluded. When HUD is off (?hud=off), the room uses the full viewport because there's no strip. */ :root { --strip-height: 110px; } /* In WALL and FLOOR view: room is fixed, fills viewport (minus strip). In BOTH view: room is a tall block in document flow so the body scrolls if the viewport can't show wall and floor at useful sizes simultaneously. */ #room { width: 100vw; display: grid; grid-template-rows: 62fr 3px 38fr; background: #000; transition: grid-template-rows 600ms cubic-bezier(0.22, 1, 0.36, 1); } html[data-view="both"] #room, html:not([data-view]) #room { position: relative; /* Both surfaces always have a visible minimum height. On tall viewports, fits exactly. On short viewports, body scrolls to reveal the floor. */ min-height: max(calc(100vh - var(--strip-height)), 760px); } html[data-view="wall"] #room, html[data-view="floor"] #room { position: fixed; top: 0; left: 0; right: 0; bottom: var(--strip-height); } html[data-hud="off"] #room { bottom: 0; } html[data-hud="off"][data-view="both"] #room { min-height: max(100vh, 760px); } /* View modes — cycle between BOTH / WALL only / FLOOR only. Each one expands the chosen surface(s) to fill the room. Set on the element via JS. */ html[data-view="wall"] #room { grid-template-rows: 1fr 0px 0fr; } html[data-view="wall"] #seam, html[data-view="wall"] #floor { display: none; } html[data-view="floor"] #room { grid-template-rows: 0fr 0px 1fr; } html[data-view="floor"] #wall, html[data-view="floor"] #seam { display: none; } /* default: data-view="both" (or unset) — original 62/3px/38 split */ /* Fallback for browsers/contexts where grid fails — explicit absolute positioning guarantees both canvases get visible viewport space. */ @supports not (display: grid) { #room { display: block; } #wall { position: absolute; top: 0; left: 0; right: 0; height: 62%; } #seam { position: absolute; top: 62%; left: 0; right: 0; height: 3px; } #floor { position: absolute; top: calc(62% + 3px); left: 0; right: 0; bottom: 0; } } .surface { display: block; width: 100%; height: 100%; background: #000; } #seam { position: relative; background: linear-gradient(90deg, transparent 0%, rgba(232, 164, 74, 0.45) 6%, rgba(232, 164, 74, 1.0) 50%, rgba(232, 164, 74, 0.45) 94%, transparent 100%); box-shadow: 0 -2px 22px rgba(232, 164, 74, 0.55), 0 2px 22px rgba(232, 164, 74, 0.55), 0 -4px 40px rgba(232, 164, 74, 0.18), 0 4px 40px rgba(232, 164, 74, 0.18); } /* 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-cue removed from screen — act strip is enough. op-nav only shows when navigable mode is on. */ #op-hud .op-nav { display: none; background: rgba(232, 164, 74, 0.18); border-color: rgba(232, 164, 74, 0.7); color: var(--cream); } #op-hud .op-nav[data-active="true"] { display: block; } .op-view, .op-full { font-family: var(--mono, 'DM Mono', monospace); font-size: 0.52rem; letter-spacing: 0.22em; text-transform: uppercase; background: rgba(232, 164, 74, 0.12); border: 1px solid rgba(232, 164, 74, 0.55); color: var(--amber, #E8A44A); padding: 0.4rem 0.7rem; cursor: pointer; pointer-events: auto; backdrop-filter: blur(8px); transition: background 0.18s, border-color 0.18s, color 0.18s; white-space: nowrap; } .op-view:hover, .op-full:hover { background: rgba(232, 164, 74, 0.22); border-color: var(--amber); color: var(--cream); } /* ── FULL EXPERIENCE MODE ───────────────────────────────────── Click Full Experience button → all chrome hides for cinematic viewing. A tiny dim Exit pill stays top-right. Hover it to brighten; click to leave. */ #exit-full { position: fixed; top: 1rem; right: 1rem; z-index: 1000; font-family: var(--mono, 'DM Mono', monospace); font-size: 0.46rem; letter-spacing: 0.24em; text-transform: uppercase; background: rgba(8, 6, 4, 0.5); border: 1px solid rgba(232, 164, 74, 0.25); color: rgba(216, 207, 193, 0.55); padding: 0.35rem 0.7rem; cursor: pointer; display: none; opacity: 0.25; transition: opacity 0.3s ease, color 0.2s, border-color 0.2s, background 0.2s; } html[data-fullscreen="true"] #exit-full { display: block; } #exit-full:hover { opacity: 1; color: var(--cream); border-color: var(--amber); background: rgba(8, 6, 4, 0.85); } html[data-fullscreen="true"] #op-hud, html[data-fullscreen="true"] #act-strip, html[data-fullscreen="true"] #format-toggle, html[data-fullscreen="true"] #op-hud-360, html[data-fullscreen="true"] #act-strip-360, html[data-fullscreen="true"] .surface-label { display: none !important; } /* Also collapse the strip-reserved space so the room takes the full viewport. */ html[data-fullscreen="true"] #room { bottom: 0; } /* ── ACT STRIP ARROW BUTTONS ───────────────────────────────── Prev/next chevrons on either side of the act buttons. Visible nav for users who don't know keyboard shortcuts. */ #act-strip .as-controls { display: flex; align-items: stretch; gap: 0.4rem; margin-bottom: 0.5rem; } .strip-arrow { flex: 0 0 auto; width: 36px; font-family: var(--mono, 'DM Mono', monospace); font-size: 1.2rem; line-height: 1; background: rgba(20, 16, 12, 0.55); border: 1px solid rgba(232, 164, 74, 0.18); color: rgba(232, 164, 74, 0.55); cursor: pointer; pointer-events: auto; transition: background 0.15s, border-color 0.15s, color 0.15s; user-select: none; } .strip-arrow:hover { background: rgba(232, 164, 74, 0.18); border-color: rgba(232, 164, 74, 0.65); color: var(--amber); } .strip-arrow:active { transform: scale(0.96); } .strip-arrow:disabled { opacity: 0.25; cursor: default; } #act-strip .as-row { flex: 1 1 auto; } /* Hide scrollbar visually but keep scroll functionality. */ body::-webkit-scrollbar { width: 0; height: 0; } body { scrollbar-width: none; -ms-overflow-style: none; } #op-hud .op-keys { opacity: 0.6; font-size: 0.44rem; letter-spacing: 0.18em; } #op-hud .op-build { font-size: 0.4rem; letter-spacing: 0.18em; opacity: 0.5; color: var(--moss, #6E7E5E); border-color: rgba(110, 126, 94, 0.3); } html[data-hud="off"] #op-hud { display: none; } /* Chrome idle: when the user hasn't moved the mouse for a while, fade non-essential HUD elements so they stop being in the way of the viewing. Mouse move (or any key) brings them back. */ html[data-chrome-idle="true"] #op-hud, html[data-chrome-idle="true"] #format-toggle, html[data-chrome-idle="true"] #act-strip, html[data-chrome-idle="true"] .surface-label { opacity: 0.05; pointer-events: none; transition: opacity 1.2s ease; } #op-hud .op-keys, #op-hud .op-build { /* Diagnostic chrome — fade by default. */ opacity: 0.4; } #op-hud:hover .op-keys, #op-hud:hover .op-build { opacity: 0.85; } /* ── DEBUG LAYOUT MODE (?debug=layout) High-contrast outlines + giant labels prove the two canvases are rendering. If you only see ONE colored band, the second canvas is hidden by your viewport. */ html[data-debug="layout"] .surface { outline: 4px solid; } html[data-debug="layout"] #wall { outline-color: #ff3366; background: #2a0814 !important; } html[data-debug="layout"] #floor { outline-color: #33aaff; background: #08142a !important; } .debug-label { position: absolute; left: 50%; transform: translateX(-50%); font-family: var(--mono, 'DM Mono', monospace); font-size: 1.6rem; letter-spacing: 0.32em; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85); pointer-events: none; z-index: 9; display: none; } html[data-debug="layout"] .debug-label { display: block; } .debug-label.wall { top: 30%; } .debug-label.floor { top: calc(62% + 10%); } /* Viewport size readout — always-visible help when troubleshooting */ #viewport-info { position: fixed; top: 1rem; left: 50%; transform: translateX(-50%); z-index: 200; font-family: var(--mono, 'DM Mono', monospace); font-size: 0.5rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(216, 207, 193, 0.55); background: rgba(8, 6, 4, 0.65); border: 1px solid rgba(232, 164, 74, 0.2); padding: 0.4rem 0.8rem; display: none; pointer-events: none; } html[data-debug="layout"] #viewport-info { display: block; } /* ── ACT STRIP — persistent navigator BELOW the room (not overlapping). Click an act to jump. Progress fill shows where in the act we are. Height reserved by --strip-height in #room so canvases never overlap. */ #act-strip { position: fixed; bottom: 0; left: 0; right: 0; height: var(--strip-height); z-index: 12; background: rgba(8, 6, 4, 0.96); border-top: 1px solid rgba(232, 164, 74, 0.25); padding: 0.7rem 1.2rem 0.4rem; pointer-events: none; } html[data-hud="off"] #act-strip { display: none; } #act-strip .as-row { display: flex; gap: 0.5rem; margin-bottom: 0.5rem; pointer-events: auto; overflow-x: auto; scrollbar-width: thin; scroll-behavior: smooth; scrollbar-color: rgba(232, 164, 74, 0.3) transparent; } #act-strip .as-act { flex: 0 0 22%; min-width: 110px; padding: 0.45rem 0.7rem; font-family: var(--mono, 'DM Mono', monospace); font-size: 0.5rem; letter-spacing: 0.18em; text-transform: uppercase; text-align: center; background: rgba(20, 16, 12, 0.55); border: 1px solid rgba(232, 164, 74, 0.18); color: rgba(216, 207, 193, 0.55); cursor: pointer; transition: background 0.18s, border-color 0.18s, color 0.18s; user-select: none; } #act-strip .as-act:hover { background: rgba(232, 164, 74, 0.10); border-color: rgba(232, 164, 74, 0.45); color: var(--cream, #F2E8D9); } #act-strip .as-act[data-active="true"] { background: rgba(232, 164, 74, 0.18); border-color: rgba(232, 164, 74, 0.75); color: var(--amber, #E8A44A); } #act-strip .as-act .as-num { display: block; color: rgba(216, 207, 193, 0.4); font-size: 0.42rem; margin-bottom: 0.2rem; } #act-strip .as-act[data-active="true"] .as-num { color: var(--amber); } #act-strip .as-progress { height: 2px; background: rgba(232, 164, 74, 0.12); overflow: hidden; } #act-strip .as-fill { height: 100%; width: 0%; background: linear-gradient(90deg, rgba(232, 164, 74, 0.6) 0%, var(--amber, #E8A44A) 100%); box-shadow: 0 0 8px rgba(232, 164, 74, 0.5); transition: width 0.2s linear; } /* 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; } /* ── CINEMATIC VIGNETTE ────────────────────────────────────── Fades in during keystone moments to focus the audience's eye on the speaking video. Subtle — never goes full dark. */ #cine-vignette { position: fixed; inset: 0; z-index: 39; pointer-events: none; opacity: 0; transition: opacity 1600ms var(--easing-quiet, cubic-bezier(0.22,1,0.36,1)); background: radial-gradient(ellipse 75% 70% at 50% 50%, transparent 38%, rgba(0, 0, 0, 0.42) 78%, rgba(0, 0, 0, 0.72) 100%); } #cine-vignette[data-show="true"] { opacity: 1; } /* ── CINEMATIC LETTERBOX ───────────────────────────────────── Thin black bars at the very top and very bottom of the viewport during keystone moments. Letterbox — never in the middle of any canvas. */ #cine-bars { position: fixed; inset: 0; z-index: 38; pointer-events: none; } #cine-bars .cb-top, #cine-bars .cb-bot { position: fixed; left: 0; right: 0; height: 0; background: #000; transition: height 1200ms var(--easing-quiet, cubic-bezier(0.22,1,0.36,1)); } #cine-bars .cb-top { top: 0; } #cine-bars .cb-bot { bottom: 0; } #cine-bars[data-show="true"] .cb-top { height: 4vh; } #cine-bars[data-show="true"] .cb-bot { height: 4vh; } /* 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; } }