/* Animated hero background (home page, light theme): Tixible's connected-Africa map.
   Decorative only: behind the text, faded toward the text, and still for reduced-motion users. */
.has-bg { position: relative; overflow: hidden; isolation: isolate; }
.has-bg > .container { position: relative; z-index: 1; }

.hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

.hero-bg .glow { position: absolute; border-radius: 50%; filter: blur(60px); will-change: transform; }
.hero-bg .glow.g1 {
  width: 520px; height: 520px; right: -120px; top: -160px;
  background: radial-gradient(circle, rgba(232, 184, 75, 0.32), transparent 66%);
}
.hero-bg .glow.g2 {
  width: 460px; height: 460px; left: -140px; bottom: -200px;
  background: radial-gradient(circle, rgba(217, 165, 47, 0.2), transparent 66%);
}
.hero-bg .glow.g3 {
  width: 380px; height: 380px; left: 38%; top: -220px;
  background: radial-gradient(circle, rgba(31, 122, 77, 0.1), transparent 66%);
}

/* The map fades in from the left so the text stays easy to read. */
.hero-bg .map-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent 30%, rgba(0, 0, 0, 0.5) 52%, #000 72%);
  mask-image: linear-gradient(90deg, transparent 30%, rgba(0, 0, 0, 0.5) 52%, #000 72%);
}

/* On wide screens the text sits on the left so the whole map has room on the right. */
@media (min-width: 1000px) {
  .has-bg .hero-inner { max-width: var(--max-width); }
  .has-bg .hero-inner > * { max-width: 680px; }
  .hero-bg .map-canvas {
    -webkit-mask-image: linear-gradient(90deg, transparent 44%, rgba(0, 0, 0, 0.6) 56%, #000 66%);
    mask-image: linear-gradient(90deg, transparent 44%, rgba(0, 0, 0, 0.6) 56%, #000 66%);
  }
}

@media (max-width: 700px) {
  .hero-bg .map-canvas {
    opacity: 0.55;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.6) 40%, #000 70%);
    mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.6) 40%, #000 70%);
  }
  .hero-bg .glow.g1 { width: 340px; height: 340px; }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-bg .glow.g1 { animation: hh-drift-a 28s ease-in-out infinite alternate; }
  .hero-bg .glow.g2 { animation: hh-drift-b 34s ease-in-out infinite alternate; }
  .hero-bg .glow.g3 { animation: hh-drift-c 40s ease-in-out infinite alternate; }
}

@keyframes hh-drift-a { from { transform: translate(0, 0) scale(1); } to { transform: translate(-100px, 70px) scale(1.15); } }
@keyframes hh-drift-b { from { transform: translate(0, 0) scale(1); } to { transform: translate(120px, -50px) scale(1.12); } }
@keyframes hh-drift-c { from { transform: translate(0, 0) scale(1); } to { transform: translate(-140px, 40px) scale(0.9); } }