/* The reveal (10-reveal): muted teal slab, dot grid, two meters, ghost labels,
   normalized radar. Flat colour only; no blur. */
#reveal { position: absolute; inset: 0; z-index: 5; }
#reveal[hidden] { display: none; }
.rv {
  position: absolute; inset: 0; overflow: hidden; color: var(--light);
  background: #5e7d88; padding: 4.5vh 5vw; display: grid; grid-template-columns: 1.05fr 1fr; column-gap: 5vw; align-items: start;
  animation: rv-in .9s ease both;
}
@keyframes rv-in { from { opacity: 0; } to { opacity: 1; } }
.rv-grid { position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(circle, #8fb1bb 1.2px, transparent 1.4px); background-size: 3.2vw 3.2vw; background-position: 1.6vw 1.6vw; }
.rv-left, .rv-right { position: relative; }
[data-rv] { display: none; }
[data-rv].on { display: block; animation: rv-block .7s var(--ease-out) both; }
@keyframes rv-block { from { opacity: 0; translate: 0 1.2vw; } to { opacity: 1; translate: 0 0; } }

.rv-name { display: block; font-family: var(--font-display); font-size: clamp(20px, 1.9vw, 46px); letter-spacing: .1em; }
.rv-sv .rv-name, .rv-sv .rv-num { color: var(--cyan); }
.rv-de .rv-name, .rv-de .rv-num { color: var(--coral); }
.rv-meter { margin-bottom: 4.2vh; }
.rv-head { display: flex; justify-content: space-between; align-items: baseline; gap: 2vw; }
.rv-num { font-family: var(--font-mono); font-weight: 700; font-size: clamp(34px, 3.4vw, 80px); line-height: 1; }
.rv-track { position: relative; height: 1.5vw; border-radius: 1vw; background: var(--track); overflow: visible; margin: .8vw 0 .7vw; }
.rv-fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--pct, 0) * 1%); min-width: .5vw; border-radius: inherit; background: var(--cyan); transition: width 1.8s var(--ease-out); }
.rv-de .rv-fill { background: var(--coral); transition-duration: 2.6s; }
.rv-marks { position: absolute; inset: 0; }
.rv-mark { position: absolute; top: -.35vw; bottom: -.35vw; left: calc(var(--at) * 1%); width: .22vw; background: var(--light); opacity: .85; }
.rv-ghosts { position: relative; height: 1.6em; font-family: var(--font-mono); font-size: var(--small-size); color: #9fc0cb; }
.ghost { position: absolute; left: calc((var(--at) + var(--w) / 2) * 1%); top: 0; white-space: nowrap; translate: -50% 0; transition: color .3s ease, transform .3s var(--ease-float); }
.ghost:first-child { left: 0; translate: 0 0; }           /* the narrow first band hangs from the track's start */
.ghost.passed { color: #c9dde4; }
.ghost.lit { color: var(--light); font-weight: 700; transform: translateY(-.15em); }
.rv-note { font-size: var(--body-size); line-height: 1.35; margin: .6vw 0 0; max-width: 32ch; font-weight: 500; }
.rv-caption { font-family: var(--font-mono); font-size: var(--body-size); color: #d6e6ec; margin: 2vh 0 0; }
.rv-caption.on { display: block; }
/* the DE line is said once over the meter; from the radar on it stays as the mono lockup line, not twice */
[data-step="radar"] .rv-de .rv-note { display: none; }
/* before the radar exists the meters own the slab: one centred column, not a half-empty grid */
[data-step="sv"] .rv, [data-step="de"] .rv { grid-template-columns: 1fr; align-content: center; }
[data-step="sv"] .rv-left, [data-step="de"] .rv-left { width: min(100%, 64vw); margin: 0 auto; }
[data-step="sv"] .rv-right, [data-step="de"] .rv-right { display: none; }

/* radar */
.rv-radar { text-align: center; }
.radar { width: min(34vw, 62vh); height: auto; display: block; margin: 1vh auto 0; }
.rv-ring { fill: none; stroke: #9fbfc9; stroke-width: 1.2; }
.rv-poly { fill: var(--coral); fill-opacity: .32; transition: opacity .6s ease; }
.rv-stroke { fill: none; stroke: var(--coral); stroke-width: 3.5; stroke-linejoin: round; }
.rv-axis { font-family: var(--font-mono); font-size: 15px; font-weight: 700; fill: var(--light); }
.rv-axis-val { font-size: 10px; font-weight: 500; fill: #d6e6ec; }
.rv-legend { list-style: none; padding: 0; margin: 1vh auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: .3vw 2vw; font-size: var(--small-size); text-align: left; color: #d6e6ec; max-width: 34vw; }
.rv-legend b { font-family: var(--font-mono); color: var(--light); margin-right: .4em; }
.rv-radar .rv-note { margin: 1.4vh auto 0; max-width: 40ch; }

/* decision three alone */
.rv-trap { grid-column: 1 / -1; max-width: 70vw; }
.rv-trap-head { display: flex; align-items: baseline; gap: 3vw; }
.rv-trap .rv-name { color: var(--gold-text); }
.rv-split { font-family: var(--font-mono); font-size: clamp(22px, 2vw, 48px); }
.rv-split-bars { display: flex; height: 1.5vw; border-radius: 1vw; overflow: hidden; background: var(--track); margin: 1.2vh 0 2.4vh; max-width: 60vw; }
.sb { display: block; width: calc(var(--pct) * 1%); transition: width 1.4s var(--ease-out); }
.sb-a { background: var(--cyan); } .sb-b { background: var(--coral); }
.rv-lead { font-family: var(--font-display); font-size: var(--display-size); margin: 0 0 1vh; }
.rv-body { font-size: var(--body-size); line-height: 1.35; margin: 0 0 1.4vh; font-weight: 500; }
.rv-name-it { color: #e3eef2; }
.rv-close { color: var(--gold-text); font-weight: 700; }

/* handoff: three questions, then the takeaway; references stay as a footnote */
.rv-handoff { grid-column: 1 / -1; max-width: 76vw; }
.rv-hand-line { font-family: var(--font-display); font-size: var(--display-size); margin: 0 0 2vh; transition: font-size .5s ease, opacity .5s ease; }
.rv-hand-line.dim { font-size: clamp(20px, 1.9vw, 46px); opacity: .7; }
.rv-q-label { color: var(--gold-text); }
.rv-questions { list-style: none; padding: 0; margin: 1vh 0 0; counter-reset: q; }
.rv-q { display: none; grid-template-columns: auto 1fr; gap: .6vw 1.6vw; align-items: baseline; margin: 0 0 1.6vh; }
.rv-q.on { display: grid; animation: rv-block .7s var(--ease-out) both; }
.rv-q-kind { font-family: var(--font-mono); font-size: var(--small-size); color: var(--cyan); white-space: nowrap; }
.rv-q-text { font-size: var(--body-size); line-height: 1.35; font-weight: 500; }
.rv-takeaway { display: none; margin-top: 2vh; padding: 1.4vw 1.8vw; background: var(--slate); border-radius: 1vw; }
.rv-takeaway.on { display: block; animation: rv-block .7s var(--ease-out) both; }
.rv-takeaway .rv-name { color: var(--gold-text); }
.rv-takeaway p { font-size: var(--body-size); line-height: 1.35; margin: .4vw 0 0; font-weight: 600; }
.rv-refs { position: absolute; left: 5vw; right: 5vw; bottom: 2.4vh; font-size: clamp(11px, .8vw, 18px); color: #cfe0e6; line-height: 1.3; }
.rv-refs .rv-name { font-size: clamp(12px, .95vw, 22px); margin-bottom: .3vw; }
.rv-refs ol { margin: 0; padding-left: 1.4em; columns: 2; column-gap: 3vw; }
.rv-refs li { break-inside: avoid; }

@media (prefers-reduced-motion: reduce) {
  .rv, [data-rv].on, .rv-q.on, .rv-takeaway.on { animation: none; }
  .rv-fill, .sb, .ghost, .rv-hand-line { transition: none; }
}