/* ============================================================
   TopoMapping — premium preloader / loading screen
   Pure SVG + CSS animation. Brand: #1e5d44 / #fdbf2d
   ============================================================ */

#tm-preloader {
  position: fixed;
  inset: 0;
  z-index: 2147483600;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  background: #ffffff;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  opacity: 1;
  visibility: visible;
  transition: opacity .55s ease, visibility .55s ease;
}
#tm-preloader.tm-pre-hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* subtle cartographic grid background, faded toward the edges */
#tm-preloader::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(30, 93, 68, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 93, 68, .055) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: radial-gradient(circle at center, #000 18%, transparent 72%);
          mask-image: radial-gradient(circle at center, #000 18%, transparent 72%);
}
/* soft white glow lifting the logo off the grid */
#tm-preloader::after {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .95) 35%, rgba(255, 255, 255, 0) 70%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -58%);
  pointer-events: none;
}

.tm-pre-stage {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.tm-pre-svg {
  width: clamp(150px, 38vw, 210px);
  height: clamp(150px, 38vw, 210px);
  display: block;
  overflow: visible;
}

/* --- sonar pulses from the marker --- */
.tm-sonar {
  fill: none;
  stroke: #1e5d44;
  stroke-width: 1.4;
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: tm-sonar 2.6s ease-out infinite;
}
.tm-sonar-2 { animation-delay: .85s; }
.tm-sonar-3 { animation-delay: 1.7s; }
@keyframes tm-sonar {
  0%   { transform: scale(.45); opacity: .5; }
  70%  { opacity: 0; }
  100% { transform: scale(1.85); opacity: 0; }
}

/* --- static crosshair + cardinal ticks --- */
.tm-cross line {
  stroke: #1e5d44;
  stroke-width: 2;
  stroke-linecap: round;
  opacity: .45;
}
.tm-n {
  fill: #1e5d44;
  font: 700 9px 'Inter', sans-serif;
  opacity: .75;
}

/* --- rotating coordinate rings --- */
.tm-ring {
  fill: none;
  stroke: #1e5d44;
  transform-box: fill-box;
  transform-origin: center;
}
.tm-ring-outer {
  stroke-width: 1.5;
  stroke-dasharray: 2 9;
  opacity: .55;
  animation: tm-spin 16s linear infinite;
}
.tm-ring-inner {
  stroke-width: 1.2;
  stroke-dasharray: 1 7;
  opacity: .35;
  animation: tm-spin 22s linear infinite reverse;
}
@keyframes tm-spin { to { transform: rotate(360deg); } }

/* --- orbiting GPS satellites --- */
.tm-orbit {
  transform-box: view-box;
  transform-origin: center;
  animation: tm-spin 6.5s linear infinite;
}
.tm-orbit-2 {
  animation-duration: 9.5s;
  animation-direction: reverse;
}
.tm-sat { /* counter-rotate so the satellite stays upright */
  transform-box: fill-box;
  transform-origin: center;
  animation: tm-spin 6.5s linear infinite reverse;
}
.tm-sat-body { fill: #1e5d44; }
.tm-sat-panel { fill: #fdbf2d; }
.tm-sat-arm { stroke: #1e5d44; stroke-width: 1; }
.tm-gps-dot { fill: #fdbf2d; stroke: #1e5d44; stroke-width: 1; }

/* --- center map-pin logo --- */
.tm-pin {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: tm-pin-pulse 1.9s ease-in-out infinite;
}
.tm-pin-body { fill: #1e5d44; }
.tm-pin-dot { fill: #fdbf2d; }
@keyframes tm-pin-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}

/* --- text --- */
.tm-pre-text { text-align: center; }
.tm-pre-title {
  margin: 0;
  font-size: clamp(16px, 4.5vw, 19px);
  font-weight: 700;
  letter-spacing: -.2px;
  color: #1e5d44;
}
.tm-pre-sub {
  margin: 6px 0 0;
  font-size: clamp(12px, 3.4vw, 13.5px);
  font-weight: 500;
  color: #6b7280;
}
#tm-preloader .tm-dots::after {
  content: "";
  animation: tm-dots 1.4s steps(1, end) infinite;
}
@keyframes tm-dots {
  0%   { content: ""; }
  25%  { content: "."; }
  50%  { content: ".."; }
  75%  { content: "..."; }
  100% { content: ""; }
}

/* --- indeterminate progress bar --- */
.tm-pre-bar {
  position: relative;
  width: clamp(160px, 60vw, 230px);
  height: 4px;
  border-radius: 4px;
  background: rgba(30, 93, 68, .12);
  overflow: hidden;
}
.tm-pre-bar::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 42%;
  border-radius: 4px;
  background: linear-gradient(90deg, #1e5d44, #fdbf2d);
  animation: tm-bar 1.35s cubic-bezier(.65, 0, .35, 1) infinite;
}
@keyframes tm-bar {
  0%   { transform: translateX(-115%); }
  100% { transform: translateX(330%); }
}

/* respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .tm-sonar, .tm-ring, .tm-orbit, .tm-sat, .tm-pin,
  .tm-pre-bar::after, .tm-dots::after {
    animation: none !important;
  }
  .tm-sonar { opacity: .2; }
}