/**
 * SGS motion — magnetic pull (Spec 38 §3.3, FR-38-30; Spec 38A FR-38A-40). Tier V.
 *
 * The PAINTING half. `src/shared/effects/magnet.js` writes custom-property
 * VALUES only (FR-38A-47): `--sgs-mag-x` / `--sgs-mag-y` (the magnet slot of the
 * `translate` channel in `motion.css`), `--sgs-mag-dur` (0ms while the pointer
 * tracks, the return duration on release) and `--sgs-mag-ease`. This file owns
 * the one thing the magnet paints itself: its RETURN transition.
 *
 * The transition is on the magnet's own two custom properties, never on
 * `translate`, so the entrance and the hover state keep their own timing on the
 * same element (§10, "Own timing"). Pointer tracking has no transition (the
 * pull is already per frame); the transition exists for the moment the pointer
 * leaves the catch area and the driver writes 0 once, so the element eases back
 * rather than snapping.
 *
 * Fail-open by construction: both properties default to 0px, so with JS blocked
 * or not yet loaded the element sits at its natural position.
 */

/* Same definitions as motion.css, so the return can animate where this file is loaded alone. */
@property --sgs-mag-x { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --sgs-mag-y { syntax: '<length>'; inherits: false; initial-value: 0px; }

[data-sgs-fx~="magnet"] {
	transition:
		--sgs-mag-x var(--sgs-mag-dur, 0ms) var(--sgs-mag-ease, ease-out),
		--sgs-mag-y var(--sgs-mag-dur, 0ms) var(--sgs-mag-ease, ease-out);
}

/*
 * An element the renderer gave no translate channel still moves: the magnet's
 * slot alone. Where the channel exists (`data-sgs-mc~="translate"`), motion.css
 * composes the magnet with every other owner and this rule steps aside.
 * (`translate` is a no-op on a non-replaced inline box, so an inline host is
 * promoted to inline-block.)
 */
[data-sgs-fx~="magnet"]:not([data-sgs-mc~="translate"]) {
	translate: var(--sgs-mag-x, 0px) var(--sgs-mag-y, 0px);
}

/* Zero specificity throughout: only an otherwise-unstyled inline host is promoted; any block's own `display` (for example `.sgs-button`'s inline-flex) wins. */
:where([data-sgs-fx~="magnet"]):where(a, span, em, strong, label, code) {
	display: inline-block;
}

/*
 * No pointer gate here, deliberately: with no mouse there are no `mousemove`
 * events, so the properties stay at 0px and the element never moves.
 */

@media (prefers-reduced-motion: reduce) {
	/* The JS already detaches under `reduce`; this is the CSS-side kill switch the house pattern requires. */
	[data-sgs-fx~="magnet"] {
		transition: none;
	}

	[data-sgs-fx~="magnet"]:not([data-sgs-mc~="translate"]) {
		translate: 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 pull is pinned to 0px. magnet.js writes the two pull properties inline, so !important is required to beat the inline declaration. */
@media (max-width: 767.98px) {
	[data-sgs-fx~="magnet"][data-sgs-fx-off-mobile~="magnet"],
	[data-sgs-fx~="magnet"][data-sgs-fx-disable-mobile] {
		--sgs-mag-x: 0px !important;
		--sgs-mag-y: 0px !important;
	}
}
@media (min-width: 768px) and (max-width: 1023.98px) {
	[data-sgs-fx~="magnet"][data-sgs-fx-off-tablet~="magnet"],
	[data-sgs-fx~="magnet"][data-sgs-fx-disable-tablet] {
		--sgs-mag-x: 0px !important;
		--sgs-mag-y: 0px !important;
	}
}

/*
 * A declared moving part (`data-sgs-fx-magnet-moving-part`) is marked `data-sgs-mag-part` by the driver and carries the
 * magnet's custom properties itself; the block root then stays put. Same return transition and translate slot as the root.
 */
[data-sgs-mag-part] {
	transition:
		--sgs-mag-x var(--sgs-mag-dur, 0ms) var(--sgs-mag-ease, ease-out),
		--sgs-mag-y var(--sgs-mag-dur, 0ms) var(--sgs-mag-ease, ease-out);
	translate: var(--sgs-mag-x, 0px) var(--sgs-mag-y, 0px);
}