/**
 * Homepage distressed-edge component.
 *
 * This intentionally lives in the theme instead of the Gutenberg page block:
 * installing the theme must install both the texture files and the rules that
 * display them. The body gate keeps the component off every interior page.
 * Each original variation appears once; clean gaps keep the page from reading
 * as a tiled frame.
 */
body.msp-home .msp-home-surface {
	position: relative;
	isolation: isolate;
}

body.msp-home .msp-home-surface::before,
body.msp-home .msp-home-surface::after {
	content: "";
	position: absolute;
	top: 0;
	z-index: 7;
	width: clamp(100px, 6.25vw, 120px);
	aspect-ratio: 3 / 22;
	pointer-events: none;
	opacity: .55;
	background-repeat: no-repeat;
	background-position: top center;
	background-size: 100% 100%;
}

body.msp-home .msp-home-surface::before {
	left: 0;
	background-image: url("../img/distressed-edge/edge-01-balanced-left-overlay.png");
	background-image: image-set(
		url("../img/distressed-edge/edge-01-balanced-left-overlay.webp") type("image/webp"),
		url("../img/distressed-edge/edge-01-balanced-left-overlay.png") type("image/png")
	);
}

body.msp-home .msp-home-surface::after {
	right: 0;
	background-image: url("../img/distressed-edge/edge-01-balanced-right-overlay.png");
	background-image: image-set(
		url("../img/distressed-edge/edge-01-balanced-right-overlay.webp") type("image/webp"),
		url("../img/distressed-edge/edge-01-balanced-right-overlay.png") type("image/png")
	);
}

/* Lower-page quiet wear. The section clips the native-ratio images rather than
   stretching or repeating them when its height is shorter than 880px. */
body.msp-home .msp-home-surface #custom {
	position: relative;
	isolation: isolate;
	overflow: clip;
}

body.msp-home .msp-home-surface #custom::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-repeat: no-repeat;
	background-position: left top, right top;
	background-size: clamp(100px, 6.25vw, 120px) auto;
}
body.msp-home .msp-home-surface #custom::after {
	z-index: 0;
	opacity: .22;
	background-image:
		url("../img/distressed-edge/edge-03-fractured-left-overlay.png"),
		url("../img/distressed-edge/edge-03-fractured-right-overlay.png");
	background-image:
		image-set(
			url("../img/distressed-edge/edge-03-fractured-left-overlay.webp") type("image/webp"),
			url("../img/distressed-edge/edge-03-fractured-left-overlay.png") type("image/png")
		),
		image-set(
			url("../img/distressed-edge/edge-03-fractured-right-overlay.webp") type("image/webp"),
			url("../img/distressed-edge/edge-03-fractured-right-overlay.png") type("image/png")
		);
}

@media (max-width: 767px) {
	body.msp-home .msp-home-surface::before,
	body.msp-home .msp-home-surface::after {
		width: clamp(52px, 9vw, 68px);
		opacity: .36;
	}

	body.msp-home .msp-home-surface #custom::after {
		background-size: clamp(52px, 9vw, 64px) auto;
	}

	body.msp-home .msp-home-surface #custom::after { opacity: .15; }
}