/**
 * SGS motion — scroll progress bar (Spec 38A FR-38A-36). Tier V.
 *
 * The PAINTING half. `src/shared/effects/fx-scroll-progress.js` and the scroll
 * driver write custom-property VALUES only; every declaration lives here.
 * The bar sets the scale-channel terms `--sgs-sp-x` (bar-x) and `--sgs-sp-y`
 * (bar-y); `motion.css::[data-sgs-mc~="scale"]` composes them into the
 * element's `scale`, so this file never declares `scale` or `transform`. There
 * is no transition: progress is information and tracks the scroll exactly.
 *
 * Page and section bars read `--sgs-scroll-progress` (the scroll driver). Pin
 * bars read `--sgs-fx-progress`, written on the pin ancestor and inherited.
 * Both default to 0, so with JS blocked the bar rests empty.
 */

:where( [data-sgs-fx~="scroll-progress"] ) {
	--sgs-scroll-progress-value: var( --sgs-scroll-progress, 0 );
}

:where( [data-sgs-fx~="scroll-progress"][data-sgs-fx-scroll-progress-source="pin"] ) {
	--sgs-scroll-progress-value: var( --sgs-fx-progress, 0 );
}

/* bar-x is the default output. */
:where( [data-sgs-fx~="scroll-progress"]:not( [data-sgs-fx-scroll-progress-output="bar-y"], [data-sgs-fx-scroll-progress-output="counter"] ) ) {
	--sgs-sp-x: var( --sgs-scroll-progress-value );
	transform-origin: 0 50%;
}

:where( [data-sgs-fx~="scroll-progress"]:not( [data-sgs-fx-scroll-progress-output="bar-y"], [data-sgs-fx-scroll-progress-output="counter"] ):dir( rtl ) ) {
	transform-origin: 100% 50%;
}

:where( [data-sgs-fx~="scroll-progress"][data-sgs-fx-scroll-progress-output="bar-y"] ) {
	--sgs-sp-y: var( --sgs-scroll-progress-value );
	transform-origin: 50% 0;
}

/* 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 bar reads zero progress, the same empty rest state it has with JS blocked. Beats the :where() definitions above. */
@media (max-width: 767.98px) {
	[data-sgs-fx~="scroll-progress"][data-sgs-fx-off-mobile~="scroll-progress"],
	[data-sgs-fx~="scroll-progress"][data-sgs-fx-disable-mobile] {
		--sgs-scroll-progress-value: 0;
	}
}
@media (min-width: 768px) and (max-width: 1023.98px) {
	[data-sgs-fx~="scroll-progress"][data-sgs-fx-off-tablet~="scroll-progress"],
	[data-sgs-fx~="scroll-progress"][data-sgs-fx-disable-tablet] {
		--sgs-scroll-progress-value: 0;
	}
}