.loader-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -10rem -5rem;

  width: 10rem;
  height: 10rem;

  z-index: 102;
}

.loader-bg {
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}

.loader-primary {
  background-color: var(--background-dark);
  z-index: 101;
}

.loader-secondary {
  background-color: var(--cta);
  z-index: 100;
}

#loader.loaded .loader-logo {
  animation: logoFadeAway 300ms var(--easeOutQuad) forwards;
}

#loader.loaded .loader-primary {
  animation: translateUp 300ms 200ms var(--easeOutQuad) forwards;
}

#loader.loaded .loader-secondary {
  animation: translateUp 400ms 300ms var(--easeOutQuad) forwards;
}

@keyframes logoFadeAway {
  from {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  25% {
    transform: translateY(-10px) scale(1.02);
    opacity: 1;
  }
  to {
    transform: translateY(100px) scale(0.9);
    opacity: 0;
  }
}

@keyframes translateUp {
  from {
    transform: scaleY(1) translateY(0);
  }
  to {
    transform: translateY(-100%);
  }
}

@keyframes spinPause {
  from {
    transform: translateY(0) rotate(360deg);
  }
  30% {
    transform: translateY(0) rotate(-30deg);
  }
}