.rotating-container {
  position: relative;
  width: 100%;
  height: 100%;
  transform-origin: center center;
  animation: rotate-animation 5s infinite linear;
  overflow: visible;
}

@keyframes rotate-animation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.rotating-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: center center;
  /* shared “breathing” animation */
  animation-duration: 1.5s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.left {
  animation-name: moveLeft;
}

.right {
  animation-name: moveRight;
}

@keyframes moveLeft {
  0% {
    transform: translateX(-60%) rotate(0deg);
  }
  100% {
    transform: translateX(-15%) rotate(0deg);
  }
}

@keyframes moveRight {
  0% {
    transform: translateX(60%) rotate(180deg);
  }
  100% {
    transform: translateX(15%) rotate(180deg);
  }
}