/**
 * Media effects — fade a block's media out towards one edge, and blend it
 * with what is behind the block.
 *
 * Written by the Media effects panel (assets/editor/media-effects-controls.js)
 * as plain classes, so they compose with palette, scheme and any is-style-*.
 *
 * Every effect sits on the media element only, never the block — masking the
 * block also faded its inner content. The faded band, and the backdrop a blend
 * mixes with, is whatever is behind the block: wrap a Cover in a Group and give
 * that the surface.
 */

/* ---- Fade ---------------------------------------------------------------
   Direction and amount are separate classes that only set tokens; the one
   mask rule reads both. Medium (no amount class) is the default. */

.media-fade--top    { --media-fade-direction: to top; }
.media-fade--bottom { --media-fade-direction: to bottom; }
.media-fade--left   { --media-fade-direction: to left; }
.media-fade--right  { --media-fade-direction: to right; }

/* Where the fade begins, measured from the kept edge: lower = more faded. */
.media-fade--s { --media-fade-start: 75%; }
.media-fade--l { --media-fade-start: 25%; }

:is(.media-fade--top, .media-fade--bottom, .media-fade--left, .media-fade--right).wp-block-cover
	> :is(.wp-block-cover__image-background, .wp-block-cover__video-background) {
	-webkit-mask-image: linear-gradient(var(--media-fade-direction), #000 var(--media-fade-start, 50%), transparent 100%);
	        mask-image: linear-gradient(var(--media-fade-direction), #000 var(--media-fade-start, 50%), transparent 100%);
}

/* Once layouts stack, a side edge cuts into a full-width image — fade the
   bottom instead, towards the content that now follows it. */
@media (width <= 64rem) {
	.media-fade--left,
	.media-fade--right {
		--media-fade-direction: to bottom;
	}
}

/* ---- Blend --------------------------------------------------------------
   The Cover's overlay paints above the blended media, so overlay colour and
   opacity set how strong the result is: a `bg` overlay at 30% over Screen is
   the PHP framework's `opacity: 0.7; mix-blend-mode: screen`. */

.media-blend--screen     { --media-blend: screen; }
.media-blend--multiply   { --media-blend: multiply; }
.media-blend--overlay    { --media-blend: overlay; }
.media-blend--luminosity { --media-blend: luminosity; }
.media-blend--difference { --media-blend: difference; }

[class*="media-blend--"].wp-block-cover
	> :is(.wp-block-cover__image-background, .wp-block-cover__video-background) {
	mix-blend-mode: var(--media-blend, normal);
}