/* ============================================================
   TXLOC — Interactive Hero Globe
   Premium WebGL experience styling + graceful CSS fallback.
   All colour/motion tokens are injected inline from GlobeConfig.
   ============================================================ */

.tx-globe {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 560px;
  margin-inline: auto;
  --glb-atmos: #3b82f6;
  --glb-marker: #22d3ee;
  --glb-pulse: #38bdf8;
  --glb-glow: .55;
  isolation: isolate;
}

/* ---------- Breathing ambient halo (behind the globe) ---------- */
.tx-globe__halo {
  position: absolute;
  inset: -6%;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 46%,
      color-mix(in srgb, var(--glb-atmos) 55%, transparent) 0%,
      color-mix(in srgb, var(--glb-atmos) 22%, transparent) 32%,
      transparent 64%);
  opacity: calc(.35 + var(--glb-glow) * .45);
  filter: blur(18px);
  animation: txGlobeBreath 10s ease-in-out infinite;
}
@keyframes txGlobeBreath {
  0%, 100% { transform: scale(1);    opacity: calc(.30 + var(--glb-glow) * .40); }
  50%      { transform: scale(1.05); opacity: calc(.45 + var(--glb-glow) * .50); }
}

/* ---------- WebGL stage ---------- */
.tx-globe__stage {
  position: absolute;
  inset: 0;
  z-index: 2;
  cursor: grab;
}
.tx-globe__stage:active { cursor: grabbing; }
.tx-globe__stage canvas { display: block; outline: none; }
.tx-globe.is-live .tx-globe__fallback { opacity: 0; visibility: hidden; }

/* ---------- Markers (DOM overlay projected onto the globe) ---------- */
.tx-globe__markers {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: visible;
}
.tx-marker {
  position: absolute;
  left: 0; top: 0;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px; /* centre on the projected point */
  pointer-events: auto;
  cursor: pointer;
  opacity: 0;
  will-change: left, top, opacity;
}
.tx-marker__dot {
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--glb-marker);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--glb-marker) 60%, transparent),
              0 0 10px color-mix(in srgb, var(--glb-marker) 90%, transparent);
  transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease;
}
.tx-marker__halo {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--glb-marker) 55%, transparent);
  opacity: 0;
  transform: scale(.6);
  transition: opacity .4s ease, transform .5s cubic-bezier(.16,1,.3,1);
}
.tx-marker.is-active .tx-marker__dot,
.tx-marker:hover .tx-marker__dot {
  transform: scale(1.7);
  box-shadow: 0 0 0 1px var(--glb-marker), 0 0 18px color-mix(in srgb, var(--glb-marker) 95%, transparent);
}
.tx-marker.is-active .tx-marker__halo,
.tx-marker:hover .tx-marker__halo {
  opacity: 1;
  transform: scale(1);
}
/* soft synchronized pulse fired by a translation route */
.tx-marker.is-pulsing .tx-marker__halo {
  animation: txMarkerPulse 2s cubic-bezier(.16,1,.3,1);
}
@keyframes txMarkerPulse {
  0%   { opacity: .8; transform: scale(.5); border-color: color-mix(in srgb, var(--glb-pulse) 80%, transparent); }
  100% { opacity: 0;  transform: scale(3.4); border-color: color-mix(in srgb, var(--glb-pulse) 0%, transparent); }
}

/* ---------- Tooltip ---------- */
.tx-globe__tooltip {
  position: absolute;
  z-index: 20;
  left: 0; top: 0;
  min-width: 190px;
  max-width: 240px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(9, 20, 38, .82);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .5);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #eaf2ff;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px) scale(.98);
  transition: opacity .28s ease, transform .28s cubic-bezier(.16,1,.3,1), visibility .28s;
  pointer-events: none;
}
.tx-globe__tooltip.is-visible { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.tx-globe__tooltip .t-lang { font-family: var(--tx-font-head, sans-serif); font-weight: 700; font-size: 1.02rem; color: #fff; }
.tx-globe__tooltip .t-region { font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: color-mix(in srgb, var(--glb-marker) 85%, #fff); margin-bottom: 8px; }
.tx-globe__tooltip .t-note { font-size: .82rem; color: #b9cbe6; margin-bottom: 6px; }
.tx-globe__tooltip .t-services { font-size: .78rem; color: #93a9cc; line-height: 1.5; margin-bottom: 8px; }
.tx-globe__tooltip .t-status { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 600; color: #7ee7c7; }
.tx-globe__tooltip .t-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #34d399; box-shadow: 0 0 8px #34d399; }

/* ---------- Live activity card ---------- */
.tx-globe__activity {
  position: absolute;
  z-index: 15;
  right: -6px;
  bottom: 6%;
  width: min(230px, 62%);
  pointer-events: none;
}
.tx-activity-card {
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(9, 20, 38, .78);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.16,1,.3,1);
}
.tx-activity-card.is-visible { opacity: 1; transform: translateY(0); }
.tx-activity-card .a-title { display: flex; align-items: center; gap: 7px; font-size: .74rem; font-weight: 600; color: color-mix(in srgb, var(--glb-marker) 85%, #fff); letter-spacing: .02em; }
.tx-activity-card .a-title::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--glb-marker); box-shadow: 0 0 8px var(--glb-marker); flex: none; }
.tx-activity-card .a-pair { font-family: var(--tx-font-head, sans-serif); font-weight: 700; font-size: .96rem; color: #fff; margin: 4px 0 2px; }
.tx-activity-card .a-detail { font-size: .76rem; color: #93a9cc; }

/* ---------- Language highlight chip ---------- */
.tx-globe__highlight {
  position: absolute;
  z-index: 15;
  left: -4px;
  top: 8%;
  pointer-events: none;
}
.tx-highlight-chip {
  display: inline-flex;
  flex-direction: column;
  padding: 10px 15px;
  border-radius: 14px;
  background: rgba(9, 20, 38, .72);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.16,1,.3,1);
}
.tx-highlight-chip.is-visible { opacity: 1; transform: translateX(0); }
.tx-highlight-chip .h-lang { font-family: var(--tx-font-head, sans-serif); font-weight: 700; font-size: 1rem; color: #fff; }
.tx-highlight-chip .h-note { font-size: .75rem; color: color-mix(in srgb, var(--glb-marker) 85%, #fff); }

/* ============================================================
   Graceful CSS fallback globe (no WebGL / reduced motion / load fail)
   ============================================================ */
.tx-globe__fallback {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  transition: opacity .8s ease, visibility .8s;
}
.tx-globe__orb {
  position: relative;
  width: 64%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 32%, #1a3a63 0%, #0d243f 45%, #081a30 100%);
  box-shadow:
    inset -22px -26px 60px rgba(0, 0, 0, .6),
    inset 20px 18px 46px color-mix(in srgb, var(--glb-atmos) 30%, transparent),
    0 0 60px color-mix(in srgb, var(--glb-atmos) 35%, transparent);
  overflow: hidden;
}
.tx-globe__grid {
  position: absolute; inset: 0; border-radius: 50%;
  background-image:
    radial-gradient(color-mix(in srgb, var(--glb-marker) 55%, transparent) .8px, transparent 1.2px);
  background-size: 14px 14px;
  opacity: .35;
  -webkit-mask-image: radial-gradient(circle at 40% 36%, #000 55%, transparent 78%);
          mask-image: radial-gradient(circle at 40% 36%, #000 55%, transparent 78%);
}
.tx-globe__ring {
  position: absolute; inset: -8%; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--glb-atmos) 45%, transparent);
  animation: txFallbackSpin 26s linear infinite;
}
.tx-globe__ring--2 { inset: -3%; border-style: dashed; border-color: color-mix(in srgb, var(--glb-marker) 30%, transparent); animation-duration: 40s; animation-direction: reverse; }
@keyframes txFallbackSpin { to { transform: rotate(360deg); } }
.tx-globe__fallback-caption { text-align: center; }
.tx-globe__fallback-title { font-family: var(--tx-font-head, sans-serif); font-weight: 700; color: #fff; font-size: 1.02rem; }
.tx-globe__fallback-sub { font-size: .82rem; color: #9fb6d4; margin-top: 3px; }

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
  .tx-globe { max-width: 440px; }
  .tx-globe__activity { width: min(210px, 70%); }
}
@media (max-width: 575.98px) {
  .tx-globe { max-width: 340px; }
  .tx-globe__tooltip { min-width: 160px; max-width: 200px; padding: 11px 13px; }
  .tx-globe__activity { width: 78%; right: -2px; }
}

/* ---------- Reduced motion: kill all globe motion, keep it elegant ---------- */
@media (prefers-reduced-motion: reduce) {
  .tx-globe__halo,
  .tx-globe__ring,
  .tx-marker.is-pulsing .tx-marker__halo { animation: none !important; }
}