/* The three home-page figures. Art: scripts/figures.mjs. Behaviour: src/figures.js. Loaded on the home page only.
   Line conventions: .fig-ink is built, .fig-next (dashed) is what could come next, .fig-thin and .fig-measure measure.
   Every rule up to "Plotting in" describes the finished drawing. The plotting lives under .fx, a class the script
   sets only when motion is welcome, so without the script or with reduced motion the figures are complete and still. */
.fig{position:relative;margin:0}
.fig svg{display:block;width:100%;height:auto;overflow:visible;fill:none}
.fig-thin,.fig-ink,.fig-measure,.fig-next,.fig-wall,.fig-bar,.fig-bevel{vector-effect:non-scaling-stroke}
.fig-thin{stroke:#b2b2b2}
.fig-ink{stroke:var(--ink);stroke-width:1.5px}
.fig-measure{stroke:var(--ink)}
.fig-next{stroke:#8a8a8a;stroke-dasharray:5 5}
.fig-solid{fill:var(--ink)}
.fig pattern circle{fill:#cdcdcd}
.fig-pulse{fill:var(--ink);opacity:0}

/* Services: two white plates on the grey section. The first is a browser window; the second has no top edge. */
.fig-step,.fig-rise{margin-bottom:30px}
.fig-step{background:var(--paper);border-radius:8px 8px 0 0}
.fig-card{fill:var(--paper)}
.fig-rise{margin-top:-25%}
/* That margin lets the second figure rise beside the section heading, so the heading keeps to the first column. */
@media(min-width:701px){.services .section-heading>div{max-width:calc(50% - 35px)}}
.fig-bar{stroke:#e2e2e2}
.fig-lights circle{fill:#b7b7b7;transition:fill .2s}
.fig-step:hover .fig-lights :first-child{fill:#ff5f57}.fig-step:hover .fig-lights :nth-child(2){fill:#febc2e}.fig-step:hover .fig-lights :last-child{fill:#28c840}
.fig-centre{stroke-dasharray:14 4 2 4}
#fig-hatch rect{fill:var(--paper)}#fig-hatch path{stroke:var(--ink)}
.fig-wall{fill:url(#fig-hatch);stroke:var(--ink);stroke-width:1.5px}
.fig-bevel{stroke:#fff;stroke-opacity:.24}
.fig-arrow{stroke:#fff;stroke-width:5.5}
.fig-cursor{fill:#fff;stroke:var(--ink);stroke-width:2;stroke-linejoin:round}
.fig-key{transition:transform .34s cubic-bezier(.3,1.6,.5,1)}
.is-down .fig-key{transform:translateY(12px);transition:transform .09s ease-in}
.fig-node,.fig-gate{transform-box:fill-box;transform-origin:center}
.fig-press{position:absolute;padding:0;border:0;border-radius:999px;background:none}
@media(hover:hover){.fig-cursor{transition:opacity .25s}.fig-step:hover .fig-cursor{opacity:0}.fig-step:has(.fig-press:enabled:hover):not(.is-down) .fig-key{transform:translateY(-3px)}}
.fig-check{stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.fig-count{font:24px/1 var(--mono);fill:var(--blue)}
.fig-ghost,.fig-mark,.fig-stack{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.fig-gate{transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.fig-gate.is-lit{transform:scaleY(2.4);transition-duration:.08s}
.fig-row>g{transform-box:fill-box;transform-origin:0 50%}

/* Studio: one white line on black. */
.fig-line pattern path,.fig-sheet{stroke:#fff;stroke-opacity:.07}
.fig-trace,.fig-you{stroke:#fff;stroke-width:2.6}
.fig-trace{stroke-linecap:round;stroke-linejoin:round}
.fig-guide path{stroke:#fff;stroke-opacity:.42;vector-effect:non-scaling-stroke}
.fig-dash{stroke-dasharray:3 5}
.fig-m{stroke:#fff;stroke-width:22}
.fig-built rect,.fig-built circle,.fig-stop{fill:#fff}
.fig-built path{stroke:#fff;stroke-width:1.5}
.fig-built .fig-go{stroke:var(--ink);stroke-width:1.7}
.fig-pen{opacity:0}
.fig-pen circle,.fig-pen path{stroke:#fff}

/* Plotting in. Until a figure is on screen its parts wait unseen; .is-in plays them in, in order. */
.fx .fig:not(.is-in) :is(.fig-dim,.fig-centre,.fig-rule,.fig-wall,.fig-key,.fig-wire,.fig-node,.fig-onward,.fig-open,.fig-gate,.fig-ghost,.fig-mark,.fig-row,.fig-trace,.fig-you){opacity:0}
.fig-rule,.fig-dim,.fig-wire,.fig-onward,.fig-open{transform-box:fill-box;transform-origin:0 50%}
.fig-open{transform-origin:50% 100%}
.fx .is-in :is(.fig-centre,.fig-wall,.fig-node,.fig-gate,.fig-ghost,.fig-mark,.fig-you){animation:fig-fade .5s backwards}
.fx .is-in :is(.fig-rule,.fig-dim,.fig-wire,.fig-onward){animation:fig-draw-x .7s cubic-bezier(.2,.7,.2,1) backwards}
.fx .is-in .fig-open{animation:fig-draw-y .9s cubic-bezier(.2,.7,.2,1) backwards}
.fx .is-in .fig-key{animation:fig-key .5s cubic-bezier(.3,1.6,.5,1) .25s backwards}
.fx .is-in .fig-cursor{animation:fig-cursor .7s cubic-bezier(.2,.7,.2,1) .8s backwards}
.fx .is-in .fig-row>g{animation:fig-row .5s cubic-bezier(.2,.7,.2,1) calc(.3s + var(--i) * .09s) backwards}
.fx .is-in .is-new>g{animation:fig-land .5s cubic-bezier(.2,.7,.2,1)}
.fx .is-in .fig-wall{animation-delay:.25s}
.fx .is-in :is(.fig-dim,.fig-gate){animation-delay:.45s}
.fx .is-in :is(.fig-wire,.fig-node){animation-delay:.7s}
.fx .is-in :is(.fig-onward,.fig-mark,.fig-ghost){animation-delay:.9s}
@keyframes fig-fade{from{opacity:0}}
@keyframes fig-draw-x{from{transform:scaleX(0)}}
@keyframes fig-draw-y{from{transform:scaleY(0)}}
@keyframes fig-key{from{opacity:0;transform:translateY(12px)}}
@keyframes fig-cursor{from{opacity:0;transform:translate(40px,34px)}}
@keyframes fig-row{from{opacity:0;transform:translateX(-18px)}}
@keyframes fig-land{from{opacity:0;transform:scaleX(.06)}}
.fx .fig-line:not(.is-done) [data-at]:not(.is-on){opacity:0}
.fx .fig-line [data-at]{transition:opacity .35s}
.fx .fig-line:not(.is-done) .fig-m:not(.is-on){stroke-width:2.6}
.fx .fig-line .fig-m{transition:opacity .1s,stroke-width .7s cubic-bezier(.2,.7,.2,1)}
.fx .fig-line.is-in .fig-pen{opacity:1;transition:opacity .5s}
.fx .fig-line.is-done .fig-pen{opacity:0}

@media(max-width:700px){.fig-step,.fig-rise{margin-bottom:22px}.fig-step{overflow:hidden}.fig-rise{margin-top:0}.fig-count{font-size:28px}.fig-trace,.fig-you{stroke-width:3.2}}