/* ── Orbit initial loader ─────────────────────────────────────────────────
   Pure CSS/HTML loader shown before React mounts.
   Disappears automatically when ReactDOM.createRoot(...).render() replaces
   the #root contents. No JS required.
   ────────────────────────────────────────────────────────────────────────── */

#initial-loader {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  background: radial-gradient(ellipse 70% 70% at 50% 50%, #130d24 0%, #080610 55%, #020204 100%);
}

.ol-scene {
  position: relative;
  width: 280px;
  height: 280px;
}

/* Concentric orbital rings */
.ol-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  border: 1px solid;
  transform: translate(-50%, -50%);
  animation: ol-spin var(--dur, 12s) linear infinite;
}
.ol-ring:nth-child(even) { animation-direction: reverse; }

.ol-ring:nth-child(1)  { width:  30px; height:  30px; border-color: rgba(233,213,255,0.95); --dur:  3.5s; }
.ol-ring:nth-child(2)  { width:  50px; height:  50px; border-color: rgba(225,195,255,0.90); --dur:  5.0s; }
.ol-ring:nth-child(3)  { width:  72px; height:  72px; border-color: rgba(216,175,255,0.85); --dur:  6.5s; }
.ol-ring:nth-child(4)  { width:  96px; height:  96px; border-color: rgba(204,150,252,0.78); --dur:  8.0s; }
.ol-ring:nth-child(5)  { width: 120px; height: 120px; border-color: rgba(192,120,249,0.71); --dur:  9.5s; }
.ol-ring:nth-child(6)  { width: 146px; height: 146px; border-color: rgba(192, 90,240,0.63); --dur: 11.0s; }
.ol-ring:nth-child(7)  { width: 172px; height: 172px; border-color: rgba(192, 38,211,0.55); --dur: 12.5s; }
.ol-ring:nth-child(8)  { width: 198px; height: 198px; border-color: rgba(180, 28,200,0.46); --dur: 14.0s; }
.ol-ring:nth-child(9)  { width: 224px; height: 224px; border-color: rgba(162, 20,186,0.36); --dur: 15.5s; }
.ol-ring:nth-child(10) { width: 250px; height: 250px; border-color: rgba(140, 12,168,0.25); --dur: 17.0s; }
.ol-ring:nth-child(11) { width: 276px; height: 276px; border-color: rgba(116,  8,148,0.15); --dur: 18.5s; }

@keyframes ol-spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes ol-rotate {
  to { transform: rotate(360deg); }
}

/* Central globe (Earth) */
.ol-orb {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 64px;
  height: 64px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 32%, #bfdbfe, #3b82f6 35%, #1d4ed8 60%, #1e3a8a);
  box-shadow:
    inset -6px -4px 18px rgba(0,0,0,0.55),
    0 0 20px  6px rgba(59,130,246,0.45),
    0 0 48px 16px rgba(37,99,235,0.20);
}

/* Moon orbit — rotates around the outermost ring (276px) */
.ol-moon-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 276px;
  height: 276px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  animation: ol-spin 6s linear infinite;
}

/* Moon — sits at the top of the orbit path */
.ol-moon {
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f1f5f9, #cbd5e1 40%, #94a3b8 70%, #475569);
  box-shadow:
    inset -3px -2px 8px rgba(0,0,0,0.55),
    0 0  8px 3px rgba(203,213,225,0.35),
    0 0 18px 6px rgba(148,163,184,0.15);
}

/* Cycling mission text */
.ol-label {
  position: relative;
  height: 18px;
  width: 260px;
  text-align: center;
}

.ol-label span {
  position: absolute;
  inset: 0;
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.35em;
  color: rgba(196,130,252,0.85);
  text-transform: uppercase;
  opacity: 0;
  animation: ol-cycle 12s infinite;
}

.ol-label span:nth-child(1) { animation-delay:  0s; }
.ol-label span:nth-child(2) { animation-delay:  3s; }
.ol-label span:nth-child(3) { animation-delay:  6s; }
.ol-label span:nth-child(4) { animation-delay:  9s; }

@keyframes ol-cycle {
  0%   { opacity: 0; transform: translateY(5px);  }
  5%   { opacity: 1; transform: translateY(0);    }
  20%  { opacity: 1; transform: translateY(0);    }
  25%  { opacity: 0; transform: translateY(-5px); }
  100% { opacity: 0; transform: translateY(-5px); }
}