/* Mindhalla v3 — roadmap (block 03) + dune band */

/* ===== sticky scroll stage ===== */
.rm { height: 340vh; position: relative; }
.rm-stage {
  position: sticky; top: 58px;
  height: calc(100svh - 58px);
  display: flex; flex-direction: column;
  overflow: clip;
}
.rm-grid {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(24px, 4vw, 72px);
  align-items: center;
  padding-block: clamp(12px, 2vh, 28px);
}

/* left: instrument readout */
.rm-left { display: flex; flex-direction: column; gap: clamp(14px, 2.4vh, 26px); }
.rm-day-lbl { color: var(--text2); }
.rm-readout {
  display: flex; align-items: flex-end; gap: 16px;
  font-family: "JetBrains Mono", monospace;
  white-space: nowrap;
}
.rm-readout .d-tag {
  font-size: 11px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--text2); padding-bottom: 1.05em;
}
.rm-readout .d-num {
  font-weight: 400;
  font-size: clamp(72px, 9.5vw, 150px);
  line-height: 0.78;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
}
.rm-readout .of {
  font-size: clamp(18px, 2.2vw, 30px); letter-spacing: 0; color: var(--text3);
  padding-bottom: .5em;
}
.rm-phase { max-width: 38ch; min-height: 7.5em; }
.rm-phase h3 {
  font-family: "Clash Display", sans-serif; font-weight: 600;
  font-size: clamp(24px, 2.8vw, 36px); letter-spacing: -0.02em;
  display: flex; align-items: baseline; gap: 14px;
}
.rm-phase h3 .ph-d { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: .1em; color: var(--accent); text-transform: uppercase; }
html[data-accent="mono"] .rm-phase h3 .ph-d { color: var(--text2); }
.rm-phase p { color: var(--text2); font-size: 15px; margin-top: 10px; text-wrap: pretty; }
.rm-phase .swap { transition: opacity .25s ease; }
.rm-phase .swap.out { opacity: 0; }

/* right: assembly canvas */
.rm-canvas-wrap {
  position: relative;
  height: min(56vh, 580px);
  min-height: 260px;
}
#rm-canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; }
.rm-cap {
  position: absolute; left: 0; top: -22px;
  color: var(--text3);
}

/* bottom: precision track */
.rm-track { width: 100%; padding-bottom: clamp(20px, 3.5vh, 36px); }
.rm-rail { position: relative; height: 64px; }
.rm-rail .base {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--border);
}
.rm-rail .fill {
  position: absolute; left: 0; bottom: 0;
  height: 1px; background: var(--accent);
  width: 0%;
}
html[data-accent="mono"] .rm-rail .fill { background: var(--text); }
.rm-tick {
  position: absolute; bottom: 0;
  width: 1px; height: 12px; background: var(--text3);
}
.rm-tick.major { height: 20px; background: var(--text2); }
.rm-tick i {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  font-style: normal;
  font-family: "JetBrains Mono", monospace; font-size: 10px;
  letter-spacing: .08em; color: var(--text3);
  font-variant-numeric: tabular-nums;
}
.rm-tick.major i { color: var(--text2); }
.rm-seg {
  position: absolute; bottom: 44px;
  font-family: "JetBrains Mono", monospace; font-size: 9px;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--text3);
  transition: color .25s;
}
.rm-seg.on { color: var(--accent); }
html[data-accent="mono"] .rm-seg.on { color: var(--text); }
.rm-carriage {
  position: absolute; bottom: -1px; width: 2px; height: 30px;
  background: var(--accent);
  transform: translateX(-50%);
}
html[data-accent="mono"] .rm-carriage { background: var(--text); }
.rm-carriage::after {
  content: ""; position: absolute; top: -7px; left: 50%;
  width: 7px; height: 7px; border-radius: 50%;
  background: inherit;
  transform: translateX(-50%);
}
.rm-hint {
  position: absolute; right: clamp(20px, 4.5vw, 80px); bottom: clamp(20px, 3.5vh, 36px);
  color: var(--text3);
  display: inline-flex; align-items: center; gap: 8px;
}
.rm-hint::after {
  content: ""; width: 1px; height: 22px; background: var(--text3);
  animation: hintdrop 1.8s ease-in-out infinite;
}
@keyframes hintdrop {
  0%, 100% { transform: scaleY(.3); transform-origin: top; opacity: .4; }
  50% { transform: scaleY(1); opacity: 1; }
}

/* ===== dune band (final CTA echo of the old cube field) ===== */
.dune-wrap { position: relative; margin-top: clamp(48px, 7vw, 96px); }
#dune { display: block; width: 100%; height: clamp(140px, 22vw, 240px); cursor: crosshair; }
.dune-cap {
  position: absolute; right: clamp(20px, 4.5vw, 80px); top: -22px;
  color: var(--text3);
}

/* ===== reduced motion / fallbacks ===== */
@media (prefers-reduced-motion: reduce) {
  .rm { height: auto; }
  .rm-stage { position: static; height: auto; gap: 28px; }
  .rm-canvas-wrap { height: 320px; }
  .rm-hint { display: none; }
  .rm-hint::after { animation: none; }
}

/* ===== responsive ===== */
@media (max-width: 880px) {
  .rm { height: 300vh; }
  .rm-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 14px;
    align-items: start;
  }
  .rm-left { gap: 10px; }
  .rm-readout { gap: 10px; }
  .rm-readout .d-num { font-size: clamp(52px, 15vw, 80px); }
  .rm-readout .d-tag { padding-bottom: .8em; }
  .rm-phase { min-height: 6.4em; }
  .rm-phase p { font-size: 13.5px; max-width: 52ch; }
  .rm-canvas-wrap { height: auto; min-height: 0; align-self: stretch; }
  .rm-cap { display: none; }
  .rm-hint { display: none; }
  .rm-seg { display: none; }
  .rm-rail { height: 46px; }
  .rm-tick i { bottom: 18px; }
}