.logo,
.top-shape,
.bottom-shape {
  transform-box: view-box;
  transform-origin: 500px 500px;
}

.logo {
  animation: spin 3.6s linear infinite;
}

.top-shape {
  animation: topMove 3.6s ease-in-out infinite;
}

.bottom-shape {
  animation: bottomMove 3.6s ease-in-out infinite;
}

@keyframes spin {
  0%, 22% {
    transform: rotate(0deg);
  }

  78%, 100% {
    transform: rotate(360deg);
  }
}

@keyframes topMove {
  0%, 100% {
    transform: translate(0, 0);
  }

  22%, 78% {
    transform: translate(-100px, 12px);
  }
}

@keyframes bottomMove {
  0%, 100% {
    transform: translate(0, 0);
  }

  22%, 78% {
    transform: translate(100px, -12px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .logo,
  .top-shape,
  .bottom-shape {
    animation: none;
  }
}