#init-loading {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  overflow: hidden;
  position: relative;
  /* horizontal movement distance of the car animation, left, right */
  --oobl: calc(-1 * max(80vw, 30em));
  --oobr: calc(max(80vw, 30em));
}
@media (prefers-color-scheme: dark) {
  #init-loading {
    background-color: #1c1b22;
    color: white;
  }
}

#init-loading { h1, .logo { z-index: 2; } }
.logo {
  min-height: 140px;
  height: 10vw;
  opacity: 0;
}
.blob {
  position: absolute;
  opacity: 0;
}
.blob1 {
  top: 8vh;
  left: -70px;
  transform: scale(0.9);
  animation: fadein 0.5s ease 1.2s forwards;
}
.blob2 {
  bottom: 14vh;
  right: 20vw;
  transform: scale(1.3);
  animation: fadein 0.2s ease .7s forwards;
}
.blob3 {
  top: 25vh;
  right: -60px;
  transform: rotate(120deg);
  animation: fadein 0.2s ease-out .9s forwards;
}

.anim-car {
  animation:
    fadein 0.8s ease-out forwards,
    car 5s ease 1.8s infinite;
}

@keyframes fadein {
  0% {
    opacity: 0;
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes car {
  0% {
    transform: translateX(0);
    transform-origin: bottom left;
    filter: blur(0);
  }
  27% {
    transform: translateX(0);
  }
  37% {
    transform: rotate(-15deg) scaleX(0.8);
    transform-origin: bottom left;
  }
  40% {
    transform: rotate(0deg) scaleX(1.2);
    transform-origin: bottom center;
    filter: blur(0);
  }
  50% {
    transform: translateX(var(--oobr));
    transform-origin: bottom right;
    filter: blur(4px);
  }
  50.1% {
    transform: translate(var(--oobr), -100vh);
  }
  50.2% {
    transform: translate(var(--oobl), -100vh);
  }

  50.3% {
    transform: translateX(var(--oobl)) scaleX(1.2);
    filter: blur(4px);
  }
  70% {
    transform: translateX(0) rotate(15deg) scaleX(0.8);
    transform-origin: bottom right;
    filter: blur(0);
  }
  80% {
    transform: translateX(0);
    transform-origin: bottom right;
  }
}