#splash {
  position: fixed; inset: 0; z-index: 900;
  background: var(--bg-main);
  display: flex; align-items: center; justify-content: center;
}

#splash-logo {
  width: min(60vmin, 320px);
  height: auto;
  display: block;
  animation: splashSpin 3s cubic-bezier(.45, 0, .2, 1) forwards;
}

@keyframes splashSpin {
  0% {
    opacity: 0;
    transform: perspective(900px) rotateY(0deg) scale(.5);
  }
  12% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: perspective(900px) rotateY(720deg) scale(1.15);
  }
}

#splash.fade-out {
  animation: splashFade .55s var(--ease) forwards;
}

@keyframes splashFade {
  to { opacity: 0; pointer-events: none; }
}