/* ═══════════════════════════════════════════════════════════════════════════
   MARBLELENS V3 · PAPER — the material surface

   One reusable material class. The sheet must read as a real premium
   editorial stock, not a beige fill: aged ivory base, fibre you find when
   you lean in, a slow tonal drift across the page, and the faintest print
   contamination. Quiet at reading distance, physical on inspection.

   HOW IT IS BUILT — five stacked backgrounds on one element, all inline SVG
   turbulence tiles (no requests, resolution-independent on Retina, and each
   tile uses stitchTiles so the repeat has no visible seam). Frequencies are
   deliberately spread an order of magnitude apart so no two layers beat
   against each other into a visible pattern:

     specks   rare dark contamination      ~720px tile, thresholded noise
     fibre    fine cross grain             ~260px tile, high frequency
     fibre    main paper tooth             ~340px tile
     tonal    slow light drift             ~1200px tile, near-zero frequency
     tonal    slow shadow drift            ~1200px tile, second seed

   Alpha shaping lives in each tile's feColorMatrix (alpha = k·noise − bias),
   so the strength is baked and cheap — nothing here runs a filter at paint
   time. Depth (vignette + top light) is a separate fixed overlay because it
   belongs to the PAGE, not to every sheet.

   NOT WANTED HERE, by the brief: parchment brown, grunge, distress,
   decorative torn edges. The aging is in the tone, not in damage.
   ═══════════════════════════════════════════════════════════════════════════ */

.paper-material {
  background-color: var(--paper);
  background-image:
    /* print contamination — rare, small, graphite-toned */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='720' height='720'><filter id='s'><feTurbulence type='fractalNoise' baseFrequency='0.18' numOctaves='2' seed='5' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0.15 0 0 0 0 0.14 0 0 0 0 0.12 2.4 0 0 0 -1.9'/></filter><rect width='720' height='720' filter='url(%23s)'/></svg>"),
    /* fine cross grain */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' seed='29' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0.18 0 0 0 0 0.165 0 0 0 0 0.13 0.3 0 0 0 -0.09'/></filter><rect width='260' height='260' filter='url(%23g)'/></svg>"),
    /* main paper tooth */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='340' height='340'><filter id='t'><feTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='3' seed='11' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0.17 0 0 0 0 0.155 0 0 0 0 0.125 0.35 0 0 0 -0.1'/></filter><rect width='340' height='340' filter='url(%23t)'/></svg>"),
    /* slow warm light drift */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='1200'><filter id='l'><feTurbulence type='fractalNoise' baseFrequency='0.008' numOctaves='2' seed='3' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 0.99 0 0 0 0 0.955 0.1 0 0 0 -0.02'/></filter><rect width='1200' height='1200' filter='url(%23l)'/></svg>"),
    /* slow shadow drift */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='1200'><filter id='d'><feTurbulence type='fractalNoise' baseFrequency='0.008' numOctaves='2' seed='17' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0.35 0 0 0 0 0.3 0 0 0 0 0.22 0.12 0 0 0 -0.025'/></filter><rect width='1200' height='1200' filter='url(%23d)'/></svg>");
  background-size: 720px 720px, 260px 260px, 340px 340px, 1200px 1200px, 1200px 1200px;
  /* offset origins so tile corners never line up across layers */
  background-position: 0 0, 47px 89px, 13px 31px, 0 0, 611px 233px;
}

/* the page ground — one fixed sheet behind everything */
.v3-ground {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}

/* physical depth belongs to the page, not the sheets: a restrained top
   light and a corner-weighted vignette. Values are deliberately at the
   edge of perception — the page must never read as spotlit. */
.v3-vignette {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 253, 246, 0.16), rgba(255, 253, 246, 0) 18%),
    radial-gradient(ellipse 120% 90% at 50% 42%,
      rgba(31, 31, 28, 0) 62%,
      rgba(31, 31, 28, 0.035) 84%,
      rgba(31, 31, 28, 0.075) 100%);
}