/*
 * light-seam (CSS) — companion to light-seam.js. Load both in Webflow.
 *
 * The element is an overlay on a still image: drop it into the image's wrapper
 * (the wrapper needs position: relative). It only ever brightens the photo —
 * mix-blend-mode: screen means a fully black pixel here changes nothing.
 *
 * Both moving parts (the breathing glow along the seam and the drifting dust)
 * live in the canvas, because both are clipped by a mask sampled off the picture
 * and CSS cannot do that. So this file is layout only.
 */

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

[data-fx-light-seam] canvas {
  display: block;
  width: 100%;
  height: 100%;
}

@media (prefers-reduced-motion: reduce) {
  /* light-seam.js draws nothing at all here — the picture stays as it is. */
  [data-fx-light-seam] { display: none; }
}