/* MAGNITUDE — the ages diorama: a 3D town, and the seam sweeping across it */

#ages {
  position: fixed; inset: 0; z-index: 0;
  background: #0a0d12;
}
#ages .stage3d {
  display: block; width: 100%; height: 100%;
}

/* The clipping plane does the real work in the scene; this is only its label,
   parked at the same screen position. */
#ages .seam {
  position: absolute; top: 0; bottom: 0; width: 0;
  border-left: 2px solid rgb(255 255 255 / .55);
  box-shadow: 0 0 26px rgb(0 0 0 / .5);
  opacity: 0; transition: opacity .25s;
  pointer-events: none;
}
#ages .seam b {
  position: absolute; top: 18px;
  font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: .16em;
  color: var(--ink); background: color-mix(in oklab, #0a0d12 66%, transparent);
  padding: 4px 9px; border-radius: 3px;
  font-variant-numeric: tabular-nums;
}
#ages .y-past { right: 10px; }
#ages .y-future { left: 10px; }

/* the shader canvas and the town never show at the same time */
body[data-mode="a"] #stage { display: none; }
body:not([data-mode="a"]) #ages { display: none; }

/* the ages readout counts years, not powers of ten */
body[data-mode="a"] #readout .exp { letter-spacing: .04em; }

.noscript-note {
  position: fixed; inset: auto 24px 24px; z-index: 9;
  font-family: var(--mono); font-size: 12px; color: var(--ink);
}