/* SCENESCAPES site-level chrome CSS — included by every scenario */

@import url('/assets/fonts/fonts.css');

:root {
  --chrome-bg: rgba(0, 0, 0, 0.8);
  --chrome-text: rgba(255, 255, 255, 0.85);
  --chrome-accent: #5BA877;
  --chrome-rec: #E8543F;

  --chrome-z: 9999;
  --modal-z: 10000;
  --press-any-key-z: 10001;
}

html, body {
  margin: 0;
  padding: 0;
  background: #000;
  color: var(--chrome-text);
  font-family: 'Inter', system-ui, sans-serif;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* Mobile (May 2026 v3): allow vertical scroll on phones so the
   stacked-pane layout each scene falls back to actually shows all the
   content instead of clipping everything past the first viewport. The
   "fits in 100vh, single screen" cinematic feel is desktop-only — on
   phones we trade it for information density (the user explicitly asked
   for "no empty spaces"). The hero pane in each scene still fills the
   first ~60-70vh; secondary panes scroll into view below. */
@media (max-width: 768px) {
  html, body {
    overflow-y: auto;
    overflow-x: hidden;
    height: auto;
    min-height: 100vh;
    -webkit-overflow-scrolling: touch;
  }
  /* Each scene declares its own top-level container with position:fixed
     inset:0 so it fills the desktop viewport. On mobile that traps all
     stacked content past the fold. Relax those known containers to flow
     vertically with the page instead. (List enumerates the 21 active
     scenes' root container classes — keep in sync with new scenes.) */
  .stage,
  .lab-body,
  .cockpit-main,
  .fd-root,
  .fi-root, .fi-stage,
  .mo-app, .mo-grid,
  .cw-app, .cw-grid,
  .fv-root, .sp-root,
  .bg-grid,
  .scene,
  body > [id$="-root"],
  body > [id$="-app"],
  body > [id$="-stage"]:not(.scenescapes-press-any-key) {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 100vh !important;
    overflow: visible !important;
  }
  /* Keep press-any-key intro overlay fixed (it MUST cover the viewport
     until dismissed). Most scenes hide it after press. */
  .scenescapes-press-any-key {
    position: fixed !important;
    inset: 0 !important;
  }
  /* Lore modal overlay also stays fixed (it's a modal). */
  .scenescapes-lore-modal {
    position: fixed !important;
    inset: 0 !important;
  }
  /* Site chrome bars — keep fixed so they overlay the scrolling content. */
  .scenescapes-chrome-top,
  .scenescapes-chrome-bottom {
    position: fixed !important;
  }
}

button {
  cursor: pointer;
  font: inherit;
}

/* === Screen-reader / SEO crawler text ===
   Off-screen, but read by crawlers and screen readers. Each scene
   prepends an h1 + descriptive paragraph in this class so the page
   is indexable on uispace.org despite the visual being a canvas-heavy
   FUI scene. */
.scenescapes-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* === Hide inner scrollbars across all scenes ===
   The FUI aesthetic is one-screen cinematic: visible scrollbars on internal
   panels (anomaly logs, audit feeds, etc.) break the illusion. We still allow
   the underlying overflow:auto containers to clip + scroll programmatically
   (e.g. log autoscroll), we just hide the chrome.
   Mobile body uses native inertial scroll which auto-hides the scrollbar
   anyway, so this doesn't harm vertical-scroll mobile. */
*::-webkit-scrollbar { width: 0; height: 0; display: none; background: transparent; }
* { scrollbar-width: none; -ms-overflow-style: none; }

/* === Top + bottom chrome bars (auto-hide) === */

.scenescapes-chrome-top,
.scenescapes-chrome-bottom {
  position: fixed;
  left: 0;
  right: 0;
  z-index: var(--chrome-z);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 24px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.scenescapes-chrome-top    { top: 0;    background: linear-gradient(to bottom, var(--chrome-bg), transparent); }
.scenescapes-chrome-bottom { bottom: 0; background: linear-gradient(to top,    var(--chrome-bg), transparent); }

.scenescapes-chrome-top > *,
.scenescapes-chrome-bottom > * {
  pointer-events: auto;
}

.scenescapes-chrome-top.hidden,
.scenescapes-chrome-bottom.hidden {
  opacity: 0;
}

/* (timecode chrome removed — read as a video player UI) */

/* Site nav buttons (next/prev/mute/share/fullscreen) */
.scenescapes-nav-btn {
  background: transparent;
  border: 1px solid currentColor;
  color: var(--chrome-text);
  padding: 6px 12px;
  letter-spacing: inherit;
  font: inherit;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  margin-left: 8px;
}

/* May 2026 v3 round 4 user feedback: 'fullscreen button on top right
   should be the rightmost, not share.' All scenes' HTML has the order
   fullscreen, mute, share — but visually we want share, mute,
   fullscreen. Using flex `order` to re-sequence without touching
   every per-scene HTML file. The chrome row uses display: flex so
   `order` works. */
/* Visual left-to-right order: SHARE, MUTE, FULLSCREEN.
   User asked for fullscreen to be the RIGHTMOST button (a previous
   pass had it leftmost — same intent, wrong direction). */
#btn-share      { order: 1; }
#btn-mute       { order: 2; }
#btn-fullscreen { order: 3; }
/* PREV/NEXT/BROWSE/LORE keep default order 0 — they sit before the
   share/mute/fullscreen group in DOM and stay leftmost. */

/* May 2026 v3 round 4 user feedback: 'when I hover over a button it
   disappears.' The previous hover used `background: currentColor; color:
   #000;` — but `currentColor` resolves to the post-cascade `color` value,
   which was just set to #000, so the button rendered black-on-black =
   invisible. Replaced with explicit colors that don't depend on
   currentColor cascading: solid white-ish bg + black text + crisp
   border. The button is now MORE prominent on hover, not less. */
.scenescapes-nav-btn:hover,
.scenescapes-nav-btn:focus {
  background: rgba(255, 255, 255, 0.92);
  color: #000;
  border-color: rgba(255, 255, 255, 0.92);
  outline: none;
}

/* === Press-any-key entry screen === */

.scenescapes-press-any-key {
  position: fixed;
  inset: 0;
  z-index: var(--press-any-key-z);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pak-bg, #000);
  font-family: var(--pak-font, 'JetBrains Mono', monospace);
  font-size: var(--pak-size, 14px);
  color: var(--pak-color, #ffffff);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
  animation: pak-blink 1.2s infinite;
}

@keyframes pak-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.65; }
}

.scenescapes-press-any-key.fade-out {
  animation: pak-fade-out 200ms ease-out forwards;
}

@keyframes pak-fade-out {
  to { opacity: 0; pointer-events: none; }
}

/* === Share modal === */

.scenescapes-share-modal {
  position: fixed;
  inset: 0;
  z-index: var(--modal-z);
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.scenescapes-share-modal.open {
  display: flex;
}

.scenescapes-share-modal-content {
  background: #1a1a1a;
  border: 1px solid #333;
  padding: 32px;
  max-width: 480px;
  width: 90vw;
  font-family: 'Inter', sans-serif;
  color: #f0f0f0;
}

.scenescapes-share-modal-content h2 {
  margin: 0 0 16px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.scenescapes-share-modal-content button {
  display: block;
  width: 100%;
  margin: 8px 0;
  padding: 12px;
  background: transparent;
  border: 1px solid #444;
  color: inherit;
  text-align: left;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
}

.scenescapes-share-modal-content button:hover {
  background: #333;
}

/* === Clean mode (Hollywood producer URL param) === */

body.clean-mode .scenescapes-chrome-top,
body.clean-mode .scenescapes-chrome-bottom,
body.clean-mode .scenescapes-share-modal {
  display: none !important;
}

/* === Reduced motion === */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* === Visibility pause ===
   When the document is hidden (window minimized, tab in background,
   another desktop space), the browser auto-pauses requestAnimationFrame
   but NOT CSS animations or setInterval timers. We add the .scs-hidden
   class on visibilitychange so all CSS animations pause too — keeps the
   laptop cool when the desktop app is open but not in view. */
body.scs-hidden,
body.scs-hidden *,
body.scs-hidden *::before,
body.scs-hidden *::after {
  animation-play-state: paused !important;
}