/* 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; }

/* codx content sits above the scene. */
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; }

/* GSAP scramble hover on H1 + stats (matches codx). */
.hero__title,
.hero__stats { pointer-events: auto !important; cursor: default; }

/* ---- 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;
}

/* H1 — solid white (override codx gradient on "3.0 Powered!"). */
.hero__title,
.hero__title-line,
.hero__title-line--gradient {
  color: #fff !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: #fff !important;
}

/* No shadows; one font family across the page. */
main,
main * {
  font-family: 'Rajdhani', Helvetica Neue, Arial, sans-serif !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

.hero__cta-frame,
.hero__cta:after {
  filter: none !important;
}

.scene-music-toggle,
#beat-trainer,
#beat-trainer *,
#hint,
.lil-gui,
.lil-gui * {
  font-family: 'Rajdhani', Helvetica Neue, Arial, sans-serif !important;
  text-shadow: none !important;
}

@media (max-width: 899px) {
  /* 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; }
}