/* fx.css · shader/particles, thousands of points drifting in a flow field, drawn on the graphics card · owner: Lizzy East · all rights reserved */

/* A dark room with a shaft of light. Without script or WebGL the dust is a still
   scatter of points (dust.svg, a mask, so the colour setting tints it); with motion
   off, one still frame of the field. */
[data-fx~="shader/particles"] {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background:
    linear-gradient(125deg, transparent 38%, color-mix(in srgb, var(--fx-particle-color, #f3e7c9) 9%, transparent) 55%, transparent 72%),
    radial-gradient(ellipse at 75% 0%, var(--fx-particle-sky, #1b1f33), var(--fx-particle-night, #0b0c12) 70%);
}
[data-fx~="shader/particles"] > canvas[data-fx-ambient] {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: color-mix(in srgb, var(--fx-particle-color, #f3e7c9) 70%, transparent);
  -webkit-mask: url("dust.svg") 0 0 / 480px 360px repeat;
  mask: url("dust.svg") 0 0 / 480px 360px repeat;
  opacity: 0.8;
}
[data-fx~="shader/particles"] > canvas[data-fx-on] { background: none; -webkit-mask: none; mask: none; opacity: 1; }