/* relm-02 overlay — makes the relm-01 FULL REACTIVE scene the page background
 * (3D prism/mountains/water + Scene FX settings + Bass Pulse + spacebar
 * beat-trainer + music) and keeps codx content legible AND interactive on top.
 * Loaded AFTER codx.css so it wins. */

/* --- Let the 3D scene show through everything --- */
html { background: #07030f; }
body {
  background: transparent !important;
  overflow-x: hidden;
}

/* The reactive scene canvas: fixed, full viewport, behind all content.
   pointer-events:auto so empty areas/clicks fall through to the scene (e.g. to
   unlock music); codx's own interactive elements sit above and still work. */
#app {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: auto;
}
#app canvas { display: block; width: 100% !important; height: 100% !important; }

/* Contrast scrim over the scene so white codx copy stays readable.
   pointer-events:none so it never blocks the scene or its UI. */
.relm02-scrim {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(7,3,15,0.82) 0%,
      rgba(7,3,15,0.55) 26%,
      rgba(7,3,15,0.18) 52%,
      rgba(7,3,15,0.0) 78%),
    linear-gradient(180deg,
      rgba(7,3,15,0.55) 0%,
      rgba(7,3,15,0.0) 18%,
      rgba(7,3,15,0.0) 72%,
      rgba(7,3,15,0.6) 100%);
}

/* codx content sits above the scrim. */
main { position: relative; z-index: 2; }

/* Remove codx's own background gradient (replaced by the reactive scene). */
.hero { background: transparent !important; }
.hero__gradient { display: none !important; }

/* ---- pointer-events: only codx's REAL controls capture clicks; everything
   else falls through to the scene so the scene + its UI stay usable. ---- */
.hero__nav,
.hero__layout,
.hero__copy,
.hero__title,
.hero__desc,
.hero__stats,
.hero__footer,
.hero__shell { pointer-events: none !important; }

.hero__menu-link,
.hero__community,
.hero__logo,
.hero__cta,
.hero__learn,
.hero__scroll-cue { pointer-events: auto !important; }

/* ---- Reactive scene UI: make sure it is VISIBLE and ABOVE codx content ---- */

/* Scene FX / Bass Pulse settings panel (lil-gui). It is created fixed top-right
   at z-index 1000; drop it just below the codx nav so they don't visually
   collide. It starts collapsed (see inline script) so it never hides the
   right-column stats; click the "Scene FX" header to expand. */
.lil-gui.root {
  top: 64px !important;
  right: 12px !important;
  z-index: 1000 !important;
  pointer-events: auto !important;
}

/* Beat-trainer panel (bottom-left): "Train beat" + spacebar tap-to-train. */
#beat-trainer { z-index: 40 !important; pointer-events: auto !important; }

/* Music toggle (created by the scene; bottom-left). Styled here because this
   page does not include the scene's original inline <style>. */
.scene-music-toggle {
  position: fixed;
  left: 16px;
  bottom: 14px;
  z-index: 41;
  padding: 8px 14px;
  border: 1px solid rgba(253, 173, 255, 0.35);
  border-radius: 6px;
  background: rgba(7, 3, 15, 0.72);
  color: rgba(255, 255, 255, 0.78);
  font: 12px/1 ui-monospace, monospace;
  letter-spacing: 0.04em;
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  pointer-events: auto;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.scene-music-toggle:hover { border-color: rgba(253, 173, 255, 0.65); color: #fff; }
.scene-music-toggle.is-on {
  border-color: rgba(241, 0, 245, 0.55);
  color: #fdadff;
  background: rgba(30, 8, 40, 0.85);
}
.scene-music-toggle.is-awaiting-sound { animation: relm02-music-pulse 1.4s ease-in-out infinite; }
@keyframes relm02-music-pulse { 50% { border-color: rgba(253, 173, 255, 0.9); color: #fff; } }

/* Optional scene status hint (if present). */
#hint {
  position: fixed; left: 16px; bottom: 120px; z-index: 40;
  max-width: min(420px, calc(100vw - 32px));
  font: 12px/1.5 ui-monospace, monospace; color: rgba(255,255,255,.55);
  pointer-events: none; letter-spacing: .03em;
}
#hint.is-warn { color: rgba(253, 173, 255, 0.95); }

/* Move codx's "Learn about Web 3" link to the bottom-RIGHT so it doesn't sit on
   top of the bottom-left scene controls (trainer + music). */
.hero__footer {
  left: auto !important;
  right: 32px !important;
  justify-content: flex-end !important;
}

/* Subtle text shadow for legibility over the scene. */
.hero__title,
.hero__desc,
.hero__stat-value,
.hero__stat-label,
.hero__menu-link,
.hero__community,
.hero__learn,
.hero__cta-label {
  text-shadow: 0 1px 18px rgba(7,3,15,0.85), 0 1px 3px rgba(7,3,15,0.9);
}

@media (max-width: 899px) {
  .relm02-scrim {
    background:
      linear-gradient(180deg,
        rgba(7,3,15,0.78) 0%,
        rgba(7,3,15,0.45) 24%,
        rgba(7,3,15,0.3) 58%,
        rgba(7,3,15,0.72) 100%);
  }

  /* codx is desktop-first: its mobile nav menu is hidden and the hero title is
     sized for large screens, so it overflows narrow viewports. Tame it. */
  .hero__title { font-size: clamp(3.2rem, 12vw, 6rem) !important; line-height: 0.98 !important; }
  .hero__title-line { white-space: normal !important; }
  .hero__layout { padding-block: 9rem 7rem !important; }
  .hero__desc { max-width: 32rem; }

  /* keep the settings panel header reachable below the mobile nav */
  .lil-gui.root { top: 56px !important; }
}