/* ==========================================================================
   facts-globe — the Namibia facts carousel and its wireframe globe
   ========================================================================== */

.facts-layout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 60px;
  flex-wrap: wrap;
  max-width: 780px;
  margin: 0 auto;
}
.globe-stage {
  flex: 0 0 auto;
  width: 220px;
  height: 220px;
  perspective: 900px;
  margin: 0 auto;
}
/* --- wireframe sphere -------------------------------------------------
   Generated by globe-gen.py, variant b: 6 meridian planes
   (12 longitude lines), 5 parallels. Do not hand-edit the transforms;
   regenerate instead.

   .globe-stage keeps its 220x220 footprint and perspective exactly as before,
   so nothing around the globe reflows.

   .globe is a transparent 3D container. Every ring is a full-diameter circle
   placed in real 3D space around one shared centre, so they read as lines
   wrapping a sphere. preserve-3d on .globe is what stops the browser
   flattening them back onto one plane.
   -------------------------------------------------------------------- */
.globe-stage {
  position: relative;
}
.globe {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateX(-12deg) rotateY(0deg);
  will-change: transform;
}
.globe-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  transform-style: preserve-3d;
}
/* Meridians and parallels are weighted differently on purpose. A parallel is
   seen almost edge-on, so its stroke covers far fewer pixels than a meridian's
   and antialiasing thins it further. At equal alpha the horizontals disappear
   and the sphere reads as a cage of vertical lines. The parallels are lifted
   until the two families carry equal visual weight. */
.globe-mer {
  border: 1px solid rgba(230, 223, 200, 0.16);
}
.globe-par {
  border: 1px solid rgba(230, 223, 200, 0.30);
}
.globe-par-eq {
  border-color: rgba(168, 98, 45, 0.6);
}

.globe-mer-0 { transform: rotateY(0deg); }
.globe-mer-1 { transform: rotateY(30deg); }
.globe-mer-2 { transform: rotateY(60deg); }
.globe-mer-3 { transform: rotateY(90deg); }
.globe-mer-4 { transform: rotateY(120deg); }
.globe-mer-5 { transform: rotateY(150deg); }
.globe-par-0 { transform: rotateX(90deg) translateZ(-95.26px) scale(0.5); }
.globe-par-1 { transform: rotateX(90deg) translateZ(-55px) scale(0.866); }
.globe-par-2 { transform: rotateX(90deg) translateZ(0px) scale(1); }
.globe-par-3 { transform: rotateX(90deg) translateZ(55px) scale(0.866); }
.globe-par-4 { transform: rotateX(90deg) translateZ(95.26px) scale(0.5); }

/* The land cap: Africa, pushed out to the sphere's front surface so it swings
   off-centre as the sphere turns instead of sitting on a disc through the
   middle. globe-africa.svg is world-map.svg trimmed to the single Africa
   polygon on a transparent ground — the original carried an opaque background
   rect and five other continents, which on a wireframe hid every ring behind
   it. On ::before so the land's own opacity does not also fade the Namibia
   marker, which is a sibling. */
.globe-land {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  transform: translateZ(55px) scale(0.866);
  transform-style: preserve-3d;
  pointer-events: none;
}
.globe-land::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-image: url('../../../globe-africa.svg');
  background-size: cover;
  background-position: center;
  opacity: 0.9;
}

/* The silhouette is the sphere's edge, so it must NOT rotate — it lives
   outside #globe and stays a true circle at every angle. */
.globe-outline {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(230, 223, 200, 0.7);
  pointer-events: none;
}
.globe-marker {
  position: absolute;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: var(--rust);
  box-shadow: 0 0 8px 2px rgba(168, 98, 45, 0.6);
  animation: splashPulse 1.6s ease-in-out infinite;
}
.globe-marker-namibia {
  left: 58%;
  top: 54%;
}
/* --- end wireframe sphere --------------------------------------------- */

.facts-copy {
  flex: 1 1 320px;
  min-width: 280px;
}
.fact-display {
  margin-top: 24px;
  min-height: 84px;
}
.fact-text {
  font-family: 'Fraunces', serif;
  font-size: 20px;
  line-height: 1.5;
  color: var(--sand);
  max-width: 44ch;
  opacity: 1;
  transition: opacity 0.4s ease;
}
.fact-text.fading {
  opacity: 0;
}
.fact-nav {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
}
.fact-dots {
  display: flex;
  gap: 8px;
}
.fact-dots .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--line);
  cursor: pointer;
  transition: background 0.3s ease, transform 0.2s ease;
}
.fact-dots .dot:hover {
  transform: scale(1.3);
}
.fact-dots .dot.active {
  background: var(--rust);
}
.fact-arrow {
  background: none;
  border: 1px solid var(--line);
  color: var(--stone);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.fact-arrow:hover {
  border-color: var(--rust);
  color: var(--sand);
}

@media (max-width: 720px) {
  .facts-layout { flex-direction: column; gap: 32px; text-align: center; }
  .fact-text { max-width: none; }
  .fact-nav { justify-content: center; }
}