/* Pen-drawn organism illustrations. Strokes use currentColor, accents use the world's --a1/--a2. */
.illus {
  --w: 17rem;
  --idle: 3s;
  display: block;
  width: min(var(--w), 86%);
  margin: 2rem auto;
  color: var(--ink, currentColor);
  text-align: center;
  pointer-events: none;
}
.illus[data-size="s"] { --w: 11rem; }
.illus[data-size="m"] { --w: 17rem; }
.illus[data-size="l"] { --w: 24rem; }
.illus svg { display: block; width: 100%; height: auto; overflow: hidden; }
.illus .cap {
  display: block;
  margin-top: 0.55rem;
  font: italic 0.82rem/1.35 'Bradley Hand', 'Segoe Print', 'Noteworthy', 'Marker Felt', var(--serif, Georgia, serif);
  letter-spacing: 0.01em;
  color: var(--ink-3, currentColor);
  opacity: 0;
  transition: opacity 1.2s ease;
  transition-delay: calc(var(--idle) * 0.7);
}
.illus.in .cap { opacity: 1; }

@media (min-width: 62rem) {
  .illus[data-side] { margin-top: 0.4rem; margin-bottom: 1rem; }
  .illus[data-side="left"] { float: left; margin-left: calc(-1 * min(var(--w) * 0.55, 9rem)); margin-right: 2rem; }
  .illus[data-side="right"] { float: right; margin-right: calc(-1 * min(var(--w) * 0.55, 9rem)); margin-left: 2rem; }
}

/* pen strokes */
.illus path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.15;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  opacity: 0;
}
.illus path.hv { stroke-width: 1.7; }
.illus path.th { stroke-width: 0.6; opacity: 0; }
.illus path.ft { stroke-width: 0.5; }
.illus path.a1 { stroke: var(--a1); }
.illus path.a2 { stroke: var(--a2); }
.illus path.gl { stroke: var(--a1); stroke-width: 2.2; filter: drop-shadow(0 0 3px var(--a1)); }
.illus path.dot { stroke-width: 2.1; stroke-dasharray: none; stroke-dashoffset: 0; }
.illus path.dt { stroke-width: 1.3; }
.illus path.dash { stroke-dasharray: none; stroke-dashoffset: 0; stroke-width: 0.9; }
.illus path.dd { stroke-dasharray: 2.6 2.4; stroke-dashoffset: 0; stroke-width: 0.9; }
.illus .fx { opacity: 0; }
.illus .fx * { fill: none; stroke: currentColor; }
.illus .fx .fa1 { stroke: var(--a1); }
.illus .fx .fa2 { stroke: var(--a2); }
.illus .fx .solid { fill: var(--a1); stroke: none; }
.illus .fx .s2 { fill: var(--a2); stroke: none; }

.illus.in path { animation: ill-draw 0.7s cubic-bezier(0.4, 0.1, 0.3, 1) forwards; animation-delay: calc(var(--i) * var(--st, 18ms)); }
.illus.in path.th { animation-name: ill-draw-th; }
.illus.in path.dash, .illus.in path.dd, .illus.in path.dot { animation-name: ill-fade; animation-duration: 0.5s; }
.illus.in .fx { animation: ill-fade 1s ease forwards; animation-delay: var(--idle); }

@keyframes ill-draw { 0% { opacity: 1; stroke-dashoffset: 1; } 100% { opacity: 1; stroke-dashoffset: 0; } }
@keyframes ill-draw-th { 0% { opacity: 0.75; stroke-dashoffset: 1; } 100% { opacity: 0.75; stroke-dashoffset: 0; } }
@keyframes ill-fade { from { opacity: 0; } to { opacity: 1; } }

/* idle life: starts once drawn, pauses off screen */
.illus .m { transform-box: view-box; }
.illus circle.m, .illus ellipse.m { transform-box: fill-box; transform-origin: center; }
.illus.in .m { animation-delay: var(--idle); animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-direction: alternate; }
.illus.off .m { animation-play-state: paused !important; }
.illus.in .breathe { animation-name: ill-breathe; animation-duration: 5s; }
.illus.in .swim { animation-name: ill-swim; animation-duration: 6s; }
.illus.in .sway { animation-name: ill-sway; animation-duration: 4.5s; }
.illus.in .wag { animation-name: ill-wag; animation-duration: 1.7s; }
.illus.in .bob { animation-name: ill-bob; animation-duration: 3.6s; }
.illus.in .pulse { animation-name: ill-pulse; animation-duration: 1.6s; }
.illus.in .twitch { animation-name: ill-twitch; animation-duration: 5.5s; animation-direction: normal; animation-timing-function: linear; }
.illus.in .twitch2 { animation-name: ill-twitch; animation-duration: 7.3s; animation-direction: normal; animation-timing-function: linear; }
.illus.in .wave { animation-name: ill-wave; animation-duration: 0.9s; animation-delay: calc(var(--idle) + var(--j, 0) * 70ms); }
.illus.in .run { animation-name: ill-run; animation-duration: 3.4s; animation-direction: normal; animation-timing-function: linear; }
.illus.in .spin { animation-name: ill-spin; animation-duration: 40s; animation-direction: normal; animation-timing-function: linear; }
.illus.in .flow { animation-name: ill-flow; animation-duration: 1.4s; animation-direction: normal; animation-timing-function: linear; }
.illus .spark { offset-rotate: 0deg; }
.illus.in .spark { animation-name: ill-spark; animation-duration: 3.2s; animation-direction: normal; animation-timing-function: cubic-bezier(0.5, 0, 0.4, 1); }

@keyframes ill-breathe { from { transform: scale(1); } to { transform: scale(1.014, 1.022); } }
@keyframes ill-swim { from { transform: translate(-1.5px, 1px) rotate(-0.6deg); } to { transform: translate(1.5px, -1px) rotate(0.6deg); } }
@keyframes ill-sway { from { transform: rotate(-2.2deg); } to { transform: rotate(2.2deg); } }
@keyframes ill-wag { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
@keyframes ill-bob { from { transform: translateY(-1px); } to { transform: translateY(1.2px); } }
@keyframes ill-pulse { from { opacity: 0.35; transform: scale(0.85); } to { opacity: 1; transform: scale(1.15); } }
@keyframes ill-twitch { 0%, 88%, 100% { transform: rotate(0); } 91% { transform: rotate(-5deg); } 94% { transform: rotate(3deg); } 97% { transform: rotate(-1deg); } }
@keyframes ill-wave { from { transform: translateX(0); } to { transform: translateX(-1.6px) scaleY(0.97); } }
@keyframes ill-run { from { transform: translateX(-40px); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } to { transform: translateX(40px); opacity: 0; } }
@keyframes ill-spin { to { transform: rotate(360deg); } }
@keyframes ill-flow { to { stroke-dashoffset: -9; } }
@keyframes ill-spark { 0% { offset-distance: 0%; opacity: 0; } 8% { opacity: 1; } 85% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .illus path { opacity: 1; stroke-dashoffset: 0; animation: none !important; }
  .illus path.th { opacity: 0.75; }
  .illus .fx { opacity: 1; animation: none !important; }
  .illus .m, .illus .spark { animation: none !important; }
  .illus .cap { opacity: 1; transition: none; }
}