/* ═══════════════════════════════════════════
   SH2 — THREE.JS BACKGROUND SECTIONS
   #magnetic (repulsion field) + #gravity (zero-gravity frames).
   Canvases sit absolute behind the copy; sections clip overflow.
   Colors come from tokens.css — .sec-dark (theme builder) flips
   the local ink scale, so copy only uses --ink-* / accents.
   ═══════════════════════════════════════════ */

/* ── shared scaffolding ── */
#magnetic,
#gravity {
  position: relative;
  overflow: clip;
  display: flex;
  align-items: center;
}

#magnetic { min-height: 100vh; padding: clamp(96px, 14vh, 170px) 0; }
#gravity  { min-height: 90vh;  padding: clamp(80px, 12vh, 140px) 0; }

.sh2-three-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none; /* pointer FX read from window; text stays selectable */
}

.sh2-three-copy {
  position: relative;
  z-index: 1;
  width: 100%;
}

/* reserved Cloudflare asset slot (hands-on-mountain GLB) — sits
   behind everything; the mono label marks the drop point. */
.sh2-cf-slot {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 16px 22px;
  pointer-events: none;
}
.sh2-cf-slot__note {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  opacity: 0.75;
}

/* ── type voice ── */
.sh2-three-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0 0 clamp(18px, 3vh, 30px);
}

.sh2-three-giant {
  font-family: var(--font-grotesk);
  font-weight: 800;
  font-size: clamp(44px, 9.5vw, 150px);
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--ink-0);
  margin: 0;
  max-width: 12ch;
  overflow-wrap: break-word;
}
.sh2-three-giant em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  background: var(--holo);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.sh2-three-lede {
  font-family: var(--font-ui);
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.65;
  color: var(--ink-1);
  max-width: 44ch;
  margin: clamp(22px, 4vh, 40px) 0 0;
}

/* rotated mono margin-note (runbook voice) */
.sh2-three-note {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: var(--ink-2);
  margin-top: clamp(20px, 3.5vh, 34px);
  transform: rotate(-1.6deg);
}
.sh2-three-note b { color: var(--accent); font-weight: 500; }

/* ── #magnetic specifics ── */
.sh2-magnetic-copy .sh2-three-giant { margin-left: -0.04em; }

/* ── #gravity specifics — decentred copy block ── */
.sh2-gravity-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.sh2-gravity-copy .sh2-three-note {
  align-self: flex-end;
  transform: rotate(1.8deg);
  margin-right: clamp(0px, 6vw, 90px);
}
.sh2-gravity-copy .sh2-three-note b { color: var(--accent-2); }

/* offset index number floating beside the gravity statement */
.sh2-gravity-idx {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  margin: 0 0 8px clamp(0px, 3vw, 48px);
  transform: rotate(-90deg) translateX(-6px);
  transform-origin: left bottom;
  width: max-content;
}

/* ── responsive ── */
@media (max-width: 720px) {
  #magnetic { min-height: 88vh; }
  #gravity  { min-height: 76vh; }
  .sh2-three-giant { max-width: none; }
  .sh2-cf-slot { padding: 10px 14px; }
  .sh2-gravity-copy .sh2-three-note { align-self: flex-start; margin-right: 0; }
  .sh2-gravity-idx { transform: none; margin-left: 0; }
}