.fp-svg-mask {
	-webkit-mask-image: var(--fp-svg-mask-image);
	-webkit-mask-position: var(--fp-svg-mask-position, center center);
	-webkit-mask-repeat: var(--fp-svg-mask-repeat, no-repeat);
	-webkit-mask-size: var(--fp-svg-mask-size, cover);
	mask-image: var(--fp-svg-mask-image);
	mask-mode: alpha;
	mask-position: var(--fp-svg-mask-position, center center);
	mask-repeat: var(--fp-svg-mask-repeat, no-repeat);
	mask-size: var(--fp-svg-mask-size, cover);
}

.fp-svg-mask.fp-svg-mask-invert {
	-webkit-mask-image: linear-gradient(#fff 0 0), var(--fp-svg-mask-image);
	-webkit-mask-position: center center, var(--fp-svg-mask-position, center center);
	-webkit-mask-repeat: no-repeat, var(--fp-svg-mask-repeat, no-repeat);
	-webkit-mask-size: 100% 100%, var(--fp-svg-mask-size, cover);
	-webkit-mask-composite: xor;
	mask-image: linear-gradient(#fff 0 0), var(--fp-svg-mask-image);
	mask-mode: alpha, alpha;
	mask-position: center center, var(--fp-svg-mask-position, center center);
	mask-repeat: no-repeat, var(--fp-svg-mask-repeat, no-repeat);
	mask-size: 100% 100%, var(--fp-svg-mask-size, cover);
	mask-composite: exclude;
}

.fp-svg-mask-svg-overlay {
	position: relative;
	isolation: isolate;
}

/*
 * SVG Overlay is a two-layer effect: the source image is visible only in the
 * light SVG areas, while the original SVG remains visible above it.
 */
.fp-svg-mask-svg-overlay > img,
.fp-svg-mask-svg-overlay > picture,
.fp-svg-mask-svg-overlay > a,
.fp-svg-mask-svg-overlay > .image-cover,
.fp-svg-mask-svg-overlay > .icon,
.fp-svg-mask-svg-overlay .image-cover {
	-webkit-mask-image: var(--fp-svg-mask-image);
	-webkit-mask-position: var(--fp-svg-mask-position, center center);
	-webkit-mask-repeat: var(--fp-svg-mask-repeat, no-repeat);
	-webkit-mask-size: var(--fp-svg-mask-size, cover);
	-webkit-mask-source-type: luminance;
	mask-image: var(--fp-svg-mask-image);
	mask-mode: luminance;
	mask-position: var(--fp-svg-mask-position, center center);
	mask-repeat: var(--fp-svg-mask-repeat, no-repeat);
	mask-size: var(--fp-svg-mask-size, cover);
}

.fp-svg-mask-svg-overlay::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background-image: var(--fp-svg-mask-image);
	background-position: var(--fp-svg-mask-position, center center);
	background-repeat: var(--fp-svg-mask-repeat, no-repeat);
	background-size: var(--fp-svg-mask-size, cover);
	mix-blend-mode: multiply;
}