Изменение анимации на элементе Sass при наведении на родительский элемент

Question

Цель: Я пытаюсь изменить бесконечную анимацию, которая запускается на сотнях элементов при наведении на родительский элемент.

Контекст: Я сгенерировал сотни частиц, чтобы сформировать орбиту вокруг ссылки. Код, в котором я сделал это, выглядит следующим образом:

<div className="wrap">{this.createBlackhole()}</div>

  createBlackhole() {
    let blackholeArr = [];
    for (let i = 0; i < this.state.satNum; i++) {
      blackholeArr.push(<div className="c"></div>);
    }
    let blackhole = blackholeArr.map(sat => sat);
    return blackhole;
  }

Мой CSS теперь запускает анимацию, которая заставляет все частицы вращаться. То, что я хочу сделать, это изменить эту анимацию, когда я наведу указатель мыши на ссылку.

Мой CSS выглядит следующим образом:

// CSS FOR BLACKHOLE ORBIT EFFECT -- I should spend a lot more time here to reduce load and improve effects
// best in chrome
$total: 800; // total sattellites
$orb-size: 170px;
$particle-size: 1.5px;
$time: 6s;
$base-hue: 10; // change for diff colors (180 is nice)

.wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  perspective: 1000px;
  animation: rotate $time infinite linear; // rotate orb
}

@keyframes rotate {
  100% {
    transform: rotateY(0deg) rotateX(00deg) rotateZ(360deg);
  }
}

.c {
  position: absolute;
  width: $particle-size;
  height: $particle-size;
  border-radius: 50%;
  opacity: 0;
  // background: silver;
}

@for $i from 1 through $total {
  $z: (random(360) * 1deg); // random angle to rotateZ
  $y: (random(40) * 1deg); // random to rotateX
  $hue: ((40 / $total * $i) + $base-hue); // set hue

  .c:nth-child(#{$i}) {
    // grab the nth particle
    animation: orbit#{$i} $time infinite;
    animation-delay: ($i * 0.005s);
    background-color: hsla($hue, 0%, 75%, 1);
  }

  @keyframes orbit#{$i} {
    1% {
      opacity: 1; // fade in
    }
    0.1% {
      transform: rotateZ(-$z) rotateY($y) translateX($orb-size) rotateZ($z); // form orb
    }
    100% {
      transform: rotateZ(-$z) rotateY($y) translateX($orb-size) rotateZ($z); // hold orb state 30-80
      opacity: 1; // hold opacity 20-80
    }
  }
}

Я попытался вставить следующее, но это не удалось работа:

 .wrap:hover .c:nth-child(#{$i}) {
    animation: hoverorbit#{$i} $time/6 infinite;
  }
  @keyframes hoverorbit#{$i} {
    100% {
      transform: translateX($orb-size) rotateZ($z); // hold orb state 30-80
      opacity: 1; // hold opacity 20-80
    }
  }