/* The Garnet — Facility Tour. Photoreal rooms (WebGL) behind real HTML copy.
   Copyright (c) 2026 Garnet Grid Consulting LLC. */
:root {
  --fx-void: #06050a; --fx-garnet: #e0244a; --fx-gold: #ffc65a; --fx-teal: #37e6d2;
  --fx-paper: #f3eef0; --fx-muted: #b3a7ae; --fx-line: rgba(255,255,255,.12);
  --fx-disp: 'Chakra Petch', ui-sans-serif, system-ui, sans-serif;
  --fx-body: 'Inter Tight', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --fx-mono: ui-monospace, 'SFMono-Regular', Menlo, monospace;
}
* { box-sizing: border-box; }
html { background: var(--fx-void); scroll-behavior: smooth; }
body { margin: 0; background: var(--fx-void); color: var(--fx-paper); font-family: var(--fx-body); overflow-x: hidden; }

/* photoreal WebGL layer + LCP/fallback poster */
#facility-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; display: block; touch-action: none; }
#facility-poster { position: fixed; inset: 0; z-index: -1;
  background: #05040a url("/assets/images/garnet-sanctum-poster.webp") center/cover no-repeat; opacity: .8; }
body.facility-fallback #facility-canvas { display: none; }
body.facility-fallback #facility-poster { z-index: 0; opacity: 1; }

/* room copy over the scene */
main { position: relative; z-index: 1; }
.fx-room { min-height: 100svh; display: flex; align-items: center;
  padding: max(8vh, env(safe-area-inset-top)) clamp(1.5rem, 6vw, 6rem) 14vh; }
.fx-room__copy { max-width: 620px; position: relative; z-index: 2;
  padding: 1.6rem 1.8rem 1.8rem; border-radius: 16px;
  background: linear-gradient(120deg, rgba(5,4,9,.72) 0%, rgba(5,4,9,.44) 62%, transparent 100%);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.fx-eyebrow { font-family: var(--fx-mono); font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; color: var(--fx-teal); margin: 0 0 1rem; }
.fx-h1 { font-family: var(--fx-disp); font-weight: 700; font-size: clamp(2.2rem, 6vw, 4rem); line-height: 1.0; letter-spacing: -.01em;
  margin: 0 0 1rem; text-wrap: balance; text-shadow: 0 3px 40px rgba(5,4,9,.9); }
.fx-lede { font-size: clamp(1.05rem, 2.4vw, 1.3rem); color: #e6dbe2; line-height: 1.45; margin: 0 0 1.1rem; text-shadow: 0 2px 24px rgba(5,4,9,.9); }
.fx-teach { font-size: .98rem; color: var(--fx-muted); line-height: 1.55; margin: 0 0 1.6rem; max-width: 52ch; }
.fx-teach b { color: var(--fx-paper); }

.fx-cta-row { display: flex; gap: .8rem; flex-wrap: wrap; }
.fx-btn { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--fx-body); font-weight: 600; font-size: 1rem;
  padding: .8rem 1.5rem; border-radius: 999px; text-decoration: none; min-height: 44px; cursor: pointer;
  border: 1px solid var(--fx-line); background: transparent; color: var(--fx-paper); transition: transform .15s, box-shadow .2s, background .2s, border-color .2s; }
.fx-btn--primary { background: var(--fx-garnet); color: #0a0409; border-color: var(--fx-garnet); box-shadow: 0 8px 30px -8px rgba(224,36,74,.6); }
.fx-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 12px 36px -8px rgba(224,36,74,.8); }
.fx-btn--ghost:hover { border-color: var(--fx-teal); color: var(--fx-teal); }

/* severance caption + gyro chip + skip + fixed CTA */
.gm-truth { position: fixed; left: 50%; bottom: 12vh; transform: translateX(-50%); z-index: 20; pointer-events: none;
  font-family: var(--fx-disp); font-size: clamp(1.1rem, 3vw, 1.7rem); color: var(--fx-paper); text-align: center;
  text-shadow: 0 2px 30px rgba(224,36,74,.6); max-width: 90%; }
.gm-tilt { position: fixed; top: calc(.9rem + env(safe-area-inset-top)); right: .9rem; z-index: 30; cursor: pointer;
  font-family: var(--fx-mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--fx-muted);
  padding: .55rem .8rem; min-height: 44px; border-radius: 999px; border: 1px solid var(--fx-line); background: rgba(6,5,10,.5); backdrop-filter: blur(8px); }
.gm-skip { position: fixed; left: -999px; top: .6rem; z-index: 40; background: var(--fx-void); color: var(--fx-paper); border: 1px solid var(--fx-teal); padding: .6rem 1rem; border-radius: 8px; text-decoration: none; }
.gm-skip:focus { left: .6rem; }
.fx-book { position: fixed; right: calc(1rem + env(safe-area-inset-right)); bottom: calc(1rem + env(safe-area-inset-bottom)); z-index: 30;
  font-family: var(--fx-body); font-weight: 600; font-size: .92rem; color: var(--fx-paper); text-decoration: none;
  padding: .6rem 1.1rem; border-radius: 999px; border: 1px solid var(--fx-line); background: rgba(6,5,10,.55); backdrop-filter: blur(10px);
  opacity: .66; transition: opacity .2s, border-color .2s; min-height: 44px; display: inline-flex; align-items: center; }
.fx-book:hover, .fx-book:focus { opacity: 1; border-color: var(--fx-garnet); }

.fx-plain { position: relative; z-index: 1; background: var(--fx-void); padding: 8vh clamp(1.5rem,6vw,6rem); border-top: 1px solid var(--fx-line); }
.fx-plain h2 { font-family: var(--fx-disp); }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media (max-width: 640px) {
  .fx-room { padding-left: 1.2rem; padding-right: 1.2rem; align-items: flex-end; padding-bottom: 16vh; }
  .fx-room__copy { background: linear-gradient(0deg, rgba(5,4,9,.9) 0%, rgba(5,4,9,.6) 55%, transparent 100%); backdrop-filter: none; }
}