.welcome-loader {
  width: 120px;
  height: 120px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100;
}

.welcome-loader:before,
.welcome-loader:after {
  content: "";
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  mix-blend-mode: multiply;
  background: #000;
  /* Default background for visibility */
  animation: none;
  /* Start with no animation */
  transform-origin: center;
}

.welcome-loader:before {
  background: #da4062;
  animation: combined1 8s infinite ease-in-out paused;
  /* Initially paused */
  transform: rotate(0deg) translate(40px) rotate(0deg);
  /* Start "apart" */
}

.welcome-loader:after {
  background: #55d6be;
  animation: combined2 8s infinite ease-in-out paused;
  /* Initially paused */
  transform: rotate(180deg) translate(40px) rotate(-180deg);
  /* Start "apart" */
}

/* Hover starts the animation */
.welcome-loader:hover:before,
.welcome-loader:hover:after {
  animation-play-state: running;
  /* Start animation on hover */
}

@keyframes combined1 {
  0%,
  100% {
    transform: rotate(0deg) translate(40px) rotate(0deg);
  }

  25% {
    transform: rotate(90deg) translate(25px) rotate(-90deg);
  }

  50% {
    transform: rotate(180deg) translate(5px) rotate(-180deg);
  }

  75% {
    transform: rotate(270deg) translate(25px) rotate(-270deg);
  }
}

@keyframes combined2 {
  0%,
  100% {
    transform: rotate(180deg) translate(40px) rotate(-180deg);
  }

  25% {
    transform: rotate(270deg) translate(25px) rotate(-270deg);
  }

  50% {
    transform: rotate(360deg) translate(5px) rotate(-360deg);
  }

  75% {
    transform: rotate(450deg) translate(25px) rotate(-450deg);
  }
}