/* fx.css · generative/mesh-gradient, colours drift and melt behind the headline · owner: Lizzy East · all rights reserved */

/* Four soft blobs of colour, blurred together, each drifting on its own slow loop.
   Pure CSS. The colours stay deep so light text over them keeps its contrast. */
[data-fx~="generative/mesh-gradient"] { position: relative; isolation: isolate; overflow: clip; background: var(--fx-mesh-base, #14110e); }
[data-fx~="generative/mesh-gradient"] > [data-fx-ambient] { position: absolute; inset: -20%; z-index: -1; filter: blur(70px) saturate(1.2); }
[data-fx~="generative/mesh-gradient"] > [data-fx-ambient] > span {
  position: absolute;
  width: 55%;
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0.9;
}
[data-fx~="generative/mesh-gradient"] > [data-fx-ambient] > span:nth-child(1) { left: 0; top: 5%; background: var(--fx-mesh-1, #8a2f12); }
[data-fx~="generative/mesh-gradient"] > [data-fx-ambient] > span:nth-child(2) { right: 0; top: 0; background: var(--fx-mesh-2, #3b1f5c); }
[data-fx~="generative/mesh-gradient"] > [data-fx-ambient] > span:nth-child(3) { left: 25%; bottom: 0; background: var(--fx-mesh-3, #0f4c47); }
[data-fx~="generative/mesh-gradient"] > [data-fx-ambient] > span:nth-child(4) { right: 10%; bottom: 10%; width: 40%; background: var(--fx-mesh-4, #a63a12); }
html.fx-armed [data-fx~="generative/mesh-gradient"] > [data-fx-ambient] > span {
  animation: fx-mesh-a var(--fx-mesh-dur, 22s) ease-in-out infinite alternate;
}
html.fx-armed [data-fx~="generative/mesh-gradient"] > [data-fx-ambient] > span:nth-child(2n) { animation-name: fx-mesh-b; animation-duration: calc(var(--fx-mesh-dur, 22s) * 1.3); }
html.fx-armed [data-fx~="generative/mesh-gradient"] > [data-fx-ambient] > span:nth-child(3) { animation-duration: calc(var(--fx-mesh-dur, 22s) * 0.8); }
@keyframes fx-mesh-a { from { translate: 0 0; scale: 1; } to { translate: 30% 20%; scale: 1.25; } }
@keyframes fx-mesh-b { from { translate: 0 0; scale: 1.1; } to { translate: -25% 25%; scale: 0.85; } }