/* Abb. 1: Hamster im Rad, schwebende Beträge */
figure { margin: 0; }
.stage { position: relative; max-width: 330px; margin: 0 auto; }
.stage svg { display: block; width: 100%; height: auto; overflow: visible; }
figcaption { margin-top: 4px; font: 500 .72rem var(--mono); color: var(--muted); text-align: center; }
.particle {
  position: absolute; left: 60%; top: 60%; pointer-events: none; white-space: nowrap;
  font: 700 .78rem var(--mono); color: var(--ink); animation: floatUp 2.4s ease-out forwards;
}
.particle.volt { color: var(--accent); }
@keyframes floatUp {
  0% { opacity: 0; transform: translate(-50%, 0); }
  12% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), -80px); }
}
.leg { transform-box: fill-box; transform-origin: 50% 0%; animation: run var(--leg, .4s) ease-in-out infinite alternate; }
.leg.b { animation-delay: calc(var(--leg, .4s) * -1); }
@keyframes run { from { transform: rotate(-40deg); } to { transform: rotate(40deg); } }
.bob { animation: bob var(--leg, .4s) ease-in-out infinite alternate; }
@keyframes bob { to { transform: translateY(-3px); } }
.eye { transform-box: fill-box; transform-origin: center; animation: blink 5s infinite; }
@keyframes blink { 0%, 95%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }
.speed line { animation: flicker calc(var(--leg, .4s) * 2) steps(2) infinite; }
.speed line:nth-child(2) { animation-delay: calc(var(--leg, .4s) * -.7); }
.speed line:nth-child(3) { animation-delay: calc(var(--leg, .4s) * -1.3); }
@keyframes flicker { 50% { opacity: 0; } }


@media (prefers-reduced-motion: reduce) {
  .bob, .speed line, .crew i::before { animation: none; }
  .leg { animation-duration: 1.2s; }
}