/* the flywheel, developed — three levels, each on its own clock */

.e2-spin{transform-box:view-box;animation-name:e2-spin;animation-timing-function:linear;
  animation-iteration-count:infinite}
.e2-rev{animation-direction:reverse}
@keyframes e2-spin{to{transform:rotate(360deg)}}

.e2-breath{fill:none;stroke:#5B21B6;stroke-width:6;opacity:.26;
  animation-name:e2-breathe;animation-timing-function:ease-in-out;
  animation-iteration-count:infinite;animation-duration:2.5s}
@keyframes e2-breathe{0%,100%{opacity:.26}50%{opacity:.05}}

@media (prefers-reduced-motion:reduce){.e2-spin,.e2-breath{animation:none}}