/* How big the maps got: a Powers-of-Ten zoom through connectome sizes. */
#fig-scale { --pad: 1.3rem; }
#fig-scale .sc-stage {
  position: relative;
  height: clamp(28rem, 72vh, 41rem);
  overflow: hidden;
  border-radius: 2px;
  background:
    radial-gradient(70% 60% at 50% 44%, rgba(169, 139, 255, 0.07), transparent 72%),
    radial-gradient(40% 40% at 78% 70%, rgba(107, 213, 255, 0.05), transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 98% 98% at 50% 50%, #000 70%, transparent 100%);
  mask-image: radial-gradient(ellipse 98% 98% at 50% 50%, #000 70%, transparent 100%);
}
#fig-scale canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; cursor: grab; }
#fig-scale canvas:active { cursor: grabbing; }

#fig-scale .sc-cards { position: absolute; left: var(--pad); bottom: 1.2rem; width: min(26rem, calc(100% - 2 * var(--pad))); height: 11rem; pointer-events: none; }
#fig-scale .sc-card {
  position: absolute; left: 0; bottom: 0; width: 100%;
  opacity: 0; transform: translateY(10px);
  text-shadow: 0 0 14px var(--bg), 0 0 4px var(--bg), 0 0 26px var(--bg);
}
#fig-scale .sc-k { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c); }
#fig-scale .sc-t { font-family: var(--display); font-weight: 400; font-size: clamp(1.55rem, 3.4vw, 2.3rem); line-height: 1.08; margin: 0.25rem 0 0.5rem; color: var(--ink); }
#fig-scale .sc-n { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(1.15rem, 2.2vw, 1.5rem); color: var(--c); line-height: 1.2; }
#fig-scale .sc-s { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-2); margin-top: 0.35rem; line-height: 1.5; letter-spacing: 0.02em; }
#fig-scale .sc-card.ghost .sc-n { color: var(--ink-2); }
#fig-scale .sc-card.ghost .sc-k { color: var(--ink-3); }

#fig-scale .sc-hint { position: absolute; left: var(--pad); top: 1rem; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em; color: var(--ink-3); transition: opacity 0.8s; pointer-events: none; }
#fig-scale .sc-hint.off { opacity: 0; }

/* the timeline: a rail with stops and a handle */
#fig-scale .sc-track { position: relative; height: 4.4rem; margin-top: 0.4rem; touch-action: pan-y; cursor: pointer; user-select: none; -webkit-user-select: none; }
#fig-scale .sc-x { position: absolute; left: calc(var(--pad) + (100% - 2 * var(--pad)) * var(--p)); }
#fig-scale .sc-line { position: absolute; top: 1.5rem; height: 0; border-top: 1px solid var(--ink-3); left: var(--pad); width: calc((100% - 2 * var(--pad)) * 4 / 6); opacity: 0.55; }
#fig-scale .sc-line.future { left: calc(var(--pad) + (100% - 2 * var(--pad)) * 4 / 6); width: calc((100% - 2 * var(--pad)) * 2 / 6); border-top: 1px dashed var(--ink-3); }
#fig-scale .sc-prog { position: absolute; top: 1.5rem; left: var(--pad); height: 2px; margin-top: -1px; width: calc((100% - 2 * var(--pad)) * var(--p)); background: linear-gradient(90deg, var(--a4), var(--a3) 30%, var(--a1) 55%, var(--a2)); box-shadow: 0 0 10px rgba(169, 139, 255, 0.5); border-radius: 2px; }
#fig-scale .sc-stop {
  position: absolute; top: 0; height: 3rem; width: 3rem; margin-left: -1.5rem; padding: 0; border: 0; background: none; cursor: pointer; color: var(--ink-3);
  left: calc(var(--pad) + (100% - 2 * var(--pad)) * var(--p));
}
#fig-scale .sc-stop::before { content: ''; position: absolute; left: 50%; top: 1.5rem; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--bg); border: 1px solid var(--c); transition: transform 0.3s, background 0.3s; }
#fig-scale .sc-stop.mapped::before { background: var(--c); box-shadow: 0 0 8px var(--c); }
#fig-scale .sc-stop.ghost::before { border-style: dashed; }
#fig-scale .sc-stop:hover::before, #fig-scale .sc-stop.on::before { transform: scale(1.5); }
#fig-scale .sc-stop:focus-visible { outline: 1px solid var(--a1); outline-offset: -4px; border-radius: 4px; }
#fig-scale .sc-lab { position: absolute; top: 3.05rem; transform: translateX(-50%); font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.06em; color: var(--ink-3); white-space: nowrap; transition: color 0.3s; pointer-events: none; }
#fig-scale .sc-stop.on ~ .sc-lab, #fig-scale .sc-lab.on { color: var(--ink); }
#fig-scale .sc-lab { left: calc(var(--pad) + (100% - 2 * var(--pad)) * var(--p)); }
#fig-scale .sc-lab.ghost { font-style: italic; font-family: var(--serif); font-size: 0.78rem; letter-spacing: 0; }
#fig-scale .sc-handle {
  position: absolute; top: 1.5rem; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; z-index: 2; outline: none;
  border: 1px solid rgba(236, 232, 255, 0.85);
  background: radial-gradient(circle, rgba(236, 232, 255, 0.95) 0 2.5px, rgba(169, 139, 255, 0.25) 3px, rgba(169, 139, 255, 0.08) 70%);
  box-shadow: 0 0 18px rgba(169, 139, 255, 0.6);
  left: calc(var(--pad) + (100% - 2 * var(--pad)) * var(--p));
}
#fig-scale .sc-handle:focus-visible { box-shadow: 0 0 0 2px var(--a1), 0 0 18px rgba(169, 139, 255, 0.6); }

#fig-scale .sc-cap {
  margin: 0.6rem auto 0; max-width: 40rem; text-align: center; padding: 0.7rem var(--pad) 0;
  font-family: var(--serif); font-style: italic; font-size: 0.95rem; line-height: 1.5; color: var(--ink-3); letter-spacing: 0;
  background: linear-gradient(90deg, transparent, var(--ink-3) 50%, transparent) top / 6rem 1px no-repeat;
  background-position: 50% 0;
}

/* reduced motion: a still gallery of all the maps */
#fig-scale .sc-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.2rem 1.4rem; padding: 0 var(--pad); }
#fig-scale .sc-g canvas { position: static; width: 100%; height: 9rem; touch-action: auto; cursor: default; }
#fig-scale .sc-g .sc-card { position: static; opacity: 1; transform: none; margin-top: 0.6rem; text-shadow: none; }
#fig-scale .sc-g .sc-t { font-size: 1.25rem; margin-bottom: 0.3rem; }
#fig-scale .sc-g .sc-n { font-size: 1rem; }
@media (max-width: 900px) { #fig-scale .sc-gallery { grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 700px) {
  #fig-scale { --pad: 0.9rem; }
  #fig-scale .sc-stage { height: 33rem; }
  #fig-scale .sc-cards { height: 10.5rem; bottom: 0.8rem; }
  #fig-scale .sc-lab { font-size: 0.54rem; letter-spacing: 0; }
  #fig-scale .sc-lab.ghost { font-size: 0.7rem; }
  #fig-scale .sc-s { font-size: 0.66rem; }
}