/* grain.css — animated SVG noise at 3% opacity for analog warmth */
.grain-overlay {
  position: fixed; inset: 0; z-index: 5; pointer-events: none;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  animation: grain-shift 0.5s steps(4) infinite;
}
@keyframes grain-shift {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-2%, -1%); }
  50% { transform: translate(1%, 2%); }
  75% { transform: translate(-1%, -2%); }
  100% { transform: translate(2%, 1%); }
}
/* Reduce grain on mobile — static, fainter */
@media (max-width: 768px) {
  .grain-overlay { opacity: 0.02; animation: none; }
}