/**
 * Segment fader — one mask stack for all blocks. Black = visible, transparent = hidden.
 */
.wm-seg-fade {
	--wm-seg-size: min(140px, 18%);
	--wm-seg-pass: linear-gradient(#000, #000);
	--wm-seg-top: var(--wm-seg-pass);
	--wm-seg-right: var(--wm-seg-pass);
	--wm-seg-bottom: var(--wm-seg-pass);
	--wm-seg-left: var(--wm-seg-pass);
}

.wm-seg-fade--top {
	--wm-seg-top: linear-gradient(to bottom, transparent, #000 var(--wm-seg-size));
}

.wm-seg-fade--bottom {
	--wm-seg-bottom: linear-gradient(to bottom, #000 calc(100% - var(--wm-seg-size)), transparent);
}

.wm-seg-fade--left {
	--wm-seg-left: linear-gradient(to right, transparent, #000 var(--wm-seg-size));
}

.wm-seg-fade--right {
	--wm-seg-right: linear-gradient(to right, #000 calc(100% - var(--wm-seg-size)), transparent);
}

/* Fixed frame: parallax moves media inside; mask stays on viewport. */
.wm-seg-fade .wm-seg-fade-media {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
	-webkit-mask-image: var(--wm-seg-top), var(--wm-seg-right), var(--wm-seg-bottom), var(--wm-seg-left);
	mask-image: var(--wm-seg-top), var(--wm-seg-right), var(--wm-seg-bottom), var(--wm-seg-left);
	-webkit-mask-composite: source-in;
	mask-composite: intersect;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

/* Direct targets (no parallax frame). */
.wm-seg-fade :where(
	.wp-block-cover__image-background,
	.wp-block-cover__video-background,
	.wp-block-cover__background,
	.wm-slider__slide > img,
	.wm-slider__slide > .wm-slider__link img,
	.wp-block-media-text__media :is(img, video),
	.wp-block-wm-media-text__media :is(img, video)
),
.wm-seg-fade.wp-block-image :is(figure img, > img),
.wm-seg-fade.wp-block-video > video {
	-webkit-mask-image: var(--wm-seg-top), var(--wm-seg-right), var(--wm-seg-bottom), var(--wm-seg-left);
	mask-image: var(--wm-seg-top), var(--wm-seg-right), var(--wm-seg-bottom), var(--wm-seg-left);
	-webkit-mask-composite: source-in;
	mask-composite: intersect;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

/* Editor (no .wm-seg-fade-media): mask hero/parallax-cover media directly. */
.wm-seg-fade:not(:has(.wm-seg-fade-media)) :is(
	.hero-header__image,
	.hero-header__video,
	.hero-header__scrim,
	.wp-block-cover__image-background,
	.wp-block-cover__video-background,
	.wp-block-cover__background
) {
	-webkit-mask-image: var(--wm-seg-top), var(--wm-seg-right), var(--wm-seg-bottom), var(--wm-seg-left);
	mask-image: var(--wm-seg-top), var(--wm-seg-right), var(--wm-seg-bottom), var(--wm-seg-left);
	-webkit-mask-composite: source-in;
	mask-composite: intersect;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

/* Frontend parallax frame: mask on container, not on moving children. */
.wm-seg-fade-media :is(.hero-header__image, .hero-header__video, .hero-header__scrim),
.wm-seg-fade-media :is(.wp-block-cover__image-background, .wp-block-cover__video-background, .wp-block-cover__background) {
	-webkit-mask-image: none;
	mask-image: none;
}