/* ==========================================================================
   Textures — Ilya Davydkin personal brand
   The scrapbook grain: a soft monochrome fractal-noise overlay that gives the
   cream surfaces their tactile, hand-assembled feel. Born in the Instagram kit,
   promoted here so anything in the system can use it the same way.

   THREE ways to use it:
   1. Token URL          background-image: var(--texture-scrapbook);
   2. One-shot surface   background: var(--scrapbook-bg);   (cream + grain baked in)
   3. Standalone files   assets/textures/scrapbook.svg (tile)
                         assets/textures/scrapbook-card-1080x1350.svg (full card)

   Recipe (locked): 360px tile · 13% opacity · multiply blend · on CREAM only.
   Keep it off forest/dark surfaces — it reads as noise there.
   ========================================================================== */

:root {
  /* The raw grain tile as a data-URI (no file dependency) */
  --texture-scrapbook:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.014 0.09' numOctaves='3' seed='7' 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"); /* @kind other */

  /* Tuning knobs (the locked defaults) */
  --texture-scrapbook-size:     360px;
  --texture-scrapbook-opacity:  0.13; /* @kind other */

  /* One-shot "scrapbook background": cream base with the grain composited on top.
     Use as a single background shorthand on any light surface. */
  --scrapbook-bg:
    var(--texture-scrapbook) repeat,
    var(--cream);
}

/* Helper class: drop `scrapbook-surface` on a positioned element to get the
   grain as a proper multiply overlay (matches the Instagram kit exactly). */
.scrapbook-surface { position: relative; background-color: var(--cream); }
.scrapbook-surface > .scrapbook-grain,
.scrapbook-surface::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: var(--texture-scrapbook);
  background-size: var(--texture-scrapbook-size);
  opacity: var(--texture-scrapbook-opacity);
  mix-blend-mode: multiply;
}