/* === Map chapters — SVG Sweden map with animated routes === */

/* Map container — fills sticky wrapper, hidden by default */
#guided-map {
  position: absolute;
  inset: 0;
  background: #050510;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s ease;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#guided-map svg {
  width: auto;
  height: 90%;
  max-width: 90%;
}

/* Crossfade: when .map-active, map shows and graph hides */
.guided-graph-wrapper.map-active #guided-map {
  opacity: 1;
  pointer-events: auto;
}

.guided-graph-wrapper.map-active #guided-graph {
  opacity: 0;
}

/* Graph needs transition for smooth crossfade */
#guided-graph {
  transition: opacity 0.8s ease;
}

/* --- Location dots --- */
.location circle {
  transition: r 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.location.location-revealed circle {
  r: 3.8;
}

.location-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 6.2px;
  fill: rgba(138, 164, 255, 0.4); /* var(--aina-ai) at 40% */
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.6s ease 0.3s;
}

.location.location-revealed .location-label {
  opacity: 1;
}

/* Pulse animation on revealed dots */
.location.location-revealed circle {
  animation: dot-pulse 2.5s ease-in-out infinite;
}

@keyframes dot-pulse {
  0%, 100% { filter: url(#glow-dot); opacity: 1; }
  50% { filter: url(#glow-dot) brightness(1.5); opacity: 0.8; }
}

/* --- Route paths --- */
.route-path {
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  filter: url(#glow-route);
  stroke-dasharray: var(--route-length);
  stroke-dashoffset: var(--route-length);
  transition: stroke-dashoffset 2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              opacity 0.6s ease;
}

.route-path.route-active {
  stroke-dashoffset: 0;
}

.route-path.route-past {
  opacity: 0.2;
  stroke-dashoffset: 0;
  filter: none;
}

/* --- Timestamp labels along routes --- */
.route-timestamp {
  font-family: 'Courier Prime', 'Courier New', monospace;
  font-size: 5.4px;
  fill: rgba(232, 230, 227, 0.5);
  opacity: 0;
  transition: opacity 0.5s ease;
}

.route-timestamp.visible {
  opacity: 1;
}

.route-timestamp.weather-hide {
  opacity: 0;
}

/* --- Weather station markers --- */
.weather-station {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.weather-station.revealed {
  opacity: 1;
}

.station-name {
  font-family: 'JetBrains Mono', monospace;
  font-size: 3px;
  fill: rgba(138, 164, 255, 0.5); /* var(--aina-ai) at 50% */
  letter-spacing: 0.05em;
  stroke: rgba(5, 5, 16, 0.7);
  stroke-width: 1.8px;
  paint-order: stroke;
}

.station-reading {
  font-family: 'Courier Prime', 'Courier New', monospace;
  font-size: 3.5px;
  fill: #4a9eff;
  font-weight: bold;
  stroke: rgba(5, 5, 16, 0.7);
  stroke-width: 2px;
  paint-order: stroke;
}

/* --- Vignette matching graph vignette --- */
#guided-map::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(5, 5, 16, 0.7) 100%);
  z-index: 2;
}