/* fx.css · shader/fluid, colours folding like ink in water, drawn on the graphics card · owner: Lizzy East · all rights reserved */

/* The four colours are the settings. Without script or WebGL the block is a still
   gradient of the same four; with motion off, one still frame of the fluid. */
[data-fx~="shader/fluid"] {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background:
    radial-gradient(70% 90% at 12% 18%, var(--fx-fluid-2, #2340ff), transparent 70%),
    radial-gradient(60% 80% at 88% 22%, var(--fx-fluid-3, #7a3cff), transparent 70%),
    radial-gradient(70% 70% at 62% 100%, var(--fx-fluid-4, #c2185b), transparent 72%),
    var(--fx-fluid-1, #0b0d24);
}
[data-fx~="shader/fluid"] > canvas[data-fx-ambient] {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
}
[data-fx~="shader/fluid"] > canvas[data-fx-on] { opacity: 1; }
html.fx-armed [data-fx~="shader/fluid"] > canvas[data-fx-ambient] { transition: opacity 900ms var(--fx-ease); }