.heroCirclesContainer {
  height: 1000px;
  width: 1000px;
  position: absolute;
  right: 0;
  transform: translate(70%, -50%) scale(2.5);
  top: 50%;
}

.heroCircles {
  width: 100%;
  height: 100%;
  opacity: 0.5;
}

.heroCircles div:before {
  border-radius: inherit;
  content: "";
  inset: 0;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  padding: 3px;
  pointer-events: none;
  position: absolute;

  background: conic-gradient(
    rgba(97, 44, 221, 0) 6.7%,
    rgba(132, 101, 219, 0.35) 20.8%,
    rgba(246, 106, 164, 0.7) 50.9%,
    #f88474 69.99%,
    rgba(238, 165, 92, 0) 70%
  );
  animation: heroCircles 20s linear infinite;
}

.heroCircles div {
  position: absolute;
  border-radius: 50%;
}

$heroCircleSize: 5;
$heroCircleBeginSize: 350px;
$heroCircleIterSize: 50px;

@for $i from 1 through $heroCircleSize {
  .heroCircles div:nth-child(#{$i}) {
    width: ($heroCircleBeginSize + $i * $heroCircleIterSize);
    height: ($heroCircleBeginSize + $i * $heroCircleIterSize);
    top: calc(50% - (($heroCircleBeginSize + $i * $heroCircleIterSize) / 2));
    left: calc(50% - (($heroCircleBeginSize + $i * $heroCircleIterSize) / 2));
    transform: rotate(-40deg * $i);
  }
}

@keyframes heroCircles {
  0% {
    transform: translateZ(0) rotate(0);
  }

  50% {
    transform: translateZ(0) rotate(0.5turn);
  }

  to {
    transform: translateZ(0) rotate(1turn);
  }
}

$logo-container-radius: 250px;
$logo-circle-size: 80px;

.heroLogos {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: center;
  width: $logo-container-radius * 2;
  height: $logo-container-radius * 2;
  animation: heroIcons 80s linear infinite;
}

.heroLogos div {
  position: absolute;
  z-index: 1;
  width: $logo-circle-size;
  height: $logo-circle-size;
  transform: translate(-50%, -50%);
  animation: heroIcons 80s linear infinite reverse;
  mask-image: radial-gradient(
    farthest-corner at 0px 0px,
    rgba(0, 0, 0, 0.2) 0%,
    #000 60%
  );
  mask-composite: exclude;
}

.heroLogos div svg {
  width: calc($logo-circle-size - 20px);
  height: calc($logo-circle-size - 20px);
  margin: 10px;
}

$elements: 12;

@for $i from 1 through $elements {
  .heroLogos div:nth-child(#{$i}) {
    left: calc(
      $logo-container-radius +
        $logo-container-radius *
        cos($i * 365deg / $elements)
    );
    top: calc(
      $logo-container-radius +
        $logo-container-radius *
        sin($i * 365deg / $elements)
    );
  }
}

@keyframes heroIcons {
  100% {
    transform: translate(-50%, -50%) rotate(-1turn);
  }
}