/**
 * Wedwebs Paper Texture - tintable paper relief for Elementor Containers.
 *
 * Each class lays a paper tile over the element on its ::before, blended into
 * whatever sits underneath. The tiles are greyscale light and shade only,
 * centred on 50% grey, which the blend modes used here treat as "no change".
 * So one tile works on any colour, gradient or photo and does not shift it.
 * Pick a paper under a Container's Advanced > Paper Texture, or add one class
 * by hand in "CSS Classes":
 *
 *     ww-paper-cotton | ww-paper-handmade | ww-paper-vellum | ww-paper-linen
 *     ww-paper-laid   | ww-paper-parchment | ww-paper-kraft
 *
 * Optional second class:
 *
 *     ww-paper-over    grain runs over the content too, like a print
 *
 * Everything else is a custom property set on the element. Each one falls
 * back to the paper's own default, so the classes look right with none set:
 *
 *     --ww-paper-strength   how visible the relief is, 0 to 100
 *     --ww-paper-scale      grain size, as a % of its natural size (100)
 *     --ww-paper-cloud      soft light and dark patches, 0 to 100
 *     --ww-paper-blend      hard-light (default), soft-light or overlay
 *
 * Why ::before: Elementor keeps the Container's Background Overlay there and
 * already stacks it above the background and below the content, which is
 * exactly where paper belongs. ::after is left free for Wedwebs Frame. The
 * cost is that a Container shows either paper or a Background Overlay, not
 * both: paper wins, which is why the declarations below are !important.
 *
 * The tiles are built by tools/build-tiles.php. No JavaScript, no animation.
 */

/* The layer needs a positioned parent. Containers and widgets already are;
   :where() keeps this at zero specificity so it never overrides them. */

:where(.ww-paper-cotton, .ww-paper-handmade, .ww-paper-vellum, .ww-paper-linen, .ww-paper-laid, .ww-paper-parchment, .ww-paper-kraft) {
	position: relative;
}

/*
 * Shared layer.
 *
 * Three backgrounds, top to bottom: the paper tile, a grey veil, the cloud.
 * The veil thins the cloud out (a more opaque veil means fainter patches),
 * then the tile is overlaid on the result, so the relief gets gently lighter
 * and darker across the sheet. The two images repeat at unrelated sizes, which
 * hides the repeat of either one. The whole layer is then blended into the
 * element at the chosen strength.
 */

.ww-paper-cotton::before,
.ww-paper-handmade::before,
.ww-paper-vellum::before,
.ww-paper-linen::before,
.ww-paper-laid::before,
.ww-paper-parchment::before,
.ww-paper-kraft::before {
	--ww-paper-veil: rgb(128 128 128 / calc(1 - var(--ww-paper-cloud, var(--ww-paper-cloud-default)) / 100));
	--ww-paper-tile-size: calc(clamp(50, var(--ww-paper-scale, 100), 200) * var(--ww-paper-unit));

	content: "" !important;
	pointer-events: none;
	background-color: transparent !important;
	background-repeat: repeat !important;
	background-position: 0 0 !important;
	background-attachment: scroll !important;
	background-size: var(--ww-paper-tile-size) var(--ww-paper-tile-size), auto, 870px 870px !important;
	background-blend-mode: overlay, normal, normal !important;
	mix-blend-mode: var(--ww-paper-blend, hard-light) !important;
	opacity: calc(var(--ww-paper-strength, var(--ww-paper-strength-default)) * 0.006) !important;
	filter: none !important;
	transition: none !important;
}

/* Containers get the layer's box from Elementor (it follows their border and
   radius). Anything else needs it spelled out. */

.ww-paper-cotton:not(.e-con)::before,
.ww-paper-handmade:not(.e-con)::before,
.ww-paper-vellum:not(.e-con)::before,
.ww-paper-linen:not(.e-con)::before,
.ww-paper-laid:not(.e-con)::before,
.ww-paper-parchment:not(.e-con)::before,
.ww-paper-kraft:not(.e-con)::before {
	display: block;
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

/* Over the content: photos, florals and type take the grain as well. */

.ww-paper-over::before {
	z-index: 3;
}

/*
 * The papers. Each sets its tile, how many CSS pixels 1% of Grain Size is
 * (2.56 shows the 512px tile at 256px, sharp on 2x screens), and its default
 * strength and cloud.
 */

/* COTTON - fine, even invitation stock with the odd faint fibre. */
.ww-paper-cotton::before {
	--ww-paper-unit: 2.56px;
	--ww-paper-strength-default: 40;
	--ww-paper-cloud-default: 25;
	background-image: url("../tiles/cotton.webp"), linear-gradient(var(--ww-paper-veil), var(--ww-paper-veil)), url("../tiles/cloud.webp") !important;
}

/* HANDMADE - lumpy cotton rag, heavier tooth, long fibres. */
.ww-paper-handmade::before {
	--ww-paper-unit: 3.6px;
	--ww-paper-strength-default: 45;
	--ww-paper-cloud-default: 35;
	background-image: url("../tiles/handmade.webp"), linear-gradient(var(--ww-paper-veil), var(--ww-paper-veil)), url("../tiles/cloud.webp") !important;
}

/* VELLUM - smooth and near-translucent, a soft cloudy body. */
.ww-paper-vellum::before {
	--ww-paper-unit: 2.56px;
	--ww-paper-strength-default: 28;
	--ww-paper-cloud-default: 40;
	background-image: url("../tiles/vellum.webp"), linear-gradient(var(--ww-paper-veil), var(--ww-paper-veil)), url("../tiles/cloud.webp") !important;
}

/* LINEN - an embossed plain weave of uneven threads. */
.ww-paper-linen::before {
	--ww-paper-unit: 2.56px;
	--ww-paper-strength-default: 40;
	--ww-paper-cloud-default: 20;
	background-image: url("../tiles/linen.webp"), linear-gradient(var(--ww-paper-veil), var(--ww-paper-veil)), url("../tiles/cloud.webp") !important;
}

/* LAID - fine ribs crossed by faint, widely spaced chain lines. */
.ww-paper-laid::before {
	--ww-paper-unit: 2.56px;
	--ww-paper-strength-default: 40;
	--ww-paper-cloud-default: 20;
	background-image: url("../tiles/laid.webp"), linear-gradient(var(--ww-paper-veil), var(--ww-paper-veil)), url("../tiles/cloud.webp") !important;
}

/* PARCHMENT - aged skin: mottling and faint veins, with strong clouding. */
.ww-paper-parchment::before {
	--ww-paper-unit: 4.2px;
	--ww-paper-strength-default: 45;
	--ww-paper-cloud-default: 60;
	background-image: url("../tiles/parchment.webp"), linear-gradient(var(--ww-paper-veil), var(--ww-paper-veil)), url("../tiles/cloud.webp") !important;
}

/* KRAFT - rough fibrous sheet with a grain direction and dark specks. */
.ww-paper-kraft::before {
	--ww-paper-unit: 3.2px;
	--ww-paper-strength-default: 45;
	--ww-paper-cloud-default: 35;
	background-image: url("../tiles/kraft.webp"), linear-gradient(var(--ww-paper-veil), var(--ww-paper-veil)), url("../tiles/cloud.webp") !important;
}

/*
 * Strength classes from 1.3, kept so Containers saved back then (and anyone
 * who typed them by hand) still get a lighter or heavier sheet. The Strength
 * slider sets the same variable on the element and takes priority.
 */

.ww-paper-strength-subtle {
	--ww-paper-strength: 28;
}

.ww-paper-strength-strong {
	--ww-paper-strength: 85;
}