/**
 * By Any Meanz — halftone / print texture system.
 *
 * Every texture here is drawn by the browser: repeating radial gradients for
 * the dot screens, one inline SVG turbulence filter for the grain. No raster
 * texture files, because a poster that takes three seconds to paint is a dead
 * poster — and grain PNGs at retina density are measured in megabytes.
 *
 * All knobs come from theme.json settings.custom, so the texture stays in the
 * same token system as the palette and never drifts from it.
 */

:root {
	--bam-dot: var( --wp--custom--halftone--dot-size, 6px );
	--bam-dot-coarse: var( --wp--custom--halftone--dot-size-coarse, 11px );
	--bam-dot-r: var( --wp--custom--halftone--dot-radius, 2.1px );
	--bam-dot-opacity: var( --wp--custom--halftone--opacity, 0.28 );
	--bam-grain-opacity: var( --wp--custom--halftone--grain-opacity, 0.14 );
	--bam-rule-heavy: var( --wp--custom--rule--heavy, 6px );
	--bam-rule-medium: var( --wp--custom--rule--medium, 3px );
	--bam-misreg: var( --wp--custom--misregister--offset, 3px );
}

/* -------------------------------------------------------------------------
 * 1. Dot screens
 *
 * A halftone screen is a grid of dots whose SIZE varies with tone. We can't
 * vary dot radius per-pixel in CSS, so we vary apparent density instead by
 * masking a fixed grid with a gradient — visually the same read at poster
 * scale, and it costs one paint layer instead of an image decode.
 * ---------------------------------------------------------------------- */

.bam-tex {
	position: relative;
	isolation: isolate;
}

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

/* Fine screen — body areas, cards, portraits. */
.bam-tex--dots::after {
	background-image: radial-gradient(
		var( --bam-dot-color, var( --wp--preset--color--ink ) ) var( --bam-dot-r ),
		transparent calc( var( --bam-dot-r ) + 0.5px )
	);
	background-size: var( --bam-dot ) var( --bam-dot );
	opacity: var( --bam-dot-opacity );
	mix-blend-mode: multiply;
}

/* Coarse screen — newsprint blow-up, hero backdrops. Two offset grids give
   the 45-degree screen angle you get off a real screen-print. */
.bam-tex--dots-coarse::after {
	background-image:
		radial-gradient(
			var( --bam-dot-color, var( --wp--preset--color--ink ) ) calc( var( --bam-dot-r ) * 1.4 ),
			transparent calc( var( --bam-dot-r ) * 1.4 + 0.5px )
		),
		radial-gradient(
			var( --bam-dot-color, var( --wp--preset--color--ink ) ) calc( var( --bam-dot-r ) * 0.9 ),
			transparent calc( var( --bam-dot-r ) * 0.9 + 0.5px )
		);
	background-size: var( --bam-dot-coarse ) var( --bam-dot-coarse );
	background-position:
		0 0,
		calc( var( --bam-dot-coarse ) / 2 ) calc( var( --bam-dot-coarse ) / 2 );
	opacity: var( --bam-dot-opacity );
	mix-blend-mode: multiply;
}

/* Tone ramps — mask the dot grid so the screen fades like real halftone. */
.bam-tex--fade-b::after {
	-webkit-mask-image: linear-gradient( to bottom, #000 0%, transparent 90% );
	mask-image: linear-gradient( to bottom, #000 0%, transparent 90% );
}

.bam-tex--fade-t::after {
	-webkit-mask-image: linear-gradient( to top, #000 0%, transparent 90% );
	mask-image: linear-gradient( to top, #000 0%, transparent 90% );
}

.bam-tex--fade-r::after {
	-webkit-mask-image: linear-gradient( to right, #000 10%, transparent 85% );
	mask-image: linear-gradient( to right, #000 10%, transparent 85% );
}

/* Ink colour overrides for the screen. */
.bam-tex--ink-red {
	--bam-dot-color: var( --wp--preset--color--red );
}

.bam-tex--ink-green {
	--bam-dot-color: var( --wp--preset--color--green );
}

.bam-tex--ink-yellow {
	--bam-dot-color: var( --wp--preset--color--yellow );
}

.bam-tex--ink-paper {
	--bam-dot-color: var( --wp--preset--color--paper );
}

/* -------------------------------------------------------------------------
 * 2. Newsprint grain
 *
 * One feTurbulence, inlined as a data URI so it costs no request. Fractal
 * noise at low frequency reads as paper tooth rather than TV static.
 * ---------------------------------------------------------------------- */

.bam-tex--grain::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	opacity: var( --bam-grain-opacity );
	mix-blend-mode: multiply;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E" );
	background-size: 140px 140px;
}

/* -------------------------------------------------------------------------
 * 3. Misregistration
 *
 * Cheap screen-print tell: the colour plates don't line up with the black.
 * Applied to display type only — on body copy it destroys legibility.
 * ---------------------------------------------------------------------- */

.bam-misreg {
	text-shadow:
		calc( var( --bam-misreg ) * -1 ) 0 0 var( --wp--preset--color--red ),
		var( --bam-misreg ) var( --bam-misreg ) 0 var( --wp--preset--color--green );
}

.bam-misreg--red-yellow {
	text-shadow:
		calc( var( --bam-misreg ) * -1 ) 0 0 var( --wp--preset--color--yellow ),
		var( --bam-misreg ) var( --bam-misreg ) 0 var( --wp--preset--color--red );
}

/* Knockout type — white letterform punched out of a solid ink block. */
.bam-knockout {
	background: var( --wp--preset--color--ink );
	color: var( --wp--preset--color--paper );
	padding: 0.06em 0.22em;
	display: inline-block;
}

.bam-knockout--red {
	background: var( --wp--preset--color--red );
	color: var( --wp--preset--color--white );
}

/* -------------------------------------------------------------------------
 * 4. Print furniture — rules, stamps, torn edges
 * ---------------------------------------------------------------------- */

.bam-rule {
	border: 0;
	border-top: var( --bam-rule-heavy ) solid var( --wp--preset--color--ink );
	margin: 0;
}

.bam-rule--red {
	border-top-color: var( --wp--preset--color--red );
}

/* Double rule, the way a broadsheet masthead separates from the page. */
.bam-rule--double {
	border-top: var( --bam-rule-heavy ) solid var( --wp--preset--color--ink );
	border-bottom: var( --bam-rule-medium ) solid var( --wp--preset--color--ink );
	height: 5px;
}

.bam-stamp {
	display: inline-block;
	font-family: var( --wp--preset--font-family--stencil );
	font-size: var( --wp--preset--font-size--small );
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	padding: 0.35em 0.7em;
	border: var( --bam-rule-medium ) solid currentColor;
	transform: rotate( -2.5deg );
}

/* Torn / guillotined edge for section boundaries. */
.bam-torn-b {
	-webkit-mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='14' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1200v7L1150 11 1100 6 1040 12 980 5 920 10 860 4 800 11 740 6 680 12 620 5 560 10 500 4 440 11 380 6 320 12 260 5 200 10 140 4 80 11 20 6 0 9Z' fill='%23000'/%3E%3C/svg%3E" );
	mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='14' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1200v7L1150 11 1100 6 1040 12 980 5 920 10 860 4 800 11 740 6 680 12 620 5 560 10 500 4 440 11 380 6 320 12 260 5 200 10 140 4 80 11 20 6 0 9Z' fill='%23000'/%3E%3C/svg%3E" );
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

/* -------------------------------------------------------------------------
 * 5. Motion — minimal, punchy, stepped. Nothing eases smoothly; a poster
 *    doesn't ease. Everything here is opt-in and respects reduced motion.
 * ---------------------------------------------------------------------- */

@media ( prefers-reduced-motion: no-preference ) {
	.bam-snap {
		transition: transform var( --wp--custom--transition--snap, 90ms steps( 3, end ) ),
			background-color var( --wp--custom--transition--fast, 140ms linear ),
			color var( --wp--custom--transition--fast, 140ms linear );
	}

	.bam-snap:hover {
		transform: translate( -2px, -2px );
	}
}