/* ══════════════════════════════════════════════
   LOADING SCREEN — a cinematic intro that plays
   BEFORE the 3D scene exists. Everything here is
   canvas-2D + CSS only, deliberately cheap: the
   real renderer and textures are still spinning up
   behind it. Timing lives in js/ui.js.
   ══════════════════════════════════════════════ */

#loading{
  position:absolute;inset:0;z-index:100;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  /* faint vignette so the edges fall off into deep space */
  background:radial-gradient(ellipse at center,#05070f 0%,#010103 70%,#000 100%);
  transition:opacity 1.6s ease;
}
#loading-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#loading-content{
  position:relative;z-index:2;text-align:center;
  display:flex;flex-direction:column;align-items:center;
}

/* The orbit motif: thin rings, each with a single dot tracing it around a
   soft central sun-glow. The dot rides a rotating arm anchored at ring centre. */
#loading-orbit{width:120px;height:120px;position:relative;margin-bottom:34px}
.loading-orbit-ring{
  position:absolute;inset:0;border-radius:50%;
  border:1px solid rgba(90,150,255,0.16);
}
.loading-orbit-ring.inner{inset:26px;border-color:rgba(90,150,255,0.09)}
.loading-orbit-dot-arm{position:absolute;inset:0;animation:lspin 3.4s linear infinite}
.loading-orbit-dot-arm.inner{inset:26px;animation-duration:2.2s;animation-direction:reverse}
.loading-orbit-dot{
  position:absolute;top:-3px;left:50%;
  width:6px;height:6px;margin-left:-3px;border-radius:50%;
  background:rgba(150,205,255,1);
  box-shadow:0 0 10px rgba(120,190,255,0.9),0 0 20px rgba(90,160,255,0.5);
}
.loading-orbit-dot.small{
  width:4px;height:4px;margin-left:-2px;
  background:rgba(190,220,255,0.85);
  box-shadow:0 0 8px rgba(150,200,255,0.7);
}

/* Soft central "sun" so the orbit has something to orbit. */
#loading-core{
  position:absolute;top:50%;left:50%;width:14px;height:14px;
  transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(255,240,210,0.95),rgba(255,200,120,0.35) 55%,transparent 75%);
  box-shadow:0 0 22px rgba(255,210,140,0.55);
  animation:lpulse 3.6s ease-in-out infinite;
}
@keyframes lspin{to{transform:rotate(360deg)}}
@keyframes lpulse{
  0%,100%{opacity:0.75;transform:translate(-50%,-50%) scale(1)}
  50%{opacity:1;transform:translate(-50%,-50%) scale(1.18)}
}

#loading-title{
  color:rgba(210,228,255,0.9);font-size:11px;font-weight:300;
  letter-spacing:0.42em;text-transform:uppercase;margin-bottom:22px;
}

/* Narrative line. Cross-fades between beats (JS toggles .visible).
   Fixed min-height so the layout never jumps when the text swaps. */
#loading-narrative{
  color:rgba(185,210,250,0.85);font-size:13px;font-weight:300;
  letter-spacing:0.14em;min-height:20px;line-height:1.5;max-width:300px;
  opacity:0;transition:opacity 0.9s ease;margin-bottom:30px;
}
#loading-narrative.visible{opacity:1}

#loading-bar-wrap{
  width:150px;height:1px;background:rgba(255,255,255,0.06);
  border-radius:2px;overflow:hidden;
}
#loading-bar{
  height:100%;width:0%;border-radius:2px;
  background:linear-gradient(90deg,rgba(60,120,255,0.5),rgba(150,215,255,1));
  transition:width 0.7s cubic-bezier(0.22,0.61,0.36,1);
}

/* Graceful degradation: drop the orbiting/pulsing motion, keep calm fades. */
@media(prefers-reduced-motion:reduce){
  .loading-orbit-dot-arm,.loading-orbit-dot-arm.inner{animation:none}
  #loading-core{animation:none}
  #loading{transition:opacity 0.8s ease}
}