.ctl-stagewrap { position: relative; margin-top: var(--s-6); }

.ctlfig { margin: 0; width: 100%; }
.ctlfig svg { display: block; width: 100%; height: auto; overflow: visible; }


.ctlfig svg line, .ctlfig svg path, .ctlfig svg rect, .ctlfig svg polyline,
.ctlfig svg circle, .ctlfig svg polygon {
  vector-effect: none; stroke: var(--cream); stroke-width: 1; fill: none;
}
.ctlfig svg text { font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; fill: var(--cream); stroke: none; opacity: .62; }
.ctlfig .ctl-hit { fill: rgba(0,0,0,0); stroke: none; pointer-events: all; opacity: 1; }
.ctlfig figcaption { font-family: var(--mono); font-size: var(--fs-micro);
  letter-spacing: .12em; text-transform: uppercase; color: var(--cream); opacity: .5;
  margin-top: var(--s-4); line-height: 1.6; }


.ctlfig .cb-box { stroke-dasharray: var(--len); stroke-dashoffset: 0; opacity: .78; }
.ctlfig .cb-num { font-size: 10px; letter-spacing: .06em; opacity: .5; }
.ctlfig .cb-gname { font-size: 10px; letter-spacing: .16em; opacity: .78; }
.ctlfig .cb-gcount { font-size: 9.5px; letter-spacing: .16em; opacity: .42; }
.ctlfig .cb-drop { stroke-dasharray: var(--len); stroke-dashoffset: 0; opacity: .34; }
.ctlfig svg path.cb-spine { stroke: var(--brass-glow); stroke-width: 1.2;
  stroke-dasharray: var(--len); stroke-dashoffset: 0; opacity: .8; }
.ctlfig .cb-num-big { font-family: var(--serif); font-size: 76px; letter-spacing: -.01em;
  text-transform: none; fill: var(--cream); opacity: .95; }
.ctlfig .cb-slab { font-size: 9.5px; letter-spacing: .18em; opacity: .55; }
.ctlfig .cb-sillus { font-size: 9.5px; letter-spacing: .18em; opacity: .38; }
.ctlfig .ctl-readout { font-family: var(--sans); font-size: 13px; letter-spacing: 0;
  text-transform: none; opacity: .62; }


.ctlfig .cb-mark:hover .cb-box { opacity: 1; stroke-width: 1.6; }
.ctlfig .cb-mark:hover .cb-num { opacity: .9; }
.ctlfig .cb-glab:hover .cb-gname { opacity: 1; }
.ctlfig .cb-glab:hover .cb-gcount { opacity: .7; }
.ctlfig .cb-mark.hot .cb-box { opacity: 1; }
.ctlfig .ctl-readout.hot { opacity: .95; }


.ctl-stagewrap.arm .cb-box, .ctl-stagewrap.arm .cb-drop, .ctl-stagewrap.arm .cb-spine {
  stroke-dashoffset: var(--len); opacity: 0;
}
.ctl-stagewrap.arm .ctlfig svg text { opacity: 0; }
.ctl-stagewrap.arm .ctlfig .ctl-hit { opacity: 1; }
.ctl-stagewrap.arm .ctlfig figcaption { opacity: 0; }


@keyframes ctlDraw { to { stroke-dashoffset: 0; } }
@keyframes ctlIn   { to { opacity: var(--o, .62); } }

.ctl-stagewrap.arm.run .cb-box {
  animation: ctlDraw .55s cubic-bezier(.3,.6,.2,1) var(--d) forwards,
             ctlIn .01s linear var(--d) forwards; --o: .78; }
.ctl-stagewrap.arm.run .cb-num  { animation: ctlIn .45s ease var(--d) forwards; --o: .5; }
.ctl-stagewrap.arm.run .cb-gname  { animation: ctlIn .5s ease var(--d) forwards; --o: .78; }
.ctl-stagewrap.arm.run .cb-gcount { animation: ctlIn .5s ease var(--d) forwards; --o: .42; }
.ctl-stagewrap.arm.run .cb-drop {
  animation: ctlDraw .45s ease var(--d) forwards, ctlIn .01s linear var(--d) forwards; --o: .34; }
.ctl-stagewrap.arm.run .cb-spine {
  animation: ctlDraw 1.30s cubic-bezier(.25,.6,.2,1) var(--d) forwards,
             ctlIn .01s linear var(--d) forwards; --o: .8; }
.ctl-stagewrap.arm.run .cb-num-big { animation: ctlIn .5s ease var(--d) forwards; --o: .95; }
.ctl-stagewrap.arm.run .cb-slab    { animation: ctlIn .5s ease var(--d) forwards; --o: .55; }
.ctl-stagewrap.arm.run .cb-sillus  { animation: ctlIn .5s ease var(--d) forwards; --o: .38; }
.ctl-stagewrap.arm.run .ctl-readout{ animation: ctlIn .5s ease var(--d) forwards; --o: .62; }
.ctl-stagewrap.arm.run .ctlfig figcaption { animation: ctlIn .6s ease 5.30s forwards; --o: .5; }


.ctlfig--narrow { display: none; }
@media (max-width: 820px) {
  .ctlfig[data-controls="board"] { display: none; }
  .ctlfig--narrow { display: block; }
  .ctlfig--narrow svg { width: 320px; max-width: 100%; margin: 0 auto; }
}


@media (prefers-reduced-motion: reduce) {
  .ctlfig svg *, .ctlfig figcaption {
    animation: none !important; transition: none !important;
    stroke-dashoffset: 0 !important; transform: none !important; }
  .ctl-stagewrap.arm .cb-box, .ctl-stagewrap.arm .cb-drop, .ctl-stagewrap.arm .cb-spine,
  .ctl-stagewrap.arm .ctlfig svg text,
  .ctl-stagewrap.arm .ctlfig figcaption { opacity: inherit; }
  .ctlfig .cb-box { opacity: .78; } .ctlfig .cb-num { opacity: .5; }
  .ctlfig .cb-gname { opacity: .78; } .ctlfig .cb-gcount { opacity: .42; }
  .ctlfig .cb-drop { opacity: .34; } .ctlfig svg path.cb-spine { opacity: .8; }
  .ctlfig .cb-num-big { opacity: .95; }
  .ctlfig .cb-slab { opacity: .55; } .ctlfig .cb-sillus { opacity: .38; }
  .ctlfig .ctl-readout { opacity: .62; }
  .ctlfig figcaption { opacity: .5; }
}