/*!
 * Archivo del Desierto — textures
 *
 * Every texture is generated in CSS: no image requests, no sprite, nothing to preload. All of
 * them sit near the threshold of perception — you should notice the paper is not flat, not
 * that there is a filter on it.
 *
 * Ordered before `components` on purpose; see the note on .tx below.
 */

@layer textures {

	/* ══════════════════════════════════════════════════════════════════════
	   Textures
	   ══════════════════════════════════════════════════════════════════════ */

	/*
	 * `.tx` supplies the containing block its ::after needs. This lives in the `textures`
	 * layer, declared BEFORE `components`, because layer order outranks specificity: with
	 * these rules in `utilities` (which comes last) `.tx { position: relative }` silently
	 * beat `.nav-drawer { position: fixed }` and the mobile menu stopped covering the
	 * viewport. Lowering specificity does not help — only the layer does.
	 */
	.tx { position: relative; isolation: isolate; }

	.tx::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		pointer-events: none;
	}

	/* Fine photographic grain, via fractal noise. */
	.tx-grain::after {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
		opacity: 0.05;
		mix-blend-mode: multiply;
	}

	/* Coarser, softer film grain for dark surfaces. */
	.tx-film::after {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23f)' opacity='0.6'/%3E%3C/svg%3E");
		opacity: 0.055;
		mix-blend-mode: screen;
	}

	/* Laid paper: the faint horizontal chain lines of archival stock. */
	.tx-paper::after {
		background-image:
			repeating-linear-gradient(
				0deg,
				color-mix(in oklab, var(--color-sand-dark) 26%, transparent) 0 1px,
				transparent 1px 4px
			),
			repeating-linear-gradient(
				90deg,
				color-mix(in oklab, var(--color-sand-dark) 12%, transparent) 0 1px,
				transparent 1px 28px
			);
		opacity: 0.32;
	}

	/* Contour lines: a survey map, barely there. */
	.tx-map::after {
		background-image:
			repeating-radial-gradient(
				circle at 18% 82%,
				transparent 0 38px,
				color-mix(in oklab, var(--color-sand-dark) 40%, transparent) 38px 39px
			),
			repeating-radial-gradient(
				circle at 84% 12%,
				transparent 0 52px,
				color-mix(in oklab, var(--color-sand-dark) 30%, transparent) 52px 53px
			);
		opacity: 0.14;
	}

	/* Vignette for photographic surfaces. */
	.tx-vignette::after {
		background: radial-gradient(
			120% 100% at 50% 45%,
			transparent 42%,
			rgb(0 0 0 / 0.28) 100%
		);
		opacity: 1;
	}

	/* Ink that has soaked and faded unevenly. Applied to text, not to a box. */
	.tx-faded-ink {
		background-image: linear-gradient(
			175deg,
			currentColor 0%,
			color-mix(in oklab, currentColor 82%, transparent) 60%,
			color-mix(in oklab, currentColor 68%, transparent) 100%
		);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
	}

	/* A torn/deckled bottom edge for a paper panel. */
	.tx-paper-edge {
		--edge: 10px;
		-webkit-mask-image:
			linear-gradient(#000 0 0),
			radial-gradient(circle at 50% 0, transparent var(--edge), #000 calc(var(--edge) + 0.5px));
		mask-image:
			linear-gradient(#000 0 0),
			radial-gradient(circle at 50% 0, transparent var(--edge), #000 calc(var(--edge) + 0.5px));
		-webkit-mask-size: 100% calc(100% - var(--edge)), calc(var(--edge) * 3) var(--edge);
		mask-size: 100% calc(100% - var(--edge)), calc(var(--edge) * 3) var(--edge);
		-webkit-mask-position: 0 0, 0 100%;
		mask-position: 0 0, 0 100%;
		-webkit-mask-repeat: no-repeat, repeat-x;
		mask-repeat: no-repeat, repeat-x;
	}

}