/*
 * dust-cloud (CSS) — companion to dust-cloud.js. Load both in Webflow.
 *
 * An overlay on a still image: drop it into the image's wrapper (the wrapper
 * needs position: relative). Screen blend, so the haze can only brighten the
 * photo — a fully black canvas pixel changes nothing.
 *
 * Stack it with light-seam on the same wrapper: put the dust cloud FIRST, so the
 * seam's light and fine dust sit above the volume haze.
 *
 * The canvas is deliberately smaller than its box — both in resolution (data-res,
 * and no devicePixelRatio either) and in extent (it covers only the ground layer,
 * see below) — and stretched back up here. The haze is pure blur, so the upscale is
 * invisible, and the browser blends about a third of the CSS pixels instead of
 * 225% of them on a retina screen.
 */

[data-fx-dust-cloud] {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  mix-blend-mode: screen;
}

/* Pinned to the bottom edge, and only as tall as the ground layer — the height is
   set inline by dust-cloud.js from data-height, because that is where the band is
   known. Above it the density mask is zero, so a full-height canvas would blend
   pixels that are guaranteed to come out empty. */
[data-fx-dust-cloud] canvas {
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
}

/* No reduced-motion rule on purpose: dust-cloud.js renders a single still frame
   there, and a static haze is just part of the picture. */