$overlay-background-color: rgba(21, 21, 21, 0.8);

.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: $overlay-background-color;
  z-index: 10001;

  .blob {
    width: 2rem;
    height: 2rem;
    background: $intense-orange;
    position: absolute;
    left: calc(50% - 1rem);
    top: calc(50% - 1rem);
  }

  .blob-0 {
    animation: animate-to-0 1.5s infinite;
  }

  .blob-1 {
    animation: animate-to-1 1.5s infinite;
  }

  .blob-2 {
    animation: animate-to-2 1.5s infinite;
  }

  .blob-3 {
    animation: animate-to-3 1.5s infinite;
  }

  .blob-4 {
    animation: animate-to-4 1.5s infinite;
  }

  .blob-5 {
    animation: animate-to-5 1.5s infinite;
  }
}

@keyframes animate-to-0 {
  25% {
    transform: translateX(-1.5rem) scale(0.75);
  }

  50% {
    transform: translateX(-4.5rem) scale(0.6);
  }

  75% {
    transform: translateX(-7.5rem) scale(0.5);
  }

  95% {
    transform: translateX(0) scale(1);
  }
}

@keyframes animate-to-1 {
  25% {
    transform: translateX(-1.5rem) scale(0.75);
  }

  50%, 75% {
    transform: translateX(-4.5rem) scale(0.6);
  }

  95% {
    transform: translateX(0) scale(1);
  }
}

@keyframes animate-to-2 {
  25%, 75% {
    transform: translateX(-1.5rem) scale(0.75);
  }

  95% {
    transform: translateX(0) scale(1);
  }
}

@keyframes animate-to-3 {
  25%, 75% {
    transform: translateX(1.5rem) scale(0.75);
  }

  95% {
    transform: translateX(0) scale(1);
  }
}

@keyframes animate-to-4 {
  25% {
    transform: translateX(1.5rem) scale(0.75);
  }

  50%, 75% {
    transform: translateX(4.5rem) scale(0.6);
  }

  95% {
    transform: translateX(0) scale(1);
  }
}

@keyframes animate-to-5 {
  25% {
    transform: translateX(1.5rem) scale(0.75);
  }

  50% {
    transform: translateX(4.5rem) scale(0.6);
  }

  75% {
    transform: translateX(7.5rem) scale(0.5);
  }

  95% {
    transform: translateX(0) scale(1);
  }
}
