/* =============================================================================
   LUMIN — Footer Globe: frameless floating Earth
   A WebGL globe (globe.gl, loaded via CDN — see assets/js/contact-globe.js) now
   floats in the footer's left brand column as a quiet, atmospheric object: a
   dark transparent sphere with soft warm-white (daylight) hex countries and
   routes, behind the footer logo + brand text. No frame, no card, no border.
   Decorative (aria-hidden). Respects prefers-reduced-motion (handled in the JS).
   ========================================================================== */

/* Positioning + floating only — deliberately no border / background / shadow. */
.footer-globe-wrap {
  position: absolute;
  /* Environmental atmosphere: centered behind the LUMIN wordmark so the brand
     reads as "operating beyond borders". Large and faint; the wordmark sits in
     front (z-index). Centered keeps it symmetric and clear of horizontal scroll. */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(360px, 46vw, 600px);
  aspect-ratio: 1 / 1;
  pointer-events: none;
  opacity: 0.4;
  z-index: 0;                 /* behind the footer logo + text */
  border: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  overflow: visible;
}

/* Soft daylight halo behind the sphere — atmospheric, not a panel. */
.footer-globe-wrap::before {
  content: "";
  position: absolute; inset: 6%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 48%,
    rgba(244, 240, 231, 0.10),
    rgba(244, 240, 231, 0.04) 46%,
    transparent 70%);
  pointer-events: none;
}

.map-arc__globe { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-arc__globe canvas { display: block; margin: auto; background: transparent; }

/* Quiet daylight ring fallback if WebGL / globe.gl can't load — still frameless. */
.footer-globe-wrap[data-globe-failed]::after {
  content: ""; position: absolute; inset: 24%; border-radius: 50%;
  border: 1px solid rgba(244, 240, 231, 0.28);
  box-shadow: inset 0 0 40px -10px rgba(244, 240, 231, 0.16);
}

@media (max-width: 760px) {
  .footer-globe-wrap {
    width: clamp(300px, 88vw, 440px);
    opacity: 0.38;
  }
}