/* The Jaipur Journey — 3D-specific styles (everything else comes from styles.css) */

#world {
  position: relative;
}

/* The WebGL canvas sits under the story overlays; pointer-events off so wheel and
   touch scrolling always reach the document. */
#gl {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  display: block;
  pointer-events: none;
}

/* Scroll track — its height (8 viewport heights + 1) is set by world3d.js */
.sw-track {
  position: relative;
  z-index: 1;
  width: 100%;
  pointer-events: none;
}

.w3d-debug {
  position: fixed;
  left: 8px;
  top: 8px;
  z-index: 400;
  font: 12px ui-monospace, Menlo, monospace;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  padding: 4px 8px;
  border-radius: 6px;
  pointer-events: none;
}

/* Beat 1 sits over a bright sunrise sky in the 3D world, so give the title a
   soft dark halo. It's a pseudo-element that extends past the beat's box so it
   doesn't eat any of the text width (fades with the beat's own opacity). */
#beat-1 {
  position: absolute;
  isolation: isolate;
}
#beat-1::before {
  content: '';
  position: absolute;
  inset: -22% -16%;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(ellipse at center,
    rgba(13, 9, 10, 0.72) 0%,
    rgba(13, 9, 10, 0.58) 30%,
    rgba(13, 9, 10, 0.3) 55%,
    rgba(13, 9, 10, 0.08) 78%,
    rgba(13, 9, 10, 0) 100%);
}
#beat-1 .beat-date {
  color: #fff3d6;
  font-weight: 700;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9), 0 0 18px rgba(0, 0, 0, 0.8);
}
#beat-1 .beat-title {
  text-shadow: 0 3px 8px rgba(0, 0, 0, 0.9), 0 0 30px rgba(0, 0, 0, 0.7);
}
#beat-1 .name-cycler {
  color: #ece6ff;
  text-shadow: 0 3px 8px rgba(0, 0, 0, 0.9), 0 0 30px rgba(0, 0, 0, 0.7);
}