/* ==========================================================================
   scene-hero.css — GUARDIAN.hero (01 ORBIT / 02 BRIEF backdrop)
   Projected satellite callouts + a faint phosphor halo behind the globe.
   The mount itself (.hero-gl) is laid out by css/style.css.
   ========================================================================== */

/* soft phosphor bloom behind the dot-globe (right-of-center, bottom-cropped) */
.hero-gl::before {
  content: "";
  position: absolute;
  right: 4%;
  bottom: -36%;
  width: 80vmin;
  height: 80vmin;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(0, 255, 136, 0.065) 0%,
    rgba(0, 255, 136, 0.028) 44%,
    rgba(0, 255, 136, 0) 68%);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Satellite callouts — positioned per-frame via translate3d from JS,
   shown/hidden through .is-on (occlusion + frustum + dive tests).
   -------------------------------------------------------------------------- */

.hero-sat-label {
  position: absolute;
  top: 0;
  left: 0;
  margin-top: -4px;
  padding-left: 14px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.09em;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.22s ease;
  will-change: transform, opacity;
  pointer-events: none;
  user-select: none;
}

.hero-sat-label::before {
  /* 1px leader tick from the satellite dot to the text */
  content: "";
  position: absolute;
  left: 2px;
  top: 50%;
  width: 9px;
  height: 1px;
  background: var(--green);
  opacity: 0.55;
}

.hero-sat-label.is-on { opacity: 0.9; }

.hero-sat-label .hsl-id {
  color: var(--amber);
  margin-right: 7px;
}

.hero-sat-label .hsl-fn {
  color: var(--green);
  opacity: 0.85;
  text-shadow: 0 0 7px rgba(0, 255, 136, 0.35);
}

/* --------------------------------------------------------------------------
   Office callouts — one ground beacon per GUARDIAN.data.locations entry,
   projected like the satellite labels. Green by default; the HQ is keyed
   amber via .is-hq. JS offsets each label from its beacon (dx/dy) and adds
   .is-left when the label hangs its right edge on the anchor instead, so
   the five callouts fan apart (Belcamp / Arlington nearly coincide).
   Shown via .is-on as the orbit scrub passes each gate.
   -------------------------------------------------------------------------- */

.hero-loc-label {
  position: absolute;
  top: 0;
  left: 0;
  margin-top: -5px;
  padding-left: 15px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.09em;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.22s ease;
  will-change: transform, opacity;
  pointer-events: none;
  user-select: none;
}

.hero-loc-label::before {
  /* 1px leader tick from the beacon offset toward the text */
  content: "";
  position: absolute;
  left: 2px;
  top: 5px;
  width: 9px;
  height: 1px;
  background: var(--green);
  opacity: 0.6;
}

/* right edge anchored on the beacon — tick flips to the right side */
.hero-loc-label.is-left {
  padding-left: 0;
  padding-right: 15px;
}

.hero-loc-label.is-left::before {
  left: auto;
  right: 2px;
}

.hero-loc-label.is-on { opacity: 0.95; }

.hero-loc-label .hll-id {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.11em;
  color: var(--green);
  text-shadow: 0 0 8px rgba(0, 255, 136, 0.35);
  border-bottom: 1px solid rgba(0, 255, 136, 0.3);
  padding-bottom: 4px;
  margin-bottom: 4px;
}

.hero-loc-label .hll-fn {
  display: block;
  color: var(--green);
  opacity: 0.75;
  text-shadow: 0 0 7px rgba(0, 255, 136, 0.3);
}

/* HQ — amber, matching the Redstone ground beacon */
.hero-loc-label.is-hq::before { background: var(--amber); opacity: 0.7; }

.hero-loc-label.is-hq .hll-id {
  color: var(--amber);
  text-shadow: 0 0 8px rgba(255, 176, 0, 0.4);
  border-bottom-color: rgba(255, 176, 0, 0.35);
}

.hero-loc-label.is-hq .hll-fn {
  color: var(--amber);
  text-shadow: 0 0 7px rgba(255, 176, 0, 0.3);
}

/* --------------------------------------------------------------------------
   Responsive / reduced motion
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .hero-gl::before {
    right: 50%;
    bottom: -40%;
    width: 94vmin;
    height: 94vmin;
    transform: translateX(50%);
  }
  .hero-sat-label { font-size: 8px; }
  .hero-loc-label { font-size: 8px; }
  .hero-loc-label .hll-id { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-sat-label { transition: none; }
  .hero-loc-label { transition: none; }
}