/* The static surface also supplies the colour beneath the translucent WebGL dye. */
.page-fluid {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(ellipse 65% 76% at 47% 34%, #f9f6edea, #f9f6ed55 65%, transparent),
    radial-gradient(ellipse 64% 89% at 3% 46%, #d1dfe8, transparent 80%),
    radial-gradient(ellipse 56% 76% at 100% 78%, #ded1e7, transparent 84%),
    #f6f3ea;
}

.page-fluid canvas {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.3s ease;
}

.page-fluid[data-fluid="running"] canvas { opacity: .99; }
.page-fluid[data-fluid-intro] canvas { transition-duration: .24s; }

@media (prefers-reduced-motion: reduce) {
  .page-fluid canvas { visibility: hidden; transition: none; }
}