.shadow-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 1;
}

.shadow-orb {
  position: absolute;
  border-radius: 999px;
  filter: blur(2px);
  opacity: 0.34;
  background: radial-gradient(circle, rgba(150, 170, 255, 0.8), rgba(95, 118, 205, 0.15));
  transform: translate3d(0, 0, 0);
  will-change: transform;
  animation: drift 14s linear infinite alternate;
}

.orb-1 {
  width: 300px;
  height: 180px;
  left: -3%;
  top: 15%;
  animation-duration: 13s;
}

.orb-2 {
  width: 260px;
  height: 160px;
  right: 4%;
  top: 28%;
  animation-duration: 16s;
  animation-delay: 0.6s;
}

.orb-3 {
  width: 380px;
  height: 210px;
  left: 32%;
  top: 62%;
  animation-duration: 18s;
  animation-delay: 0.3s;
}

.orb-4 {
  width: 200px;
  height: 130px;
  left: 58%;
  top: 14%;
  animation-duration: 15s;
}

.orb-5 {
  width: 260px;
  height: 150px;
  right: 20%;
  bottom: 8%;
  animation-duration: 17s;
  animation-delay: 1.2s;
}

.splash-screen.is-leaving {
  animation: fadeOutScreen 0.95s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

.onboarding-screen.is-entering,
.creator-screen.is-entering,
.changelog-screen.is-entering {
  animation: riseIn 0.7s cubic-bezier(0.18, 0.9, 0.22, 1) forwards;
}

.splash-progress-fill {
  transition: width 0.22s cubic-bezier(0.22, 0.9, 0.36, 1);
}

@keyframes drift {
  0% {
    transform: translate3d(-10px, -6px, 0);
  }
  100% {
    transform: translate3d(10px, 8px, 0);
  }
}

@keyframes fadeOutScreen {
  0% {
    opacity: 1;
    filter: blur(0);
  }
  100% {
    opacity: 0;
    filter: blur(6px);
  }
}

@keyframes riseIn {
  0% {
    opacity: 0;
    transform: translateY(12px) scale(0.996);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes splashShimmer {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}