/* ============================================================
   stxrm808 — FILM GRAIN + VIGNETTE
   Subtiler kinohafter Overlay-Layer. Liegt unter Custom-Cursor
   (z 9998) und Feuer-Trail, ueber dem Content. pointer-events:none.
   ============================================================ */

#filmGrain {
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  pointer-events: none;
  z-index: 9996;
  opacity: 0.055;
  will-change: transform;
  background-repeat: repeat;
  /* feines fractalNoise (kein externes Asset) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grainShift 0.5s steps(1) infinite;
}

@keyframes grainShift {
  0%   { transform: translate(0, 0); }
  10%  { transform: translate(-3%, -4%); }
  20%  { transform: translate(-8%, 2%); }
  30%  { transform: translate(4%, -6%); }
  40%  { transform: translate(-5%, 5%); }
  50%  { transform: translate(6%, 3%); }
  60%  { transform: translate(-2%, -7%); }
  70%  { transform: translate(7%, -2%); }
  80%  { transform: translate(-6%, 6%); }
  90%  { transform: translate(3%, 4%); }
  100% { transform: translate(0, 0); }
}

#filmVignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9995;
  box-shadow: inset 0 0 170px 44px rgba(0, 0, 0, 0.42);
}

/* Reduced-Motion: Grain statisch (kein Flackern) */
@media (prefers-reduced-motion: reduce) {
  #filmGrain { animation: none; }
}