/**
 * SGS motion: glare (Spec 38A FR-38A-41, FR-38A-49). The painting half.
 *
 * `src/shared/effects/fx-glare.js` writes `--sgs-glare-x` and `--sgs-glare-y` (percentages) on the element; the
 * renderer writes the glare layer's values as three custom properties on the same element:
 *   --sgs-glare-colour   the highlight colour (default white)
 *   --sgs-glare-opacity  the highlight strength, 0 to 1 (default 0.42)
 *   --sgs-glare-size     where the highlight fades to transparent, a percentage (default 55%)
 * The layer is the renderer's injected `span.sgs-motion-layer[data-sgs-layer="glare"]` (aria-hidden). It paints only
 * while the pointer is over the element, and never under reduced motion. This file does not touch the transform
 * channel: `assets/css/motion.css` owns it.
 */

/* The host is a stacking context so the layer below can sit behind its content. */
:where([data-sgs-fx~="glare"]) {
	isolation: isolate;
}

.sgs-motion-layer[data-sgs-layer="glare"] {
	background-image: radial-gradient(
		circle at var(--sgs-glare-x, 50%) var(--sgs-glare-y, 50%),
		var(--sgs-glare-colour, #fff),
		transparent var(--sgs-glare-size, 55%)
	);
	/* The layer is the host's first child (`Sgs_Motion_Markup::inject_layers`) and the host is its own stacking context
	   (above), so at z-index 0 it paints over the host's background and its in-flow content (a photo shows the shine) and
	   under every positioned child that follows it (a button or a lifted container child stays on top). */
	z-index: 0;
	opacity: 0;
	transition: opacity var(--wp--custom--duration--quick, 150ms) var(--wp--custom--easing--ease-out, ease-out);
}

:where(:root:not(.sgs-touch-input)) [data-sgs-fx~="glare"]:hover > .sgs-motion-layer[data-sgs-layer="glare"] {
	opacity: var(--sgs-glare-opacity, 0.42);
}

@media (prefers-reduced-motion: reduce) {
	.sgs-motion-layer[data-sgs-layer="glare"],
	[data-sgs-fx~="glare"]:hover > .sgs-motion-layer[data-sgs-layer="glare"] {
		opacity: 0;
		transition: none;
	}
}

/* Per-device off switch (Spec 38A FR-38A-23). When this effect is off at the current tier (data-sgs-fx-off-<tier> names it, or data-sgs-fx-disable-<tier> turns every effect off), the injected glare layer paints nothing. */
@media (max-width: 767.98px) {
	[data-sgs-fx~="glare"][data-sgs-fx-off-mobile~="glare"] > .sgs-motion-layer[data-sgs-layer="glare"],
	[data-sgs-fx~="glare"][data-sgs-fx-disable-mobile] > .sgs-motion-layer[data-sgs-layer="glare"] {
		display: none;
	}
}
@media (min-width: 768px) and (max-width: 1023.98px) {
	[data-sgs-fx~="glare"][data-sgs-fx-off-tablet~="glare"] > .sgs-motion-layer[data-sgs-layer="glare"],
	[data-sgs-fx~="glare"][data-sgs-fx-disable-tablet] > .sgs-motion-layer[data-sgs-layer="glare"] {
		display: none;
	}
}