/* =========================================================
   TheSpaceLaunches · 3D Globe page
   Page-scoped styles, all selectors namespaced under .globe-page
   so they never collide with base/components/nav.
   ========================================================= */

.globe-page {
 background: var(--bg-0, #050816);
 min-height: 100vh;
}

.globe-main {
 width: 100%;
 max-width: 1440px;
 margin: 0 auto;
 padding: 0 24px 64px;
}

/* ---------- Hero ---------- */
.globe-hero {
 padding: 56px 0 28px;
}

.globe-hero__title {
 font-family: var(--font-display, "Orbitron", sans-serif);
 font-size: 38px;
 font-weight: 700;
 letter-spacing: 0.02em;
 color: var(--text-0, #f0f4ff);
 margin: 0 0 12px;
 background: linear-gradient(135deg, #4cc9ff 0%, #ff8a3d 100%);
 -webkit-background-clip: text;
 background-clip: text;
 -webkit-text-fill-color: transparent;
}

.globe-hero__sub {
 font-size: 16px;
 line-height: 1.6;
 color: var(--text-1, #b8c4dd);
 margin: 0;
 max-width: 720px;
}

/* ---------- 3D Stage ---------- */
.globe-stage {
 position: relative;
 width: 100%;
 height: 720px;
 margin: 0 0 32px;
 background: radial-gradient(ellipse at center, #0a1232 0%, #050816 80%);
 border-radius: 12px;
 overflow: hidden;
 border: 1px solid rgba(76, 201, 255, 0.25);
 box-shadow: 0 0 60px rgba(76, 201, 255, 0.08), inset 0 0 80px rgba(0, 0, 0, 0.4);
}

#globe-container {
 position: absolute;
 inset: 0;
 width: 100%;
 height: 100%;
}

.globe-loading {
 position: absolute;
 inset: 0;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 gap: 16px;
 color: var(--text-1, #b8c4dd);
 font-family: var(--font-display, "Orbitron", sans-serif);
 pointer-events: none;
 z-index: 2;
 transition: opacity 0.3s ease;
}

.globe-loading.is-hidden {
 opacity: 0;
}

.globe-loading__spinner {
 width: 48px;
 height: 48px;
 border: 3px solid rgba(76, 201, 255, 0.15);
 border-top-color: #4cc9ff;
 border-radius: 50%;
 animation: globe-spin 1s linear infinite;
}

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

.globe-loading__text {
 font-size: 13px;
 letter-spacing: 0.08em;
 text-transform: uppercase;
}

.globe-error {
 padding: 40px;
 text-align: center;
 color: #ff8a3d;
 font-family: var(--font-display, "Orbitron", sans-serif);
 font-size: 14px;
 line-height: 1.7;
 max-width: 480px;
}

/* ---------- Stats ---------- */
.globe-stats {
 display: flex;
 justify-content: center;
 gap: 48px;
 padding: 24px 0;
 flex-wrap: wrap;
}

.globe-stats__item {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 6px;
}

.globe-stats__num {
 font-family: var(--font-display, "Orbitron", sans-serif);
 font-size: 32px;
 font-weight: 700;
 color: #4cc9ff;
 text-shadow: 0 0 12px rgba(76, 201, 255, 0.4);
}

.globe-stats__label {
 font-size: 12px;
 letter-spacing: 0.1em;
 text-transform: uppercase;
 color: var(--text-2, #7a87a5);
}

/* ---------- Legend ---------- */
.globe-legend {
 display: flex;
 justify-content: center;
 align-items: center;
 gap: 32px;
 padding: 20px 0 0;
 flex-wrap: wrap;
 color: var(--text-1, #b8c4dd);
 font-size: 13px;
}

.globe-legend__item {
 display: flex;
 align-items: center;
 gap: 8px;
}

.globe-legend__dot {
 width: 10px;
 height: 10px;
 border-radius: 50%;
 background: #4cc9ff;
 box-shadow: 0 0 10px rgba(76, 201, 255, 0.8);
}

.globe-legend__hint {
 color: var(--text-2, #7a87a5);
 font-style: italic;
}

/* ---------- Globe Tooltip (rendered by globe.js into globe.gl pointLabel) ---------- */
.globe-tooltip {
 font-family: var(--font-body, "Space Grotesk", sans-serif);
 background: rgba(10, 18, 50, 0.95);
 border: 1px solid rgba(76, 201, 255, 0.4);
 border-radius: 8px;
 padding: 10px 14px;
 color: var(--text-0, #f0f4ff);
 min-width: 180px;
 backdrop-filter: blur(6px);
}

.globe-tooltip__name {
 font-family: var(--font-display, "Orbitron", sans-serif);
 font-size: 13px;
 font-weight: 600;
 color: #4cc9ff;
 margin-bottom: 4px;
}

.globe-tooltip__meta {
 font-size: 11px;
 color: var(--text-1, #b8c4dd);
}

/* ---------- Responsive note ---------- */
/* This page is PC-only by spec (width=1280). No mobile breakpoints added. */

/* =========================================================
   Phase 3 (P2) — globe stage mobile fallback
   Per mobile plan §2.7. The 720 px globe stage is the
   dominant paint cost on the page; on phones we cap it at
   45vh and tighten the legend / tooltip so the stage
   keeps the visual. Desktop rules (1-201) are untouched.
   ========================================================= */

@media (max-width: 767px) {
  .globe-page { min-height: auto; }
  .globe-main { padding: 0 16px 32px; }
  .globe-hero { padding: 24px 0 12px; }
  .globe-hero__title { font-size: 24px; }
  .globe-hero__sub { font-size: 14px; }

  /* Cap stage at 45vh so a single-screen 360x640 phone
     still shows the hero above the fold and the legend
     below it. WebGL 720 px on phones is also wasteful. */
  .globe-stage { height: 45vh; min-height: 280px; }
  .globe-loading__spinner { width: 36px; height: 36px; }

  .globe-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .globe-stats__num { font-size: 20px; }

  /* Legend wraps; tooltip stays above the legend, full
     width minus padding so finger taps on iOS Safari don't
     miss the small hit area. */
  .globe-legend {
    flex-wrap: wrap;
    gap: 8px 14px;
    padding: 10px 12px;
  }
  .globe-legend__item { font-size: 11px; }
  .globe-tooltip {
    left: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
    min-width: 0;
    max-width: none;
  }
}

@media (max-width: 480px) {
  .globe-stats { grid-template-columns: 1fr; }
  .globe-stage { height: 50vh; }
}