/* 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; }
/* LANDMINE (owner bug 2026-08-04: "why is the Database menu cut off"). This blanket lift
   is (0,1,0) — the exact specificity of `.wgf-shell-topbar` in wgf-site-shell.css — and it
   loads LATER, so it silently overrode the topbar's `z-index: 40` down to 1. That tied the
   header with `.wgf-shell-main` (also z-index: 1), and since main comes later in the DOM it
   painted OVER every nav dropdown: each menu was sheared off at the exact y where the page
   panel begins, which read as "the menu is clipped" even though the menu box was full height
   and unclipped. Keep the header out of the blanket and pin its real order back.

   LANDMINE #2 (owner bug 2026-08-04: "the page says 'this page's background' but I can't see
   the background"). The `:not()` above is not free: `:not(.wgf-shell-topbar)` ADDS its
   argument's specificity, so the blanket jumped (0,1,0) -> (0,2,0) and started out-ranking
   `.wgf-zonebg { position: fixed }` (0,1,0) — which the flat `> *` version never did (equal
   specificity, and .wgf-zonebg is declared later, so fixed won). The backdrop silently became
   `position: relative`, collapsed to height 0, and EVERY art-backed page across the site lost
   its loading-screen art while still advertising the wallpaper strip. The backdrop must never
   ride the blanket: keep it excluded AND pin `position: fixed` on its own (0,2,0) child rule so
   the two stay tied to the same specificity no matter what the blanket grows next. */
.wgf-zonebg-wrap > *:not(.wgf-shell-topbar):not(.wgf-zonebg) { position: relative; z-index: 1; }
.wgf-zonebg-wrap > .wgf-shell-topbar { z-index: 40; }
.wgf-zonebg-wrap > .wgf-zonebg { position: fixed; 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; }
}