/* ── 3D Camera Section ─────────────────────────────────────────── */
.cam-section { position: relative; background: var(--bg); }
.cam-wrap { position: relative; height: 300vh; }
.cam-stage {
  position: sticky; top: 0;
  height: 100vh; height: 100dvh;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  touch-action: pan-y;          /* vertical scroll stays native; horizontal drag rotates */
  cursor: grab;
}
.cam-stage:active { cursor: grabbing; }
.cam-canvas {
  position: absolute; inset: 0;
  transition: opacity 0.2s linear;
}
.cam-canvas canvas { width: 100% !important; height: 100% !important; display: block; }
.cam-head {
  position: absolute; top: clamp(70px, 8vh, 100px); left: 0; right: 0;
  text-align: center; z-index: 2; pointer-events: none; padding: 0 24px;
  transition: opacity 0.3s linear;
}
.cam-head h2 { font-size: clamp(26px, 4vw, 52px); font-weight: 900; line-height: 1.2; }
.cam-status {
  position: absolute; z-index: 2; color: var(--muted);
  font-size: 14px; letter-spacing: 1px;
}
.cam-hint {
  position: absolute; z-index: 2; bottom: clamp(40px, 10vh, 90px); left: 0; right: 0;
  text-align: center; color: var(--muted); font-size: 13px; letter-spacing: 1px;
  pointer-events: none; transition: opacity 0.4s ease;
}
.cam-hint.is-hidden { opacity: 0; }
.cam-fallback { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; color: var(--muted); }


/* body overflow-x:hidden makes body a scroll container and breaks position:sticky.
   clip keeps the same horizontal clipping without creating a scroll container. */
body { overflow-x: clip !important; }

/* The ATHAR letters are laid out inside an RTL page, which reversed them to "RAHTA".
   Force left-to-right order for this word only. */
.athar-word { direction: ltr; }