/*
 * HeliBhumi loading screen (see boot-loader.js). Plain CSS - it shows before
 * the app's own CSS has loaded.
 *
 * Kept deliberately minimal: a slowly turning globe, the wordmark, a thin
 * progress line and one status line. Everything that moves is a transform /
 * opacity animation, so it runs on the compositor and stays smooth while the
 * app's code loading keeps the main thread busy.
 */

#boot-loader {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: none;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 45%, #0b1626 0%, #05090f 60%, #020407 100%);
  font-family: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  color: #e8edf3;
  opacity: 1;
  transition: opacity 0.5s ease;
  user-select: none;
}

#boot-loader.bl-visible { display: flex; }
#boot-loader.bl-leaving { opacity: 0; pointer-events: none; }

/* no page scrollbar showing through while it's up */
html.bl-loading, html.bl-loading body { overflow: hidden !important; }

#boot-loader .bl-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 16px;
  transition: transform 0.7s cubic-bezier(0.5, 0, 0.75, 0);
}

/* map ready: ease slightly towards the globe while fading out */
#boot-loader.bl-leaving .bl-center { transform: scale(1.12); }

/* ---------------------------------------------------------------- globe */
#boot-loader .bl-globe {
  --size: 176px;
  position: relative;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  overflow: hidden;
  background: #0f2c52;
  box-shadow:
    0 0 0 1px rgba(140, 190, 255, 0.12),
    0 0 36px rgba(70, 140, 230, 0.32),
    0 0 110px rgba(40, 100, 200, 0.16);
  cursor: grab;
  touch-action: none;
  transform: translateZ(0); /* own layer, clipped to the circle */
}

#boot-loader .bl-globe.bl-dragging { cursor: grabbing; }

/* drag offset (set by boot-loader.js) */
#boot-loader .bl-spin {
  position: absolute;
  inset: 0;
  will-change: transform;
}

/* 3 texture widths wide (texture is 2:1, so one width = 2 x globe size);
   sliding it by one width loops seamlessly */
#boot-loader .bl-surface,
#boot-loader .bl-clouds {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--size) * 6);
  height: 100%;
  background-repeat: repeat-x;
  background-size: auto 100%;
  will-change: transform;
  animation: bl-spin 40s linear infinite;
}

#boot-loader .bl-surface { background-image: url('/textures/planets/earth_atmos_2048.jpg'); }

#boot-loader .bl-clouds {
  background-image: url('/textures/planets/earth_clouds_1024.png');
  opacity: 0.4;
  animation-duration: 34s;
}

/* soft sunlit side, night side and rim - static, on top */
#boot-loader .bl-shade {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.16), transparent 42%),
    radial-gradient(circle at 66% 64%, transparent 48%, rgba(2, 6, 14, 0.55) 84%);
  box-shadow:
    inset -18px -12px 36px rgba(0, 0, 0, 0.45),
    inset 6px 4px 18px rgba(170, 210, 255, 0.22);
  pointer-events: none;
}

/* ----------------------------------------------------------------- text */
#boot-loader .bl-brand {
  margin-top: 40px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 7px;
  color: rgba(232, 237, 243, 0.92);
}

/* thin line; scaled (not resized) so updates don't trigger layout */
#boot-loader .bl-bar {
  width: 168px;
  height: 2px;
  margin-top: 18px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

#boot-loader .bl-bar-fill {
  width: 100%;
  height: 100%;
  background: #6aa9ff;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.6s ease-out;
  will-change: transform;
}

#boot-loader .bl-stage {
  margin-top: 12px;
  min-height: 16px;
  font-size: 12px;
  color: rgba(232, 237, 243, 0.45);
  transition: opacity 0.3s ease;
}

@keyframes bl-spin { from { transform: translateX(0); } to { transform: translateX(calc(-100% / 3)); } }

@media (max-width: 480px) {
  #boot-loader .bl-globe { --size: 140px; }
}

@media (prefers-reduced-motion: reduce) {
  #boot-loader .bl-surface,
  #boot-loader .bl-clouds { animation: none; }
  #boot-loader .bl-center { transition: none; }
}