/**
 * Wedwebs Paper Texture — image-free paper grain for Elementor Containers.
 *
 * Each class paints a CSS-generated noise layer (inline SVG feTurbulence —
 * zero HTTP requests, resolution-independent) ON TOP of the container's own
 * background-color, blended so the grain takes on whatever colour the couple
 * chose. Set a background colour on the Container first, then add one class
 * in the Container's "CSS Classes" field:
 *
 *     ww-paper-cotton | ww-paper-handmade | ww-paper-vellum | ww-paper-linen
 *     ww-paper-laid   | ww-paper-parchment | ww-paper-kraft
 *
 * Backgrounds always render behind the Container's content, and no
 * pseudo-elements are used, so this never collides with Elementor's own
 * background / overlay layers. To use a real photo texture instead, just use
 * Elementor's native Container background — these classes are the lightweight
 * alternative, not a replacement for it.
 *
 * No JavaScript. No animation.
 */

/* Shared paint behaviour. */
.ww-paper-cotton,
.ww-paper-handmade,
.ww-paper-vellum,
.ww-paper-linen,
.ww-paper-laid,
.ww-paper-parchment,
.ww-paper-kraft {
	background-repeat: repeat;
	background-position: center;
}

/*
 * COTTON — the default fine, even invitation-stock grain.
 * Fine fractal noise, desaturated, low contrast, blended soft-light so it
 * gently lightens and darkens the underlying colour like paper fibre.
 */
.ww-paper-cotton {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='0.35' intercept='0.32'/%3E%3CfeFuncG type='linear' slope='0.35' intercept='0.32'/%3E%3CfeFuncB type='linear' slope='0.35' intercept='0.32'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E");
	background-blend-mode: soft-light;
}

/*
 * HANDMADE — coarser, mottled cotton-rag look.
 * Lower frequency = larger fibre clumps; multiply blend deepens the grain so
 * it reads as a heavier, more organic stock.
 */
.ww-paper-handmade {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='h'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.4' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='0.5' intercept='0.28'/%3E%3CfeFuncG type='linear' slope='0.5' intercept='0.28'/%3E%3CfeFuncB type='linear' slope='0.5' intercept='0.28'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23h)'/%3E%3C/svg%3E");
	background-blend-mode: multiply;
}

/*
 * VELLUM — very fine, smooth, near-translucent finish.
 * High frequency + very low contrast = a whisper of grain for a polished,
 * semi-transparent vellum sheet.
 */
.ww-paper-vellum {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='v'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.3' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='0.18' intercept='0.41'/%3E%3CfeFuncG type='linear' slope='0.18' intercept='0.41'/%3E%3CfeFuncB type='linear' slope='0.18' intercept='0.41'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23v)'/%3E%3C/svg%3E");
	background-blend-mode: soft-light;
}

/*
 * LINEN — woven approximation.
 * A faint warp/weft grid (two repeating-linear-gradients) over fibre noise.
 * This is a CSS approximation; for a true photographic linen weave, use a
 * real seamless image via Elementor's native Container background instead.
 *
 * Layer order (top -> bottom): noise, vertical threads, horizontal threads.
 */
.ww-paper-linen {
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='l'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='0.28' intercept='0.36'/%3E%3CfeFuncG type='linear' slope='0.28' intercept='0.36'/%3E%3CfeFuncB type='linear' slope='0.28' intercept='0.36'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23l)'/%3E%3C/svg%3E"),
		repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.045) 0, rgba(0, 0, 0, 0.045) 1px, transparent 1px, transparent 4px),
		repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.045) 0, rgba(0, 0, 0, 0.045) 1px, transparent 1px, transparent 4px);
	background-blend-mode: soft-light, normal, normal;
}

/*
 * LAID — classic formal/traditional stock.
 * Strongly directional fine ridge lines ("laid lines"), crossed by fainter,
 * widely-spaced perpendicular "chain lines", over a whisper of fibre. Unlike
 * linen's even grid, laid reads as one dominant direction.
 *
 * Layer order (top -> bottom): fibre noise, laid lines, chain lines.
 */
.ww-paper-laid {
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='la'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='0.2' intercept='0.4'/%3E%3CfeFuncG type='linear' slope='0.2' intercept='0.4'/%3E%3CfeFuncB type='linear' slope='0.2' intercept='0.4'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23la)'/%3E%3C/svg%3E"),
		repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.05) 0, rgba(0, 0, 0, 0.05) 1px, transparent 1px, transparent 3px),
		repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.04) 0, rgba(0, 0, 0, 0.04) 1px, transparent 1px, transparent 26px);
	background-blend-mode: soft-light, normal, normal;
}

/*
 * PARCHMENT — aged, cloudy mottling.
 * The one large-scale option: very low-frequency turbulence makes soft
 * light/dark blotches across the surface, with a fine grain layered on top
 * for tooth. Suits vintage / old-world themes.
 *
 * Layer order (top -> bottom): cloudy mottle, fine grain.
 */
.ww-paper-parchment {
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='pa'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='0.7' intercept='0.2'/%3E%3CfeFuncG type='linear' slope='0.7' intercept='0.2'/%3E%3CfeFuncB type='linear' slope='0.7' intercept='0.2'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23pa)'/%3E%3C/svg%3E"),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='pg'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='0.22' intercept='0.39'/%3E%3CfeFuncG type='linear' slope='0.22' intercept='0.39'/%3E%3CfeFuncB type='linear' slope='0.22' intercept='0.39'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23pg)'/%3E%3C/svg%3E");
	background-blend-mode: soft-light, soft-light;
}

/*
 * KRAFT — recycled / rustic stock.
 * A medium fibre grain with sparse darker flecks (a turbulence layer reduced
 * to occasional specks via a discrete alpha transfer), multiplied in so the
 * flecks read as bits of pulp. Best over a tan/brown container colour.
 *
 * Layer order (top -> bottom): flecks, fibre grain.
 */
.ww-paper-kraft {
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='ks'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.45' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='0 0 0 0 0 0 0 0.5'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23ks)'/%3E%3C/svg%3E"),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='kf'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='0.45' intercept='0.3'/%3E%3CfeFuncG type='linear' slope='0.45' intercept='0.3'/%3E%3CfeFuncB type='linear' slope='0.45' intercept='0.3'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23kf)'/%3E%3C/svg%3E");
	background-blend-mode: multiply, soft-light;
}