.fitness-visual .quickfit-visual {
  display: block;
  flex: 0 1 390px;
  width: 100%;
  max-width: 390px;
  height: auto;
  max-height: 230px;
  overflow: visible;
  pointer-events: none;
}

.quickfit-visual .quickfit-phase,
.quickfit-visual .quickfit-session {
  fill: #aebfac;
  font: 400 14px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: .1px;
}
.quickfit-visual .quickfit-exercise {
  fill: #e2ebdd;
  font: 500 20px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: -.55px;
}
.quickfit-visual .quickfit-session { fill: #8ea58d; }

/* Local joint coordinates preserve the limb length throughout the movement. */
.quickfit-visual .quickfit-arm-left,
.quickfit-visual .quickfit-arm-right,
.quickfit-visual .quickfit-leg-left,
.quickfit-visual .quickfit-leg-right { transform-origin: 0 0; }
.quickfit-visual .quickfit-body { transform: translateY(6px); animation: quickfit-body 2.6s ease-in-out infinite; }
.quickfit-visual .quickfit-arm-left { transform: rotate(140deg); animation: quickfit-arm-left 2.6s ease-in-out infinite; }
.quickfit-visual .quickfit-arm-right { transform: rotate(-140deg); animation: quickfit-arm-right 2.6s ease-in-out infinite; }
.quickfit-visual .quickfit-leg-left { transform: rotate(27deg); animation: quickfit-leg-left 2.6s ease-in-out infinite; }
.quickfit-visual .quickfit-leg-right { transform: rotate(-27deg); animation: quickfit-leg-right 2.6s ease-in-out infinite; }
.quickfit-visual .quickfit-ground-shadow { transform-box: fill-box; transform-origin: center; animation: quickfit-shadow 2.6s ease-in-out infinite; }

@keyframes quickfit-body {
  0%, 100% { transform: translateY(0); }
  23%, 77% { transform: translateY(-5px); }
  47%, 53% { transform: translateY(6px); }
}
@keyframes quickfit-arm-left {
  0%, 100% { transform: rotate(18deg); }
  47%, 53% { transform: rotate(140deg); }
}
@keyframes quickfit-arm-right {
  0%, 100% { transform: rotate(-18deg); }
  47%, 53% { transform: rotate(-140deg); }
}
@keyframes quickfit-leg-left {
  0%, 100% { transform: rotate(6deg); }
  47%, 53% { transform: rotate(27deg); }
}
@keyframes quickfit-leg-right {
  0%, 100% { transform: rotate(-6deg); }
  47%, 53% { transform: rotate(-27deg); }
}
@keyframes quickfit-shadow {
  0%, 47%, 53%, 100% { opacity: .45; transform: scaleX(1); }
  23%, 77% { opacity: .25; transform: scaleX(.78); }
}

.project-fitness:not(.in-view) .quickfit-visual * { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .quickfit-visual .quickfit-body,
  .quickfit-visual .quickfit-arm-left,
  .quickfit-visual .quickfit-arm-right,
  .quickfit-visual .quickfit-leg-left,
  .quickfit-visual .quickfit-leg-right,
  .quickfit-visual .quickfit-ground-shadow { animation: none !important; }
}