/* ntvrli design system — material
   Flat sRGB fills read as flat. These give every surface tooth, so a colour
   field behaves like inked paper rather than a rectangle. Applied over the
   whole document, above content, never interactive. */

.grain,
.vignette {
  position: fixed;
  z-index: 60;
  pointer-events: none;
}

.grain {
  inset: -50%;
  opacity: .052;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain-drift .8s steps(3) infinite;
  will-change: transform;
}

@keyframes grain-drift {
  0%   { transform: translate(0, 0); }
  33%  { transform: translate(-1.4%, .8%); }
  66%  { transform: translate(.9%, -1.3%); }
  100% { transform: translate(0, 0); }
}

.vignette {
  inset: 0;
  background: radial-gradient(ellipse at 50% 44%, transparent 46%, rgb(20 16 14 / 34%) 100%);
  mix-blend-mode: multiply;
}

@media (prefers-reduced-motion: reduce) {
  .grain { animation: none; }
}