/* wgf-zonebg.css - THE generic zone-background layer (owner mandate 2026-07-04).
   Every flagship page gets a real Blizzard loading-screen / adventure-guide backdrop so the
   site feels like being inside the game client. This is the proven .hm-pagebg + .wgf-pvp-wrap
   recipe (fixed image + legibility scrim; data always on opaque plates above), lifted into one
   reusable component so dungeon and boss pages share it. Resolution lives in wgf_zonebg.py.

   No CLS: the layer is position:fixed, painted once, never reflows. It is NOT z-index:-1 (the
   SEO shell paints an opaque body background that would hide a negative layer); instead the
   .wgf-zonebg-wrap lifts the page content to z-index:1 and the image sits at z-index:0, so the
   photo paints over the body gradient and the content paints over the photo. */

.wgf-zonebg-wrap { position: relative; }
.wgf-zonebg-wrap > * { position: relative; z-index: 1; }
.wgf-zonebg-wrap > .wgf-zonebg { z-index: 0; }

.wgf-zonebg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background-position: center 34%;
  background-size: cover;
  background-repeat: no-repeat;
  /* blur hides the 16:9 upscale; the slight scale keeps the blurred edges off-frame */
  filter: blur(3px) saturate(1.04);
  transform: scale(1.08);
}

/* The legibility floor: a darkness scrim so display text and plates stay AA no matter which
   region of the art sits behind them. Darker at the top (hero) and bottom, lighter in the
   middle where the art can breathe. Gold whisper at the crown matches the home recipe. */
.wgf-zonebg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 85% at 50% 6%, rgba(255, 209, 0, 0.10), transparent 46%),
    linear-gradient(180deg, rgba(12, 10, 8, 0.82) 0%, rgba(12, 10, 8, 0.70) 30%, rgba(11, 9, 7, 0.90) 100%);
}

/* Respect the motion-reduction preference: drop the scale transform (keep the blur, which is
   a static legibility aid, not motion). The layer is fixed, so there is no parallax to disable
   beyond this. */
@media (prefers-reduced-motion: reduce) {
  .wgf-zonebg { transform: none; }
}