/* Wire forming: feed, dwell, pin wrap, hold, unloaded reset. */
@media(prefers-reduced-motion:no-preference){
.process-illustration--wire-forming [class]{transform-box:view-box}
.process-illustration--wire-forming .pi-wire-reel{transform-origin:47px 105px}
.process-illustration--wire-forming .pi-wire-upper-roller{transform-origin:126px 80px}
.process-illustration--wire-forming .pi-wire-lower-roller{transform-origin:126px 102px}
.process-illustration--wire-forming .pi-wire-forming-arm,
.process-illustration--wire-forming .pi-wire-free-angle{transform-origin:186px 105px}
.process-illustration--wire-forming .pi-wire-free-length{transform-origin:186px 91px}
  .process-illustration--wire-forming .pi-wire-reel{animation:pi-form-wire-payoff 9.6s linear infinite}
  .process-illustration--wire-forming .pi-wire-upper-roller{animation:pi-form-wire-roller-upper 9.6s linear infinite}
  .process-illustration--wire-forming .pi-wire-lower-roller{animation:pi-form-wire-roller-lower 9.6s linear infinite}
  .process-illustration--wire-forming .pi-wire-forming-arm,
  .process-illustration--wire-forming .pi-wire-free-angle{animation:pi-form-wire-angle 9.6s linear infinite}
  .process-illustration--wire-forming .pi-wire-free-length{animation:pi-form-wire-length 9.6s linear infinite}
  .process-illustration--wire-forming .pi-wire-bend-arc{animation:pi-form-wire-arc 9.6s linear infinite}
  .process-illustration--wire-forming .pi-wire-workpiece{animation:pi-form-wire-change 9.6s linear infinite}
  .process-illustration.process-illustration--wire-forming [class]{animation-play-state:paused}
  .is-animating .process-illustration.process-illustration--wire-forming [class],
  .process-illustration.process-illustration--wire-forming.is-animating [class]{animation-play-state:running}
}
/* Feed ends at 38%; the bending pin does not begin its sweep until 44%.
   Arc length grows by R*angle and is subtracted from the free wire length. */
@keyframes pi-form-wire-payoff{
  0%,22%{transform:rotate(0deg)}
  38%,100%{transform:rotate(120deg)}
}
@keyframes pi-form-wire-roller-upper{
  0%,22%{transform:rotate(0deg)}
  38%,100%{transform:rotate(-360deg)}
}
@keyframes pi-form-wire-roller-lower{
  0%,22%{transform:rotate(0deg)}
  38%,100%{transform:rotate(360deg)}
}
@keyframes pi-form-wire-angle{
  0%,16%{transform:rotate(90deg)}
  22%,44%{transform:rotate(0deg)}
  68%,100%{transform:rotate(90deg)}
}
@keyframes pi-form-wire-length{
  0%,16%{transform:scaleX(.65)}
  22%{transform:scaleX(0)}
  38%,44%{transform:scaleX(1)}
  68%,100%{transform:scaleX(.65)}
}
@keyframes pi-form-wire-arc{
  0%,16%{stroke-dashoffset:0}
  22%,44%{stroke-dashoffset:21.9912}
  68%,100%{stroke-dashoffset:0}
}
@keyframes pi-form-wire-change{
  0%,12%,28%,100%{opacity:1}
  16%,22%{opacity:0}
}

.process-illustration [class]{animation-play-state:paused}
.is-animating .process-illustration [class],.process-illustration.is-animating [class]{animation-play-state:running}
@media(prefers-reduced-motion:reduce){.process-illustration *,.is-animating .process-illustration *,.process-illustration.is-animating *{animation:none!important;animation-play-state:paused!important}}