html,
body,
#root {
  min-height: 100%;
  margin: 0;
  background-color: var(--theme-sidebar-bg, #0052CC);
}

html:has(#splash-bootstrap),
body:has(#splash-bootstrap) {
  overflow: hidden;
}

#root {
  min-height: 100vh;
}

.splash-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: var(--theme-sidebar-bg, #0052CC);
}

.splash-backdrop::before {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.1), transparent);
  content: '';
  pointer-events: none;
}

.splash-backdrop__stars {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.splash-backdrop__vignette {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    to top,
    var(--theme-sidebar-bg, #0052CC),
    transparent 55%,
    color-mix(in srgb, var(--theme-sidebar-bg, #0052CC) 70%, transparent)
  );
  pointer-events: none;
}

.splash-model-entrance {
  animation: splash-model-entrance 1.8s cubic-bezier(0.2, 0.75, 0.25, 1) both;
}

@keyframes splash-model-entrance {
  from {
    opacity: 0;
    filter: blur(9px);
    transform: scale(0.78);
  }

  70% {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
  }

  to {
    opacity: 0.9;
    filter: blur(0);
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .splash-model-entrance {
    animation-duration: 1ms;
  }
}

#splash-bootstrap {
  z-index: 50;
  transition: opacity 800ms ease-in-out;
}

#splash-bootstrap.splash-bootstrap--active {
  opacity: 1;
}

#splash-bootstrap.splash-bootstrap--handoff {
  opacity: 0;
  pointer-events: none;
}

.splash-over-bootstrap {
  background-color: transparent;
}

.splash-over-bootstrap::before {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  #splash-bootstrap {
    transition-duration: 1ms;
  }
}