/* MAZEandMIRA — a quiet, site-wide matte paper surface.
   Standalone decorative layer: no layout, typography or image crop overrides. */
:root {
  --mm-grain-opacity: 0.18;
  --mm-grain-duration: 24s;
}

.mm-site-grain {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: block;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  opacity: var(--mm-grain-opacity);
  mix-blend-mode: soft-light;
}

.mm-site-grain::before {
  content: "";
  position: absolute;
  inset: -12px;
  background-image: url("/assets/matte-grain-20260910.png");
  background-repeat: repeat;
  background-size: 192px 192px;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  animation: mm-paper-drift var(--mm-grain-duration) ease-in-out infinite;
  animation-play-state: paused;
}

.mm-site-grain.is-moving::before {
  animation-play-state: running;
}

/* Only a few pixels of movement. No opacity pulse, flicker, or film scratches. */
@keyframes mm-paper-drift {
  0%, 100% { transform: translate3d(0, 0, 0); }
  25% { transform: translate3d(-4px, 2px, 0); }
  50% { transform: translate3d(3px, -3px, 0); }
  75% { transform: translate3d(-2px, -5px, 0); }
}

/* Texture remains, but motion stops for a reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
  .mm-site-grain::before { animation: none; transform: none; }
}

@media (forced-colors: active) {
  .mm-site-grain { display: none; }
}

@media print {
  .mm-site-grain { display: none; }
}