body {
    font-size: var(--size-font);
    overflow-x: hidden;
  }
  .page_wrapper {
    min-height: 100vh;
    background-size: 400% 400% !important;
    background-repeat: no-repeat !important;
  }
  .hscroll_track { width: fit-content; }
  .hscroll_slide { flex-shrink: 0; }
  .img_holder { flex-shrink: 0; }
  .l-container { max-width: var(--size-container); }
  #hscroll-section,
  #marquee-section {
    overflow: hidden;
  }


/* ============================================================
   MESH GRADIENT BACKGROUND — scroll-driven
   ============================================================ */
:root{
  --bbh-c-top:    #7c1a66;
  --bbh-c-upper:  #a81c79;
  --bbh-c-mid:    #c42d6e;
  --bbh-c-lower:  #de5a55;
  --bbh-c-bottom: #ee8f4f;

  --bbh-intensity: 1;
  --bbh-sat: 1;
}

/* fallback-kleur, voorkomt een witte flash voor het paint */
body{ background-color: var(--bbh-c-top); }

/* content moet bóven de achtergrond liggen */
.page_wrapper{ position: relative; z-index: 2; }

#bbh-mesh{
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: linear-gradient(180deg,
    var(--bbh-c-top)     0%,
    var(--bbh-c-upper)  22%,
    var(--bbh-c-mid)    48%,
    var(--bbh-c-lower)  74%,
    var(--bbh-c-bottom) 100%);
  filter: saturate(var(--bbh-sat));
}

.bbh-blob{
  position: absolute;
  border-radius: 50%;
  will-change: transform, opacity;
  opacity: calc(var(--o, .5) * var(--bbh-intensity));
}
.bbh-blob.light{ mix-blend-mode: screen; }
.bbh-blob.deep { mix-blend-mode: multiply; }

/* diep paars — diepte bovenaan */
.bbh-blob.b1{
  --o:.85; width:80vmax; height:80vmax; top:-28vmax; left:-22vmax;
  background: radial-gradient(circle at 50% 50%, #4a0f5e 0%, rgba(74,15,94,.55) 42%, rgba(74,15,94,0) 70%);
}
/* magenta gloed */
.bbh-blob.b2{
  --o:.7; width:65vmax; height:65vmax; top:2vmax; left:48vw;
  background: radial-gradient(circle at 50% 50%, #ff2f9e 0%, rgba(255,47,158,.4) 40%, rgba(255,47,158,0) 68%);
}
/* koraal, komt van links opzetten */
.bbh-blob.b3{
  --o:.75; width:70vmax; height:70vmax; top:40vh; left:-26vmax;
  background: radial-gradient(circle at 50% 50%, #ff6b3d 0%, rgba(255,107,61,.42) 40%, rgba(255,107,61,0) 68%);
}
/* amber, trekt de gradient naar oranje */
.bbh-blob.b4{
  --o:.55; width:52vmax; height:52vmax; top:75vh; left:42vw;
  background: radial-gradient(circle at 50% 50%, #ffc23d 0%, rgba(255,194,61,.35) 38%, rgba(255,194,61,0) 66%);
}
/* violet, drijft door het midden */
.bbh-blob.b5{
  --o:.6; width:58vmax; height:58vmax; top:26vh; left:14vw;
  background: radial-gradient(circle at 50% 50%, #8b2be2 0%, rgba(139,43,226,.38) 40%, rgba(139,43,226,0) 68%);
}

/* korrel — haalt de banding uit de gradient */
#bbh-grain{
  position: fixed; inset: 0; z-index: 1;
  pointer-events: none; opacity: .045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}

@media (prefers-reduced-motion: reduce){
  #bbh-grain{ opacity: .03; }
}