/* ==========================================================================
   DGTULS — Animated fluid gradient background
   Usage: add <div class="fluid-bg" aria-hidden="true"> with 4 .fluid-bg__blob
   children as the FIRST child of a dark section (.intro, .page-head, .r-hero,
   .newsletter). The section needs position:relative + overflow:hidden
   (already true in prototype.css). Only transform/opacity animate (GPU-cheap).
   ========================================================================== */
.fluid-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
  /* soft vignette so text on the left stays readable */
  -webkit-mask-image: radial-gradient(130% 150% at 75% 35%, #000 45%, rgba(0,0,0,.7) 75%, rgba(0,0,0,.4) 100%);
          mask-image: radial-gradient(130% 150% at 75% 35%, #000 45%, rgba(0,0,0,.7) 75%, rgba(0,0,0,.4) 100%);
}
.fluid-bg__blob {
  position: absolute;
  width: var(--s, 46vw);
  height: var(--s, 46vw);
  max-width: 900px;
  max-height: 900px;
  left: var(--x, 60%);
  top: var(--y, 0%);
  margin: calc(var(--s, 46vw) / -2) 0 0 calc(var(--s, 46vw) / -2);
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--c, #7a2cf5), transparent 72%);
  opacity: var(--o, .55);
  filter: blur(var(--blur, 48px));
  mix-blend-mode: screen;
  will-change: transform;
  animation: dg-fluid-a var(--d, 26s) ease-in-out infinite alternate;
  animation-delay: var(--delay, 0s);
}
/* Four blobs with different colours, paths and speeds = organic, non-repeating feel */
.fluid-bg__blob:nth-child(1) { --c: #7a2cf5; --x: 74%; --y: 18%; --s: 58vw; --o: .85; --d: 22s; animation-name: dg-fluid-a; }
.fluid-bg__blob:nth-child(2) { --c: #ff2e9a; --x: 92%; --y: 88%; --s: 46vw; --o: .7; --d: 18s; --delay: -6s; animation-name: dg-fluid-b; }
.fluid-bg__blob:nth-child(3) { --c: #b026f0; --x: 56%; --y: 60%; --s: 40vw; --o: .6; --d: 25s; --delay: -12s; animation-name: dg-fluid-c; }
.fluid-bg__blob:nth-child(4) { --c: #4f2bd6; --x: 34%; --y: 0%; --s: 36vw; --o: .5; --d: 29s; --delay: -3s; animation-name: dg-fluid-d; }

@keyframes dg-fluid-a {
  0%   { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
  33%  { transform: translate3d(-26%, 22%, 0) scale(1.18) rotate(25deg); }
  66%  { transform: translate3d(12%, 34%, 0) scale(.88) rotate(-15deg); }
  100% { transform: translate3d(-14%, -10%, 0) scale(1.1) rotate(10deg); }
}
@keyframes dg-fluid-b {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  40%  { transform: translate3d(-38%, -30%, 0) scale(1.25); }
  100% { transform: translate3d(-16%, -55%, 0) scale(.9); }
}
@keyframes dg-fluid-c {
  0%   { transform: translate3d(0, 0, 0) scale(.9); }
  50%  { transform: translate3d(32%, -30%, 0) scale(1.22); }
  100% { transform: translate3d(-24%, 14%, 0) scale(1); }
}
@keyframes dg-fluid-d {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(45%, 30%, 0) scale(1.3); }
  100% { transform: translate3d(18%, 50%, 0) scale(.95); }
}

/* Keep section content above the background */
.intro > .container, .page-head > .container, .r-hero > .container,
.newsletter > *:not(.fluid-bg), .vs-feature > *:not(.fluid-bg) { position: relative; z-index: 1; }

/* The fluid layer replaces the old static radial gradients on these sections */
.has-fluid.intro::before, .has-fluid.page-head::after, .has-fluid.newsletter::after { display: none; }

/* Light page heads: softer blend */
.page-head--light .fluid-bg { opacity: .35; }
.page-head--light .fluid-bg__blob { mix-blend-mode: multiply; filter: blur(64px); }

/* Pause when off-screen (set by fluid-bg.js) */
.fluid-bg.is-paused .fluid-bg__blob { animation-play-state: paused; }

/* Smaller, lighter blobs on phones (less GPU work) */
@media (max-width: 640px) {
  .fluid-bg__blob { --blur: 36px; }
  .fluid-bg__blob:nth-child(4) { display: none; }
}

/* Respect users who prefer less motion: static gradient, no animation */
@media (prefers-reduced-motion: reduce) {
  .fluid-bg__blob { animation: none !important; }
}