.splash-page-container {
  width: 100%;
  height: calc(100 * var(--vh, 1vh));
  color: white;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  /* background-color: black; */
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background: linear-gradient(
    113.67deg,
    #152a22 3.4%,
    #0b1e21 68.19%,
    #e7a101 132.98%
  );

  /* background-image: url("../assets/bg-gradient.png"); */

  opacity: 0;
  transform: scale(1.8);
  animation: splashFade 5s ease-in-out forwards;
}

.splash-page-container img {
  height: 22%;
  object-fit: contain;
  opacity: 0;
  animation: logoFade 5s ease-in-out forwards 0.5s;
}

@keyframes splashFade {
  0% {
    opacity: 0;
    transform: scale(1.05);
  }
  30% {
    opacity: 1;
    transform: scale(1);
  }
  80% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}
@keyframes logoFade {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  40% {
    opacity: 1;
    transform: scale(1.2); /* slight overshoot */
  }
  70% {
    transform: scale(1); /* settle directly to normal size */
  }
  100% {
    transform: scale(1); /* no bounce */
    opacity: 1;
  }
}

.splash-logo {
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: logoFade 2s ease-out forwards;
}