/* Page loaders and map reveal (split from styles.css) */

#map-loader-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--surface-page);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 0.4s ease;
}

#map-loader-container.hidden {
  opacity: 0;
  pointer-events: none;
}

.loader {
  width: 50px;
  aspect-ratio: 1;
  border-radius: 50%;
  /* #0000/#000 are mask alpha channels (transparent vs opaque), not palette colours — kept literal. */
  background:
    radial-gradient(farthest-side, var(--accent-bright) 94%, #0000) top/8px 8px no-repeat,
    conic-gradient(#0000 30%, var(--accent-bright));
  mask: radial-gradient(farthest-side, #0000 calc(100% - 8px), #000 0);
  -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 8px), #000 0);
  animation: l13 1s infinite linear;
}

@keyframes l13 {
  100% {
    transform: rotate(1turn)
  }
}

.no-data-overlay,
.failed-data-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
  font-weight: bold;
  color: var(--text-muted);
  pointer-events: none;
  z-index: 10;
}

.no-data-overlay {
  top: 60%;
}

/* Language switching loader container */
#language-loader-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--surface-page);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

#language-loader-container.active {
  opacity: 1;
  pointer-events: auto;
}

#language-loader-container .loader {
  margin-bottom: 20px;
}

#language-loader-text {
  font-family: "Inter", Arial, Helvetica, sans-serif;
  font-size: 16px;
  color: var(--text-primary);
  margin-top: 10px;
  text-align: center;
}

/* Hide the map pane and controls until the loader fades out: the map content fades in beneath it (.map-revealed
   is added at the same moment the loader gets .hidden), so the transition is a cross-fade. The map fade is
   slightly longer so content finishes settling just as the loader clears. */
.leaflet-pane.leaflet-map-pane,
.leaflet-control-container {
  opacity: 0;
  transition: opacity 0.5s ease-out;
}

.leaflet-pane.leaflet-map-pane.map-revealed {
  opacity: 1;
}

body.map-revealed .leaflet-control-container {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {

  #map-loader-container,
  .leaflet-pane.leaflet-map-pane,
  .leaflet-control-container {
    transition: none;
  }

  .loader {
    animation: none;
  }
}

/* Dark mode */
body.dark-mode #language-loader-container {
  background-color: var(--surface-page);
}

body.dark-mode #language-loader-text {
  color: var(--text-primary);
}