html.is-loading body {
  overflow: hidden;
}

html.is-loading body > :not(#page-loader) {
  opacity: 0;
  visibility: hidden;
}

html.is-loaded body > :not(#page-loader) {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s ease;
}

.page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  background: var(--bg, #0a0a0a);
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

html.is-loaded .page-loader {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.page-loader .loader-text {
  color: var(--fg, #e0e0e0);
  font-size: 0.9rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.page-loader::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top, rgba(233, 69, 96, 0.18), transparent 55%);
  opacity: 0.6;
  pointer-events: none;
}

body.day-mode .page-loader,
html.day-init .page-loader {
  background: var(--bg, #f0f4f8);
}

body.day-mode .page-loader::before,
html.day-init .page-loader::before {
  background: radial-gradient(circle at top, rgba(99, 179, 237, 0.25), transparent 60%);
  opacity: 0.5;
}

.page-loader .loader-text {
  color: var(--fg, #e0e0e0);
}

body.day-mode .page-loader .loader-text,
html.day-init .page-loader .loader-text {
  color: #1a202c;
}

.spinner-box {
  width: 200px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
}

.leo {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}

.blue-orbit {
  width: 140px;
  height: 140px;
  border: 1px solid #91daffa5;
  animation: spin3D 3s linear 0.2s infinite;
}

.green-orbit {
  width: 100px;
  height: 100px;
  border: 1px solid #91ffbfa5;
  animation: spin3D 2s linear 0s infinite;
}

.red-orbit {
  width: 70px;
  height: 70px;
  border: 1px solid #ffca91a5;
  animation: spin3D 1s linear 0s infinite;
}

.white-orbit {
  width: 48px;
  height: 48px;
  border: 2px solid #ffffff;
  animation: spin3D 10s linear 0s infinite;
}

body.day-mode .blue-orbit,
html.day-init .blue-orbit {
  border-color: rgba(49, 130, 206, 0.75);
}

body.day-mode .green-orbit,
html.day-init .green-orbit {
  border-color: rgba(38, 169, 99, 0.75);
}

body.day-mode .red-orbit,
html.day-init .red-orbit {
  border-color: rgba(220, 38, 38, 0.7);
}

body.day-mode .white-orbit,
html.day-init .white-orbit {
  border-color: rgba(26, 32, 44, 0.55);
}

.w1 {
  transform: rotate3D(1, 1, 1, 90deg);
}

.w2 {
  transform: rotate3D(1, 2, 0.5, 90deg);
}

.w3 {
  transform: rotate3D(0.5, 1, 2, 90deg);
}

@keyframes spin3D {
  from {
    transform: rotate3d(0.5, 0.5, 0.5, 360deg);
  }
  to {
    transform: rotate3d(0deg);
  }
}