/** Shared content styles: front end and block-editor canvas. No runtime JS. */
.plain-hover-effects {
	--phe-shadow-layer: 0 0 0 0 transparent;
	--phe-glow-layer: 0 0 0 0 transparent;
	--phe-rest-shadow: 0 0 0 0 transparent;
	--phe-ring-width: 0;
	--phe-brightness: 1;
	--phe-grayscale: 0%;
	--phe-shadow-stack: var(--phe-rest-shadow), var(--phe-shadow-layer), var(--phe-glow-layer), inset 0 0 0 var(--phe-ring-width) var(--plainplugins-hover-effects-outline-color, #c4956a);
	transition-property: translate, scale, box-shadow, filter, background-color;
	transition-duration: var(--plain-hover-effects-duration-out, 0.4s);
	transition-timing-function: ease;
}

.plain-hover-effects--darken {
	--phe-brightness: var(--plainplugins-hover-effects-darken-initial, 1);
}

.plain-hover-effects--grayscale {
	--phe-grayscale: var(--plainplugins-hover-effects-grayscale-initial, 100%);
}

.plain-hover-effects--darken,
.plain-hover-effects--grayscale {
	filter: brightness(var(--phe-brightness)) grayscale(var(--phe-grayscale));
}

/* Core writes inline shadows after editor wrapper props. Own this one composed
 * property on opted-in blocks; retain the native token in its resting layer.
 */
.plain-hover-effects--shadow,
.plain-hover-effects--glow,
.plain-hover-effects--outline {
	box-shadow: var(--phe-shadow-stack) !important;
}

/* Clip media effects; keep card overflow and focus rings intact. */
.plain-hover-effects--image-zoom {
	overflow: clip;
}

.plain-hover-effects--image-zoom img,
.plain-hover-effects--image-brightness img {
	transition-property: scale, filter;
	transition-duration: var(--plain-hover-effects-duration-out, 0.4s);
	transition-timing-function: ease;
}

.plain-hover-effects--image-brightness img {
	filter: brightness(var(--plainplugins-hover-effects-img-brightness-initial, 1));
}

@media (hover: hover) and (pointer: fine) {

	.plain-hover-effects:hover {
		transition-duration: var(--plain-hover-effects-duration-in, 0.4s);
	}

	.plain-hover-effects--lift:hover {
		translate: 0 calc(-1 * var(--plainplugins-hover-effects-lift, 4px));
	}

	.plain-hover-effects--scale:hover {
		scale: var(--plainplugins-hover-effects-scale, 1.05);
	}

	.plain-hover-effects--shadow:hover {
		--phe-shadow-layer: var(--phe-shadow, 0 4px 6px rgb(0 0 0 / 10%));
	}

	.plain-hover-effects--glow:hover {
		--phe-glow-layer: 0 0 30px color-mix(in srgb, var(--plainplugins-hover-effects-glow-color, #c4956a) calc(var(--plainplugins-hover-effects-glow-intensity, 50) * 1%), transparent);
	}

	.plain-hover-effects--outline:hover {
		--phe-ring-width: var(--plainplugins-hover-effects-outline-width, 2px);
	}

	.plain-hover-effects--tint:hover {
		background-color: color-mix(in srgb, var(--plainplugins-hover-effects-tint-color, #c4956a) calc(var(--plainplugins-hover-effects-tint-intensity, 10) * 1%), transparent);
	}

	.plain-hover-effects--darken:hover {
		--phe-brightness: var(--plainplugins-hover-effects-darken-hover, 0.9);
	}

	.plain-hover-effects--grayscale:hover {
		--phe-grayscale: 0%;
	}

	.plain-hover-effects--image-zoom:hover img {
		scale: var(--plainplugins-hover-effects-img-scale, 1.1);
	}

	.plain-hover-effects--image-brightness:hover img {
		filter: brightness(var(--plainplugins-hover-effects-img-brightness-hover, 0.8));
	}

	.plain-hover-effects--image-zoom:hover img,
	.plain-hover-effects--image-brightness:hover img {
		transition-duration: var(--plain-hover-effects-duration-in, 0.4s);
	}
}

/* Keep native keyboard focus rings clear of media clipping. */
.plain-hover-effects--image-zoom:has(:focus-visible) {
	overflow: visible;
}

.plain-hover-effects--image-zoom:has(:focus-visible) img {
	scale: none;
}

/* Reduced motion keeps instant color and shadow feedback. */
@media (prefers-reduced-motion: reduce) {

	.plain-hover-effects,
	.plain-hover-effects img {
		transition-duration: 0s !important;
		translate: none !important;
		scale: none !important;
	}
}

@media (forced-colors: active) and (hover: hover) and (pointer: fine) {

	.plain-hover-effects--outline:hover {
		outline: 1px solid LinkText;
		outline-offset: -2px;
	}
}