/* ============================================
   GaiaMonitor Globe-specific Styles
   ============================================ */

/* Globe floating labels and leader lines are rendered as HTML overlays */
.globe-label {
  position: absolute;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-chip);
  padding: var(--sp-1) var(--sp-2);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-secondary);
  pointer-events: auto;
  white-space: nowrap;
  z-index: 10;
}

.globe-label-close {
  margin-left: var(--sp-1);
  color: var(--text-dim);
  cursor: pointer;
  font-size: 12px;
}
.globe-label-close:hover {
  color: var(--text-primary);
}

.globe-label-title {
  color: var(--text-primary);
  font-weight: 500;
}

.globe-label-date {
  color: var(--text-dim);
  font-size: 9px;
}

/* Marker pulse animation (used for CSS-rendered markers if needed) */
@keyframes marker-pulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.15); }
}

@keyframes shockwave {
  0% {
    opacity: 0.6;
    transform: scale(0.5);
  }
  100% {
    opacity: 0;
    transform: scale(3);
  }
}

.marker-ring {
  animation: marker-pulse 2s ease-in-out infinite;
}

.marker-shockwave {
  animation: shockwave 2s ease-out infinite;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .marker-ring,
  .marker-shockwave {
    animation: none;
  }
}