/* The page background (Nick, 10/12): "Bloom Deep", a soft frost-blue halftone
   bloom behind the hero on a midnight-blue ground. One still picture,
   rendered once offline (BoneYard/backgrounds/v7: shaders.html + render.py,
   `render.py final bloomdeep`), on a fixed layer behind the page: no
   animation, no canvas, nothing redrawn while scrolling. Phone (portrait)
   and desktop (landscape) cuts. Customer pages only (admin keeps its own).
   Re-rendered? Give the files a NEW name (bloom-deep-3-...): nginx and
   Cloudflare cache /static images for 30 days by URL, and this URL carries
   no version, so an overwrite in place stays invisible to visitors. */
html { background-color: #07080d; }
body { background: transparent !important; }
.bg-art {
  position: fixed; top: 0; left: 0; width: 100%;
  height: 100vh; height: 100lvh;          /* never resizes while the bars slide */
  z-index: -1; pointer-events: none;
  background-color: #07080d;
  background-image: url("../images/backgrounds/bloom-deep-2-phone.webp");
  background-position: center top; background-size: cover; background-repeat: no-repeat;
}
@media (min-aspect-ratio: 1/1) {
  .bg-art { background-image: url("../images/backgrounds/bloom-deep-2-desk.webp"); }
}

/* The pack's colour, very faintly (Nick, 10/13): on the homepage a soft oval
   wash of the selected pack's accent (--vb-acc, set by vb.js per pack) sits
   over the picture and cross-fades when the pack changes. One fixed layer, a
   static mask; only its colour changes, and only on a pack switch. */
.bg-tint { display: none; }
html:has(.vb-demo) .bg-tint {
  display: block;
  position: fixed; top: 0; left: 0; width: 100%;
  height: 100vh; height: 100lvh;
  z-index: -1; pointer-events: none;
  background-color: rgba(var(--vb-acc, 158, 212, 255), .085);
  -webkit-mask-image: radial-gradient(ellipse 78% 62% at 50% 38%, #000 0%, rgba(0, 0, 0, .5) 45%, transparent 100%);
  mask-image: radial-gradient(ellipse 78% 62% at 50% 38%, #000 0%, rgba(0, 0, 0, .5) 45%, transparent 100%);
  transition: background-color .9s ease;
}
@media (prefers-reduced-motion: reduce) { .bg-tint { transition: none; } }