/* SPLASH SCREEN & ANIMATIONS */

#splash {
  position: fixed;
  inset: 0;
  background: rgb(246, 247, 248);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  animation: hideSplash 0.7s forwards 1.5s;
}

#splash_logo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 274px;
  height: 335px;
  transform: translate(-50%, -50%);
  animation: logoMove 0.8s forwards 0.8s ease-in-out;
}

.auth_opacity {
  opacity: 0;
  animation: fadeIn 0.5s forwards 1.1s;
}

body.no-animation #splash {
  display: none !important;
  animation: none !important;
}

body.no-animation .auth_opacity {
  animation: none !important;
  opacity: 1 !important;
}

/* KEYFRAMES */

@keyframes logoMove {
  0% {
    width: 274px;
    height: 335px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  100% {
    width: 100px;
    height: 120px;
    top: 80px;
    left: max(77px, calc(50vw - 720px + 77px));
    transform: translate(0, 0);
  }
}

@keyframes hideSplash {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

/* MOBILE */

@media (max-width: 700px) {
  #splash {
    background-color: #2a3647;
  }

  #splash_logo {
    content: url("../assets/img/logo_version_2.svg");
    animation: logoMoveMobile 0.8s forwards 0.8s ease-in-out;
    width: 100px;
    height: 122px;
  }
}

@keyframes logoMoveMobile {
  0% {
    width: 100px;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  100% {
    width: 64px;
    height: auto;
    top: 37px;
    left: 20px;
    transform: translate(0, 0);
  }
}