#splash-screen {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}
#splash-screen.light {
  background-color: white;
}
#splash-screen.dark {
  background-color: #0a0a0a;
}

.splash-logo-container {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 196px;
}

.splash-logo-container::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  animation-timing-function: ease-out;
  z-index: 0;
  will-change: transform, background-color, opacity, box-shadow;
  transform-origin: center;
}

.splash-logo-container > .logo {
  z-index: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  flex-shrink: 0;
  aspect-ratio: 1;
}

.logo.center {
  z-index: 2;
}

.splash-logo-container.splash-stage4 > .logo.arrow {
  animation: rotate 3s infinite;
  animation-timing-function: linear;
}

.splash-logo-container > .logo-text {
  z-index: 1;
  position: absolute;
  top: 68px;
  opacity: 0;
  transition: opacity 0.3s ease;
  will-change: opacity;
  width: 197px;
  height: 34px;
  flex-shrink: 0;
  display: none;
}

#splash-screen.light .logo-text.light {
  display: block;
}

#splash-screen.dark .logo-text.dark {
  display: block;
}

.splash-logo-container.splash-stage3 > .logo-text {
  opacity: 1;
}
.splash-logo-container.splash-stage4 > .logo-text {
  opacity: 1;
}

.splash-stage1::before {
  animation: splashExpand1 0.3s forwards;
}

.splash-stage2::before {
  animation: splashExpand2 0.5s forwards;
}

.splash-stage3::before {
  animation: splashExpand3 0.5s forwards;
}

@keyframes splashExpand1 {
  0% {
    transform: translate(-50%, -50%) scale(0);
    background-color: #fc6900;
    opacity: 0.8;
    box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.25) inset;
    filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.4));
  }
  100% {
    transform: translate(-50%, -50%) scale(1.92);
    background-color: #fc6900;
    opacity: 0.8;
    box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.25) inset;
    filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.4));
  }
}

@keyframes splashExpand2 {
  0% {
    transform: translate(-50%, -50%) scale(1.92);
    background-color: #fc6900;
    opacity: 0.8;
    box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.25) inset;
    filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.4));
  }
  100% {
    transform: translate(-50%, -50%) scale(2.67);
    box-shadow:
      0px 1px 20px 0px rgba(252, 106, 0, 0.5) inset,
      0px 0px 50px 0px rgba(252, 106, 0, 0.8);
    background-color: var(--splash-animate-bg);
  }
}

@keyframes splashExpand3 {
  0% {
    transform: translate(-50%, -50%) scale(2.67);
    box-shadow:
      0px 1px 20px 0px rgba(252, 106, 0, 0.5) inset,
      0px 0px 50px 0px rgba(252, 106, 0, 0.8);
    background-color: var(--splash-animate-bg);
  }
  100% {
    transform: translate(-50%, -50%) scale(25);
    box-shadow:
      0px 1px 20px 0px rgba(252, 106, 0, 0.5) inset,
      0px 0px 50px 0px rgba(252, 106, 0, 0.8);
    background-color: var(--splash-animate-bg);
  }
}

@keyframes rotate {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}