/*
 * Background shapes (inc/shapes.php): a block of color shown through the
 * shape's SVG used as a mask, so every shape takes the brand color and an
 * opacity. Corner motifs sit bottom right, cover drawings fill the area,
 * tile patterns repeat. Fade: dissolves toward the text on the left.
 */
.vef-shape {
	position: absolute; inset: -12% 0; z-index: 0;
	background: #fff; opacity: var(--vef-shape-opacity, .14);
	pointer-events: none; will-change: transform;
	-webkit-mask-image: var(--vef-shape-url); mask-image: var(--vef-shape-url);
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
	-webkit-mask-size: cover; mask-size: cover;
	-webkit-mask-position: center; mask-position: center;
}
.vef-shape--accent { background: var(--vef-accent, #c8102e); }

.vef-shape--corner {
	inset: auto 0 0 auto; width: min(55vw, 820px); aspect-ratio: 1;
	-webkit-mask-size: contain; mask-size: contain;
	-webkit-mask-position: right bottom; mask-position: right bottom;
}
.vef-shape--tile {
	-webkit-mask-repeat: repeat; mask-repeat: repeat;
	-webkit-mask-size: var(--vef-shape-tile); mask-size: var(--vef-shape-tile);
	-webkit-mask-position: 0 0; mask-position: 0 0;
}

.vef-shape--fade {
	-webkit-mask-image: var(--vef-shape-url), linear-gradient(to left, #000 25%, transparent 85%);
	mask-image: var(--vef-shape-url), linear-gradient(to left, #000 25%, transparent 85%);
	-webkit-mask-composite: source-in; mask-composite: intersect;
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
	-webkit-mask-size: cover, 100% 100%; mask-size: cover, 100% 100%;
}
.vef-shape--corner.vef-shape--fade { -webkit-mask-size: contain, 100% 100%; mask-size: contain, 100% 100%; -webkit-mask-position: right bottom, 0 0; mask-position: right bottom, 0 0; }
.vef-shape--tile.vef-shape--fade { -webkit-mask-repeat: repeat, no-repeat; mask-repeat: repeat, no-repeat; -webkit-mask-size: var(--vef-shape-tile), 100% 100%; mask-size: var(--vef-shape-tile), 100% 100%; -webkit-mask-position: 0 0; mask-position: 0 0; }

/* An uploaded SVG in its own colors: shown as an image, no mask. */
.vef-shape--image {
	background: var(--vef-shape-url) center / cover no-repeat;
	-webkit-mask-image: none; mask-image: none;
}
.vef-shape--image.vef-shape--fade {
	-webkit-mask-image: linear-gradient(to left, #000 25%, transparent 85%); mask-image: linear-gradient(to left, #000 25%, transparent 85%);
	-webkit-mask-size: 100% 100%; mask-size: 100% 100%;
}

@media (max-width: 900px) {
	.vef-shape--corner { width: 90vw; }
}