html, body {
  background-color: #d5d2cb;
  background-image: none;
}

body:after {
  content: "";
  pointer-events: none;
  z-index: 2147483647;
  opacity: .8;
  mix-blend-mode: normal;
  will-change: transform;
  background-image: url("assets/live-grain.webp");
  background-repeat: repeat;
  background-size: auto;
  animation: .5s steps(6, end) infinite site-live-grain;
  position: fixed;
  inset: -50%;
}

@keyframes site-live-grain {
  0%, 100% {
    transform: translate(0);
  }

  10% {
    transform: translate(-5%, -10%);
  }

  30% {
    transform: translate(3%, -15%);
  }

  50% {
    transform: translate(12%, 9%);
  }

  70% {
    transform: translate(9%, 4%);
  }

  90% {
    transform: translate(-1%, 7%);
  }
}

@media (prefers-reduced-motion: reduce) {
  body:after {
    will-change: auto;
    animation: none;
  }
}