/* Preview: one artist background continues beneath the entire site. */
html { background:#090808; }
body {
  position:relative;
  isolation:isolate;
  background:#090808;
}
body::before {
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:linear-gradient(rgba(5,5,6,.18),rgba(5,5,6,.18)),url("assets/bg.webp");
  background-position:center center;
  background-size:cover;
}
.hero.hx-host,.moments,.work,.about,.contact { background:transparent; }
.statement {
  background:rgba(96,70,9,.16);
  color:var(--ink);
}
.statement > span { color:var(--yellow-hot); }
.case-dialog {
  background-image:linear-gradient(rgba(5,5,6,.26),rgba(5,5,6,.26)),url("assets/bg.webp");
  background-position:center center;
  background-size:cover;
  background-attachment:fixed;
}

/* The hero must not paint a second, un-dimmed copy of the same background:
   body::before already covers the whole page, so the hero's own opaque
   bg.webp made the first screen visibly brighter and left a hard rectangular
   seam as .hx-stage scaled down on scroll. Hide it and let the shared one
   show through; the prism light still belongs to the hero and gets extra
   bleed so it keeps covering while the stage scales to 0.9. */
.hx-bg { display:none; }
.hx-prism { transform:translate3d(calc(var(--hpx,0) * 6px),0,0) scale(1.14);
  /* dissolve the light before the section ends, so scrolling past the hero
     never shows a horizontal cut where the prism stops */
  -webkit-mask-image:linear-gradient(to bottom,#000 42%,rgba(0,0,0,.45) 74%,transparent 96%);
          mask-image:linear-gradient(to bottom,#000 42%,rgba(0,0,0,.45) 74%,transparent 96%); }