$pop-in-speed: 0.35s;
$blink-speed: 1.5s;
$timing: cubic-bezier(.67,.15,.52,1.48);

.admin-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  max-width: 100%;
  padding: 0 50px;
  box-sizing: border-box;

  animation: $blink-speed linear $pop-in-speed infinite admin-loading-blink;

  &__perspective {
    position: relative;
    top: -20%;
    perspective: 40em;
    perspective-origin: top center;
  }

  &__container {
    position: relative;
    height: 200px;
    transform-origin: center;
    transform-style: preserve-3d;
    animation: $pop-in-speed $timing 1 admin-loading-pop-in;
    animation-fill-mode: forwards;
  }

  &__logo {
    object-fit: contain;
    height: 100px;
    max-width: 100%;
    position: relative;
    display: inline-block;
    transform-origin: center;
    transform: rotateX(90deg);
  }
}

@keyframes admin-loading-pop-in {
  0% {
    transform: rotateX(0deg) translateY(0);
  }

  100% {
    transform: rotateX(-90deg) translateY(10px);
  }
}

@keyframes admin-loading-blink {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.4;
  }

  100% {
    opacity: 1;
  }
}