/* Treatly — paper grain
 *
 * One fixed overlay across the viewport rather than a background-image on
 * every surface. Two reasons: it lands on cards, sheets, headers, the nav and
 * the page alike without hunting down each one, and there is a single number
 * to turn it up, down or off (--paper-alpha) instead of forty.
 *
 * It sits above everything (the app's highest z-index is 100050) and takes no
 * pointer events, so nothing underneath changes behaviour — a tap goes
 * straight through it.
 *
 * The grain is fractal noise plus a fine fibre weave, both inline SVG/gradient,
 * so there are no image assets to load.
 */

:root {
  /* Turn the whole effect down or off from here. */
  --paper-alpha: 0.055;
  --paper-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
  /* Fibres: two very fine rules at right angles, the way laid paper looks up
     close. Kept fainter than the noise or it reads as graph paper. */
  --paper-fibre:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.35) 0 1px, transparent 1px 4px);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  pointer-events: none;
  opacity: var(--paper-alpha);
  background-image: var(--paper-noise), var(--paper-fibre);
  background-size: 200px 200px, 3px 3px, 4px 4px;
  background-repeat: repeat;
  /* Multiply darkens where the grain is, which is what paper does to light. */
  mix-blend-mode: multiply;
}

/* On a dark ground, multiplying a dark grain does nothing you can see — the
   grain has to add light instead, and much less of it. */
[data-theme="dark"] body::after {
  --paper-alpha: 0.04;
  background-image: var(--paper-noise);
  background-size: 200px 200px;
  mix-blend-mode: overlay;
}

/* Someone reading at 200% does not want a texture fighting the type, and a
   grain is the first thing to go when contrast matters. */
@media (prefers-contrast: more) {
  body::after { display: none; }
}