/* fx.css · cinematic/grain, film grain over a photograph · owner: Lizzy East · all rights reserved */

/* A tile of noise (grain.svg, beside this file) over the photograph, under the text.
   It moves in small jumps, never flashes, and holds still when paused. */
[data-fx~="cinematic/grain"] { overflow: clip; }
[data-fx~="cinematic/grain"] > [data-fx-ambient] {
  position: absolute;
  inset: -50%;
  z-index: -1;
  pointer-events: none;
  background: url("grain.svg") 0 0 / 180px 180px;
  opacity: var(--fx-grain, 0.28);
  mix-blend-mode: overlay;
}
html.fx-armed [data-fx~="cinematic/grain"] > [data-fx-ambient] {
  animation: fx-grain var(--fx-grain-dur, 1.2s) steps(6) infinite;
}
@keyframes fx-grain {
  0% { translate: 0 0; }
  20% { translate: -8% 5%; }
  40% { translate: 6% -9%; }
  60% { translate: -4% 11%; }
  80% { translate: 10% 3%; }
  100% { translate: 0 0; }
}