/* ============================================================================
   grain.css — fixed full-screen noise overlay to break digital flatness.

   Implementation:
     - inline SVG (data: URL) with feTurbulence is the lightest grain source
       (no extra HTTP request, fully procedural, sub-1KB).
     - position: fixed + pointer-events: none so it never interferes with
       clicks or scroll.
     - mix-blend-mode: overlay so the texture lifts highlights and deepens
       shadows without lifting the average brightness of the page.
     - opacity 0.045 keeps it subtle — visible up close, ignored from afar.
     - z-index high enough to sit on top of overlays but below the modal
       (which is z: 100; we use 90 here) so it doesn't fight focus traps.

   Disabled under prefers-reduced-motion (the grain is static so it's not
   a "motion" feature per se, but reduced-motion users typically prefer
   minimal visual noise too).
   ============================================================================ */

#grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 90;
  /* Tuned down from 0.045 → 0.022 after user feedback that the overall
     scroll-video felt "grainy". The grain is meant to be a subtle texture
     break, NOT a visible film effect. With HD (1920×1080) source frames
     and DPR-aware canvas sizing, the rest of the scene is now crisp, so
     the grain can be minimal while still doing its anti-flatness job. */
  opacity: 0.022;
  mix-blend-mode: overlay;
  /* Inline SVG noise. baseFrequency 0.9 gives film-grain texture (vs 0.65
     which feels like static noise). 256×256 tile is the sweet spot for
     visible grain without obvious tiling. */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='256' height='256'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.4 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 256px 256px;
  /* iOS Safari does not support animated mix-blend on fixed elements
     reliably; we keep the texture static which is what we want anyway. */
}

@media (prefers-reduced-motion: reduce) {
  #grain { display: none; }
}

/* Print: noise is decorative, hide it. */
@media print {
  #grain { display: none; }
}