/* ============================================================================
   Shared animated site background — the homepage "war table at dusk" look,
   reused on every page of the site.

   >>> THIS IS THE SINGLE PLACE TO CHANGE THE BACKGROUND. <<<
   Swap the map image, adjust the darkening filter, the drift speeds, or the
   vignette here and it updates across the whole site at once.

   Each page needs these three layers in its markup (behind everything):
     <div class="bg-map"      aria-hidden="true"></div>
     <div class="bg-clouds"   aria-hidden="true"></div>
     <div class="bg-vignette" aria-hidden="true"></div>
   inc.header.php injects them automatically for every page that uses the
   shared header. The standalone pages (index, aigenerals, matchfinder,
   todolist) render their own copy of the three divs in their own markup.
   ============================================================================ */

.bg-map, .bg-clouds, .bg-vignette {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.bg-map     { z-index: -3; }
.bg-clouds  { z-index: -2; }
.bg-vignette{ z-index: -1; }

/* map tile is 1800x900; the layer is one tile larger and slides exactly one
   tile per loop, so the pan never shows a seam */
.bg-map::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: calc(100% + 1800px);
  height: calc(100% + 900px);
  background: url(../img/home_bg_sm.png) repeat 0 0 / 1800px 900px;
  filter: saturate(.55) brightness(.72) contrast(1.05);
  animation: map-drift 150s linear infinite;
  will-change: transform;
}
@keyframes map-drift {
  to { transform: translate3d(-1800px, -900px, 0); }
}

/* the kingdom's clouds, borrowed for the open sky above the table */
.bg-clouds::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: calc(100% + 1200px);
  height: 100%;
  background: url(../img/kingdom/map_1/clouds.png) repeat 0 0 / 1200px auto;
  opacity: .33;
  transform: translate3d(-1200px, 0, 0);
  animation: cloud-drift 240s linear infinite;
  will-change: transform;
}
@keyframes cloud-drift {
  to { transform: translate3d(0, 0, 0); }
}

.bg-vignette {
  background:
    radial-gradient(ellipse at 50% 22%, transparent 0%, rgba(13, 22, 14, .55) 75%, rgba(10, 17, 11, .8) 100%),
    linear-gradient(to bottom, rgba(13, 22, 14, .25), transparent 18%, transparent 70%, rgba(10, 17, 11, .6));
}
.bg-vignette::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: .05;
}

@media (prefers-reduced-motion: reduce) {
  .bg-map::before, .bg-clouds::before { animation: none; }
}