/* MCF illustrations: drawing in.
   A drawing is an inline <svg class="illo"> (or sits inside an element with class
   "illo"). Lines carry class "ln" and pathLength="1"; fills carry class "fl".
   Nothing is hidden unless the page opts in by putting class "illo-js" on <html>
   (a one-line script), so a page with no script shows every drawing finished.
   Add "is-drawn" to the .illo (e.g. when it scrolls into view) to draw it in:
   the lines draw group by group (each <g class="d-35"> starts at 0.35 seconds; the classes are at the end), then the fills
   fade in behind them. prefers-reduced-motion shows them finished at once. */
.illo-js .illo:not(.is-drawn) .ln { stroke-dasharray: 1; stroke-dashoffset: 1; }
.illo-js .illo:not(.is-drawn) .fl { fill-opacity: 0; }
.illo-js .illo.is-drawn .ln {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: illo-draw 1.1s cubic-bezier(.45, 0, .2, 1) forwards;
  animation-delay: calc(var(--d, 0) * 1s);
}
.illo-js .illo.is-drawn .fl {
  fill-opacity: 0;
  animation: illo-fill .5s ease-out forwards;
  animation-delay: calc(var(--d, 0) * 1s + .7s);
}
.illo-js .illo.is-drawn .gr { animation-delay: 0s; }
@keyframes illo-draw { to { stroke-dashoffset: 0; } }
@keyframes illo-fill { to { fill-opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .illo-js .illo .ln, .illo-js .illo.is-drawn .ln { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
  .illo-js .illo .fl, .illo-js .illo.is-drawn .fl { fill-opacity: 1; animation: none; }
}
/* A path that is both a line and a fill ("ln fl") had its stroke animation replaced by the fill one
   (same property, later rule), so its outline never drew. Run both. */
.illo-js .illo.is-drawn .ln.fl {
  animation: illo-draw 1.1s cubic-bezier(.45, 0, .2, 1) forwards, illo-fill .5s ease-out forwards;
  animation-delay: calc(var(--d, 0) * 1s), calc(var(--d, 0) * 1s + .7s);
}

/* When each group starts, in seconds: d-35 is 0.35. Classes rather than a
   style attribute, because the site's security rules refuse inline styles.
   tools/illustrations/lib.mjs refuses a delay these do not cover. */
.d-0{--d:0}.d-5{--d:0.05}.d-10{--d:0.1}.d-15{--d:0.15}.d-20{--d:0.2}.d-25{--d:0.25}.d-30{--d:0.3}.d-35{--d:0.35}.d-40{--d:0.4}.d-45{--d:0.45}.d-50{--d:0.5}.d-55{--d:0.55}.d-60{--d:0.6}.d-65{--d:0.65}.d-70{--d:0.7}.d-75{--d:0.75}.d-80{--d:0.8}.d-85{--d:0.85}.d-90{--d:0.9}.d-95{--d:0.95}.d-100{--d:1}.d-105{--d:1.05}.d-110{--d:1.1}.d-115{--d:1.15}.d-120{--d:1.2}.d-125{--d:1.25}.d-130{--d:1.3}.d-135{--d:1.35}.d-140{--d:1.4}.d-145{--d:1.45}.d-150{--d:1.5}.d-155{--d:1.55}.d-160{--d:1.6}.d-165{--d:1.65}.d-170{--d:1.7}.d-175{--d:1.75}.d-180{--d:1.8}.d-185{--d:1.85}.d-190{--d:1.9}.d-195{--d:1.95}.d-200{--d:2}.d-205{--d:2.05}.d-210{--d:2.1}.d-215{--d:2.15}.d-220{--d:2.2}.d-225{--d:2.25}.d-230{--d:2.3}.d-235{--d:2.35}.d-240{--d:2.4}.d-245{--d:2.45}.d-250{--d:2.5}.d-255{--d:2.55}.d-260{--d:2.6}.d-265{--d:2.65}.d-270{--d:2.7}.d-275{--d:2.75}.d-280{--d:2.8}.d-285{--d:2.85}.d-290{--d:2.9}.d-295{--d:2.95}.d-300{--d:3}