/* Film grain overlay — CSS-only animated noise */
.grain-overlay {
  position: fixed;
  inset: -50%;
  width: 200%;
  height: 200%;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.038;
  animation: grain 0.18s steps(1) infinite;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 256px 256px;
}

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