/* ============================================================
   EARTH — rotating wireframe globe (background canvas)
============================================================ */
.earth-stage{
  position:fixed;inset:0;z-index:0;pointer-events:auto;overflow:hidden;
  opacity:0;
  transform:scale(.96);
  transition:opacity 1.8s cubic-bezier(.22,1,.36,1), transform 2.4s cubic-bezier(.22,1,.36,1);
  background:
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(129,140,248,.08), transparent 65%),
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(197,240,43,.05), transparent 70%);
}
.earth-stage.is-ready{opacity:1;transform:scale(1)}
#earth{position:absolute;inset:0;width:100%;height:100%;display:block}

/* starfield twinkle */
.stars{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,.55), transparent 50%),
    radial-gradient(1px 1px at 28% 72%, rgba(197,240,43,.35), transparent 50%),
    radial-gradient(1px 1px at 47% 11%, rgba(255,255,255,.4), transparent 50%),
    radial-gradient(1.5px 1.5px at 63% 44%, rgba(255,255,255,.55), transparent 50%),
    radial-gradient(1px 1px at 78% 80%, rgba(129,140,248,.4), transparent 50%),
    radial-gradient(1px 1px at 88% 22%, rgba(255,255,255,.5), transparent 50%),
    radial-gradient(1px 1px at 7% 88%, rgba(255,255,255,.4), transparent 50%),
    radial-gradient(1px 1px at 38% 38%, rgba(103,232,249,.35), transparent 50%),
    radial-gradient(1px 1px at 92% 62%, rgba(255,255,255,.45), transparent 50%);
  animation:starTwinkle 8s ease-in-out infinite;
  opacity:.9;
}
@keyframes starTwinkle{
  0%,100%{opacity:.85}
  50%{opacity:.55}
}

/* drifting lat/lon graticule (subtle, decorative SVG layer) */
.cosmos-grid{
  position:absolute;inset:0;pointer-events:none;opacity:.15;
  background-image:
    linear-gradient(transparent 49.7%, rgba(255,255,255,.35) 49.85%, transparent 50.15%),
    linear-gradient(90deg, transparent 49.7%, rgba(255,255,255,.18) 49.85%, transparent 50.15%);
  background-size:100% 200px, 200px 100%;
  mask-image:radial-gradient(ellipse at center, black 30%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse at center, black 30%, transparent 75%);
}

/* corner HUD readouts (telemetry feel) — single row */
.tele{
  position:absolute;z-index:6;pointer-events:none;
  font-family:var(--f-mono);font-size:.54rem;letter-spacing:.12em;
  color:var(--t-mute);text-transform:uppercase;
  display:flex;flex-direction:row;align-items:center;gap:1.1rem;flex-wrap:nowrap;
  white-space:nowrap;
  text-shadow:0 1px 6px rgba(0,0,0,.6);
}
.tele > span{display:inline-flex;align-items:center;gap:.35rem;position:relative}
.tele > span + span::before{
  content:"";
  position:absolute;left:-.65rem;top:50%;transform:translateY(-50%);
  width:1px;height:.7rem;background:var(--line-2);
}
.tele.tl{top:calc(var(--header-h) + .8rem);left:1rem;max-width:calc(60vw - 2rem)}
.tele.tr{top:calc(var(--header-h) + .8rem);right:1rem;justify-content:flex-end;max-width:calc(40vw - 2rem)}
.tele .v{color:var(--lime);font-weight:600;letter-spacing:.06em}
.tele .v.ig{color:var(--indigo)}
.tele .v.cy{color:var(--cyan)}
@media(max-width:980px){
  .tele{font-size:.5rem;gap:.85rem}
  .tele.tl{max-width:calc(65vw - 2rem)}
  .tele.tr{max-width:calc(35vw - 2rem)}
}
@media(max-width:780px){.tele{display:none}}

/* drag hint */
.drag-hint{
  position:absolute;left:50%;bottom:calc(var(--hud-h) + 1rem);
  transform:translateX(-50%);z-index:6;pointer-events:none;
  font-family:var(--f-mono);font-size:.55rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--t-mute);
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.3rem .65rem;
  background:rgba(8,9,12,.55);
  border:1px solid var(--line);
  border-radius:99px;backdrop-filter:blur(6px);
  opacity:0;transition:opacity .6s var(--e);
}
.drag-hint.show{opacity:.85}
.drag-hint .glyph{display:inline-block;width:.9rem;height:.9rem;border:1px solid var(--lime);border-radius:50%;position:relative}
.drag-hint .glyph::before{content:"";position:absolute;left:50%;top:50%;width:60%;height:1px;background:var(--lime);transform:translate(-50%,-50%)}
.drag-hint .glyph::after{content:"";position:absolute;left:50%;top:50%;width:1px;height:60%;background:var(--lime);transform:translate(-50%,-50%)}

@keyframes pulse{50%{opacity:.55}}