/* BIDROOM — paper grain + texture layer.
   Three stacked effects, all pointer-events:none so nothing is ever blocked:
     1. a fixed fine-grain overlay across the whole page (printed-paper feel)
     2. a slow-drifting coarser grain so it never looks like a static texture
     3. a soft pool of darker grain that follows the cursor
   All of it is disabled under prefers-reduced-motion except the base grain. */

/* ---------------------------------------------------------------- 1. base grain */
.grain-base,
.grain-drift,
.grain-cursor {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9990;
}

.grain-base {
  opacity: 0.052;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------- 2. drifting grain */
.grain-drift {
  opacity: 0.045;
  mix-blend-mode: multiply;
  width: 200%;
  height: 200%;
  inset: -50% auto auto -50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");
  animation: grain-drift 7s steps(6) infinite;
}
@keyframes grain-drift {
  0%   { transform: translate(0, 0); }
  16%  { transform: translate(-3%, 2%); }
  33%  { transform: translate(2%, -3%); }
  50%  { transform: translate(-2%, -2%); }
  66%  { transform: translate(3%, 1%); }
  83%  { transform: translate(-1%, 3%); }
  100% { transform: translate(0, 0); }
}

/* --------------------------------------------------------- 3. cursor grain pool */
/* A soft radial mask of heavier, darker grain that tracks the pointer. The
   position comes from --mx/--my set in grain.js. */
.grain-cursor {
  opacity: 0;
  mix-blend-mode: multiply;
  /* coarser, higher-contrast noise than the base layer so the pool reads heavy */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.62' numOctaves='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2.1' intercept='-0.5'/%3E%3CfeFuncG type='linear' slope='2.1' intercept='-0.5'/%3E%3CfeFuncB type='linear' slope='2.1' intercept='-0.5'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E");
  /* wider, softer falloff = fuzzier edge, no visible circle */
  -webkit-mask-image: radial-gradient(circle 320px at var(--mx, 50%) var(--my, 50%), #000 0%, rgba(0,0,0,.86) 26%, rgba(0,0,0,.5) 50%, rgba(0,0,0,.18) 72%, transparent 92%);
  mask-image: radial-gradient(circle 320px at var(--mx, 50%) var(--my, 50%), #000 0%, rgba(0,0,0,.86) 26%, rgba(0,0,0,.5) 50%, rgba(0,0,0,.18) 72%, transparent 92%);
  transition: opacity 0.5s ease;
}
body.grain-active .grain-cursor { opacity: 0.72; }

/* second, larger halo of softer grain so the pool has depth and blurs outward */
.grain-cursor-soft {
  position: fixed; inset: 0; pointer-events: none; z-index: 9990;
  opacity: 0; mix-blend-mode: multiply;
  filter: blur(2.5px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.32' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
  -webkit-mask-image: radial-gradient(circle 480px at var(--mx, 50%) var(--my, 50%), #000 0%, rgba(0,0,0,.45) 45%, transparent 88%);
  mask-image: radial-gradient(circle 480px at var(--mx, 50%) var(--my, 50%), #000 0%, rgba(0,0,0,.45) 45%, transparent 88%);
  transition: opacity 0.6s ease;
}
body.grain-active .grain-cursor-soft { opacity: 0.4; }

/* on ink-dark surfaces multiply would vanish, so lift those panels slightly */
.sec.dark, .panel.trade, .panel.payday, body.page-dark {
  position: relative;
}

/* --------------------------------------------------------------- vignette */
.grain-vignette {
  position: fixed; inset: 0; pointer-events: none; z-index: 9989;
  background: radial-gradient(ellipse at center, transparent 58%, rgba(5,5,5,0.06) 100%);
}

@media (prefers-reduced-motion: reduce) {
  .grain-drift { animation: none; }
  .grain-cursor, .grain-cursor-soft { display: none; }
}