/* GPX Mate — under construction page */

* { box-sizing: border-box; }

body.construction {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 22px;
  font-family: var(--font-body, "Inter", system-ui, sans-serif);
  color: #eaf4ef;
  overflow: hidden;
  position: relative;
  background:
    radial-gradient(110% 90% at 15% 12%, rgba(58,157,78,0.42) 0%, transparent 46%),
    radial-gradient(120% 120% at 88% 4%, rgba(47,159,208,0.36) 0%, transparent 50%),
    linear-gradient(160deg, #0a1f33 0%, #0d3247 50%, #0a2c3a 100%);
}

/* subtle drifting route-line background image */
.contours {
  position: absolute; inset: -10% -10% -10% -10%;
  background-image: url("../img/construction-background.png");
  background-size: 620px 620px;
  background-repeat: repeat;
  opacity: 0.12;
  animation: drift 60s linear infinite;
  pointer-events: none;
}
@keyframes drift { from { transform: translate3d(0,0,0); } to { transform: translate3d(-60px,-30px,0); } }

.cx { position: relative; z-index: 1; width: 100%; max-width: 680px; }

.cx-graphic {
  display: block;
  width: min(440px, 84vw);
  margin: 0 auto 56px;
  filter: drop-shadow(0 24px 44px rgba(0,0,0,0.5));
  animation: rise 1s cubic-bezier(.2,.9,.3,1) both, bob 6s ease-in-out 1s infinite;
}
@keyframes rise { from { opacity: 0; transform: translateY(26px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.cx-pill {
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.22);
  color: #d8ece3; padding: 8px 18px; border-radius: 999px;
  font-size: 0.84rem; font-weight: 600; letter-spacing: 0.04em;
  margin-bottom: 22px;
}
.cx-pill .dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: #5cc25b; box-shadow: 0 0 0 0 rgba(92,194,91,0.55);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(92,194,91,0.55); }
  70% { box-shadow: 0 0 0 12px rgba(92,194,91,0); }
  100% { box-shadow: 0 0 0 0 rgba(92,194,91,0); }
}

.cx h1 {
  font-family: var(--font-head, "Outfit", system-ui, sans-serif);
  font-weight: 800; color: #fff; line-height: 1.1;
  font-size: clamp(2rem, 6vw, 3.2rem); margin: 0 0 14px;
  letter-spacing: -0.01em;
}
.cx h1 .accent { color: #ffb648; }
.cx p { color: rgba(234,244,239,0.82); font-size: 1.1rem; max-width: 540px; margin: 0 auto 34px; line-height: 1.6; }

/* ===== Unique trail progress indicator ===== */
.trail-wrap { width: min(560px, 92vw); margin: 0 auto; }
.trail-svg { width: 100%; height: auto; display: block; overflow: visible; }

.trail-base { fill: none; stroke: rgba(255,255,255,0.14); stroke-width: 6; stroke-linecap: round; }
.trail-fill {
  fill: none; stroke: url(#trailGrad); stroke-width: 6; stroke-linecap: round;
  stroke-dasharray: var(--len); stroke-dashoffset: var(--len);
  animation: trace 3.4s cubic-bezier(.45,.05,.25,1) forwards;
}
@keyframes trace { to { stroke-dashoffset: var(--off); } }

.trail-pin {
  fill: #fff;
  offset-path: var(--mp);
  offset-distance: 0%;
  animation: hike 3.4s cubic-bezier(.45,.05,.25,1) forwards;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.4));
}
@keyframes hike { to { offset-distance: var(--pct); } }
/* fallback marker dot for browsers without offset-path */
.trail-dot { fill: #ffb648; }

/* continuous GPS signal pulse radiating from the marker */
.gps-ring {
  fill: none;
  stroke: #5cc25b;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: gps-ping 16s ease-out infinite;
}
.gps-ring.ring-2 { animation-delay: 5.33s; }
.gps-ring.ring-3 { animation-delay: 10.66s; }
@keyframes gps-ping {
  0%   { transform: scale(0.3); opacity: 0; }
  10%  { opacity: 0.16; }
  100% { transform: scale(100); opacity: 0; }
}

.start-flag, .end-flag { fill: #ffb648; }
.end-flag.dim { fill: rgba(255,255,255,0.3); }

.trail-meta {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 18px; font-family: var(--font-head, "Outfit", sans-serif);
}
.trail-meta .pct { font-size: 2.2rem; font-weight: 800; color: #fff; }
.trail-meta .pct span { color: #5cc25b; }
.trail-meta .eta { color: rgba(234,244,239,0.7); font-size: 0.95rem; font-weight: 500; }

.cx-foot {
  position: absolute; z-index: 1;
  left: 0; right: 0; bottom: 30px;
  margin-top: 72px; color: rgba(234,244,239,0.45); font-size: 0.82rem; line-height: 1.9;
}
.cx-foot a { color: rgba(234,244,239,0.85); text-decoration: none; border-bottom: 1px solid rgba(234,244,239,0.35); }
.cx-foot a:hover { color: #fff; border-color: #fff; }

@media (max-width: 520px) {
  .trail-meta .pct { font-size: 1.7rem; }
  .cx p { font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .contours, .cx-graphic, .trail-fill, .trail-pin, .cx-pill .dot, .gps-ring { animation: none !important; }
  .trail-fill { stroke-dashoffset: var(--off); }
}