/* Film Grain. The section keeps the site's own look; this adds one see-through layer on top of it.
   Color: set --fx-grain-color on :root or on a section (white suits dark sections, a dark color suits light ones).
   Strength: set --fx-grain-opacity on a section to override SETTINGS.opacity for that section. */
/* Colors, fonts, spacing and corners: the grain follows the section's own corners and has no text. */
.fx-grain-host { position: relative; }
.fx-grain {
  position: absolute;
  inset: 0;
  z-index: var(--fx-grain-z, 1);
  overflow: hidden;
  border-radius: inherit;
  /* The layer can never catch a click, tap or scroll */
  pointer-events: none;
  /* The strength from the settings, unless the section sets its own */
  opacity: var(--fx-grain-opacity, var(--fx-grain-opacity-set, .1));
}
.fx-grain-noise {
  position: absolute;
  /* Larger than the section, so it can shift about without showing an edge */
  inset: -60px;
  background-color: var(--fx-grain-color, #fff);
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
}
.fx-grain.is-moving .fx-grain-noise { animation: fx-grain-shift 900ms steps(1) infinite; }
.fx-grain.is-off .fx-grain-noise { animation-play-state: paused; }
@keyframes fx-grain-shift {
  0% { transform: translate(0, 0); }
  17% { transform: translate(-23px, 31px); }
  33% { transform: translate(37px, -19px); }
  50% { transform: translate(-41px, -29px); }
  67% { transform: translate(29px, 43px); }
  83% { transform: translate(-13px, -47px); }
}

@media (prefers-reduced-motion: reduce) {
  .fx-grain .fx-grain-noise { animation: none !important; }
}