/*
 * Textures — paints the `surface-texture--*` class (inc/textures.php).
 *
 * The texture is an ::after layer between the surface and the content. Its SVG
 * is a MASK, so the file's own colours never show: the ink is
 * --texture-color, the contrast by default, so a texture lightens a dark
 * section and darkens a light one with no per-scheme tuning.
 *
 * A texture sets only:
 *   --texture-mask     url() of the SVG tile
 *   --texture-size     tile size
 *   --texture-opacity  strength (default .06)
 *   --texture-color    ink (optional, default contrast)
 */

/* Noise: fine grain, the PHP framework's pattern--noise. Breaks up a flat or
   gradient surface (and gradient banding) without reading as a pattern.
   Strong is twice the strength: enough to set two adjacent sections of the
   same colour apart. */
:where(.surface-texture--noise, .surface-texture--noise-strong) {
	--texture-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)' opacity='0.15'/%3E%3C/svg%3E");
	--texture-size: 500px 500px;
	--texture-opacity: 0.4;
}

:where(.surface-texture--noise-strong) {
	--texture-opacity: 0.8;
}

[class*="surface-texture--"] {
	position: relative;
	isolation: isolate;
}

[class*="surface-texture--"]::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-color: var(--texture-color, var(--wp--preset--color--contrast));
	opacity: var(--texture-opacity, 0.06);
	mask-image: var(--texture-mask, none);
	mask-size: var(--texture-size, 100px 100px);
	mask-repeat: repeat;
}

/*
 * Cover paints its media and overlay as children (z-index 0 and 1), so a -1
 * layer would sit under the photo. Lift the texture over the overlay and the
 * content over the texture.
 */
.wp-block-cover[class*="surface-texture--"]::after {
	z-index: 1;
}

.wp-block-cover[class*="surface-texture--"] > .wp-block-cover__inner-container {
	z-index: 2;
}