/* [C Oct 20, integrator] the icons move a few cycles, then rest: his "all the icons move" [M Oct 20] within his Oct 17 F11 rule (WCAG 2.2.2: motion past 5 s needs a pause). Was: infinite */
/* The four step icons' motion (templates/_steps.html › icon), wherever the steps show: home, About, a place, Places and /how-to/.
   Oct 20, 2026, site-how build. ALL FOUR MOVE [M Oct 20, r2-how-scan: "I want all the icons to move"; the mockup's scan beam is the pattern]:
   Scan's beam sweeps the code · Pay's card lifts from the wallet · Show's band of light crosses the ticket · Take's plant rises in the house.
   A quiet loop, staggered a beat apart so the four don't move in step [C]; it starts when the icon reaches the screen (pilf.js adds .in) and
   nothing moves under reduced motion. Tokens only (static/pilf.css › :root) */
.hwic { overflow: visible; }
.hwic-beam { opacity: .55; }
.hwic-band { opacity: .22; transform: translateX(-22px); }
.hwic.in .hwic-beam { animation: hwic-beam calc(var(--dur-draw) * 1.2) var(--ease-breeze) 4 alternate; }
.hwic.in .hwic-card { animation: hwic-lift var(--dur-draw) var(--ease-breeze) var(--dur-beat) 4 alternate; }
.hwic.in .hwic-band { animation: hwic-band calc(var(--dur-draw) * 1.5) var(--ease-settle) calc(var(--dur-beat) * 2) 3; }
.hwic.in .hwic-plant { animation: hwic-lift var(--dur-draw) var(--ease-breeze) calc(var(--dur-beat) * 3) 4 alternate; }
@keyframes hwic-beam { from { transform: translateY(-13px); } to { transform: translateY(13px); } }
@keyframes hwic-lift { from { transform: translateY(0); } to { transform: translateY(-3px); } }
@keyframes hwic-band { 0% { transform: translateX(-22px); } 60%, 100% { transform: translateX(34px); } }
@media (prefers-reduced-motion: reduce) {
  .hwic * { animation: none !important; }
  .hwic-band { opacity: 0; }
}
/* the mini steps keep pilf.css's layout (.steps4 .s4 .s4-w .ic); the new icons are drawn in ink-on-ground like the old ones, in forest */
.steps4 .s4 .s4-w .hwic { color: var(--forest); }