/**
 * SGS motion: marquee (Spec 38A FR-38A-44). The painting half.
 *
 * `src/shared/effects/fx-marquee.js` clones the block's `[data-sgs-marquee-set]` and runs a Web Animations loop on
 * `--sgs-marquee-x` (or `-y` for a vertical marquee) on every copy; this file turns that channel into `translate`,
 * lays the lane out as one non-wrapping row while the marquee runs, and fades the two ends of the lane. It sets no `animation-name`
 * (an entrance on the same element owns that list) and nothing here applies while the marquee is off, so a static
 * block keeps its own layout and every item stays visible.
 *
 * The script sets `data-sgs-marquee="on"` on the block root and `data-sgs-marquee-lane="on"` on the set's parent
 * while it runs, and `--sgs-marquee-fade-size` on the root when the edge fade is on. The edge fade is a mask on the
 * lane, never on the block root: the pause button the loop control appends to the root must stay outside every
 * masked box, so a block prints a lane element distinct from its root (the trust bar's `.sgs-trust-bar__lane`, the
 * brand strip's `.sgs-brand-strip__track`). The lane layout rules still match a root that is its own lane.
 */

@property --sgs-marquee-x { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --sgs-marquee-y { syntax: '<length>'; inherits: false; initial-value: 0px; }

[data-sgs-fx~="marquee"][data-sgs-marquee="on"] {
	overflow: hidden;
	position: relative;
}

/* The root hides the off-screen copies along the travel axis only. `clip`, unlike `hidden`, leaves the other axis
   `visible`, so a tile's shadow paints above and below a sideways strip (and beside an upward or downward one). */
@supports (overflow: clip) {
	[data-sgs-fx~="marquee"][data-sgs-marquee="on"] {
		overflow-x: clip;
		overflow-y: visible;
	}

	[data-sgs-fx~="marquee"][data-sgs-marquee="on"][data-sgs-fx-marquee-direction="up"],
	[data-sgs-fx~="marquee"][data-sgs-marquee="on"][data-sgs-fx-marquee-direction="down"] {
		overflow-x: visible;
		overflow-y: clip;
	}
}

[data-sgs-fx~="marquee"] [data-sgs-marquee-lane="on"],
[data-sgs-fx~="marquee"][data-sgs-marquee-lane="on"] {
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
}

[data-sgs-fx~="marquee"][data-sgs-fx-marquee-direction="up"] [data-sgs-marquee-lane="on"],
[data-sgs-fx~="marquee"][data-sgs-fx-marquee-direction="down"] [data-sgs-marquee-lane="on"],
[data-sgs-fx~="marquee"][data-sgs-fx-marquee-direction="up"][data-sgs-marquee-lane="on"],
[data-sgs-fx~="marquee"][data-sgs-fx-marquee-direction="down"][data-sgs-marquee-lane="on"] {
	flex-direction: column;
}

[data-sgs-fx~="marquee"][data-sgs-marquee="on"] [data-sgs-marquee-lane="on"] > :is([data-sgs-marquee-set], [data-sgs-marquee-clone]),
[data-sgs-fx~="marquee"][data-sgs-marquee="on"][data-sgs-marquee-lane="on"] > :is([data-sgs-marquee-set], [data-sgs-marquee-clone]) {
	flex: 0 0 auto;
	max-width: none;
	translate: var(--sgs-marquee-x) var(--sgs-marquee-y);
}

/* A per-item scroll entrance does not apply to a running marquee: fx-marquee.js shows every item before it clones the set,
   and no scroll entrance animation plays inside the lane, so an item neither fades in under the moving strip nor replays
   on a copy. A load, open or state entrance on a part inside an item still runs. */
[data-sgs-marquee-lane="on"] [data-sgs-me~="scroll"] {
	animation: none !important;
}

/* Edge fade: a mask on the lane, so the fade needs no background colour and works over an image or a gradient, and the
   pause button (a child of the root, outside the lane) is never masked. */
[data-sgs-fx~="marquee"][data-sgs-marquee="on"][data-sgs-fx-marquee-edge-fade="true"] {
	--sgs-marquee-fade-axis: to right;
}

[data-sgs-fx~="marquee"][data-sgs-marquee="on"][data-sgs-fx-marquee-edge-fade="true"][data-sgs-fx-marquee-direction="up"],
[data-sgs-fx~="marquee"][data-sgs-marquee="on"][data-sgs-fx-marquee-edge-fade="true"][data-sgs-fx-marquee-direction="down"] {
	--sgs-marquee-fade-axis: to bottom;
}

[data-sgs-fx~="marquee"][data-sgs-marquee="on"][data-sgs-fx-marquee-edge-fade="true"] [data-sgs-marquee-lane="on"] {
	mask-image: linear-gradient(
		var(--sgs-marquee-fade-axis),
		transparent 0,
		#000 var(--sgs-marquee-fade-size, 5%),
		#000 calc(100% - var(--sgs-marquee-fade-size, 5%)),
		transparent 100%
	);
	/* The mask paints beyond the lane's box (the gradient repeats across the cross axis, so the fade along the lane is
	   identical there), which keeps a tile's box-shadow and hover growth visible; the root's overflow still bounds it. */
	-webkit-mask-clip: no-clip;
	mask-clip: no-clip;
	/* The lane's own box also reaches past its items on the cross axis (a padding cancelled by a negative margin, so the
	   layout does not move), so a tile's shadow sits inside the mask's box and paints even where no-clip is not honoured. */
	padding-block: var(--sgs-marquee-bleed, var(--sgs-shadow-bleed, 80px));
	margin-block: calc(-1 * var(--sgs-marquee-bleed, var(--sgs-shadow-bleed, 80px)));
}

[data-sgs-fx~="marquee"][data-sgs-marquee="on"][data-sgs-fx-marquee-edge-fade="true"][data-sgs-fx-marquee-direction="up"] [data-sgs-marquee-lane="on"],
[data-sgs-fx~="marquee"][data-sgs-marquee="on"][data-sgs-fx-marquee-edge-fade="true"][data-sgs-fx-marquee-direction="down"] [data-sgs-marquee-lane="on"] {
	padding-block: 0;
	margin-block: 0;
	padding-inline: var(--sgs-marquee-bleed, var(--sgs-shadow-bleed, 80px));
	margin-inline: calc(-1 * var(--sgs-marquee-bleed, var(--sgs-shadow-bleed, 80px)));
}

/* The pause button floats over the bottom end of the root, above the lane, so on a tall strip of logos it sits in the
 * corner and leaves the logos clear. Content passing behind it is fine; the button is a sibling of the lane, so the
 * lane's edge-fade mask never touches it. */
[data-sgs-fx~="marquee"] .sgs-motion-pause {
	z-index: 3;
}

[data-sgs-fx~="marquee"][data-sgs-marquee="on"] > .sgs-motion-pause {
	position: absolute;
	inset-block-end: 0;
	inset-inline-end: 0;
}

@media (prefers-reduced-motion: reduce) {
	[data-sgs-fx~="marquee"][data-sgs-fx-marquee-edge-fade="true"] [data-sgs-marquee-lane] {
		mask-image: 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 scroll translate, the cloned items, and the edge-fade mask are removed; the pause control stays because other loops in the same block share it and the script removes it with the last loop. The lane's flex row and overflow clip are left, because the authored layout cannot be recovered in CSS; the script removes those marks when it tears down. */
@media (max-width: 767.98px) {
	[data-sgs-fx~="marquee"][data-sgs-fx-off-mobile~="marquee"][data-sgs-marquee="on"] [data-sgs-marquee-lane="on"] > :is([data-sgs-marquee-set], [data-sgs-marquee-clone]),
	[data-sgs-fx~="marquee"][data-sgs-fx-disable-mobile][data-sgs-marquee="on"] [data-sgs-marquee-lane="on"] > :is([data-sgs-marquee-set], [data-sgs-marquee-clone]),
	[data-sgs-fx~="marquee"][data-sgs-fx-off-mobile~="marquee"][data-sgs-marquee="on"][data-sgs-marquee-lane="on"] > :is([data-sgs-marquee-set], [data-sgs-marquee-clone]),
	[data-sgs-fx~="marquee"][data-sgs-fx-disable-mobile][data-sgs-marquee="on"][data-sgs-marquee-lane="on"] > :is([data-sgs-marquee-set], [data-sgs-marquee-clone]) {
		translate: none;
	}
	[data-sgs-fx~="marquee"][data-sgs-fx-off-mobile~="marquee"] [data-sgs-marquee-clone],
	[data-sgs-fx~="marquee"][data-sgs-fx-disable-mobile] [data-sgs-marquee-clone] {
		display: none;
	}
	[data-sgs-fx~="marquee"][data-sgs-fx-off-mobile~="marquee"][data-sgs-marquee="on"][data-sgs-fx-marquee-edge-fade="true"] [data-sgs-marquee-lane="on"],
	[data-sgs-fx~="marquee"][data-sgs-fx-disable-mobile][data-sgs-marquee="on"][data-sgs-fx-marquee-edge-fade="true"] [data-sgs-marquee-lane="on"] {
		mask-image: none;
	}
}
@media (min-width: 768px) and (max-width: 1023.98px) {
	[data-sgs-fx~="marquee"][data-sgs-fx-off-tablet~="marquee"][data-sgs-marquee="on"] [data-sgs-marquee-lane="on"] > :is([data-sgs-marquee-set], [data-sgs-marquee-clone]),
	[data-sgs-fx~="marquee"][data-sgs-fx-disable-tablet][data-sgs-marquee="on"] [data-sgs-marquee-lane="on"] > :is([data-sgs-marquee-set], [data-sgs-marquee-clone]),
	[data-sgs-fx~="marquee"][data-sgs-fx-off-tablet~="marquee"][data-sgs-marquee="on"][data-sgs-marquee-lane="on"] > :is([data-sgs-marquee-set], [data-sgs-marquee-clone]),
	[data-sgs-fx~="marquee"][data-sgs-fx-disable-tablet][data-sgs-marquee="on"][data-sgs-marquee-lane="on"] > :is([data-sgs-marquee-set], [data-sgs-marquee-clone]) {
		translate: none;
	}
	[data-sgs-fx~="marquee"][data-sgs-fx-off-tablet~="marquee"] [data-sgs-marquee-clone],
	[data-sgs-fx~="marquee"][data-sgs-fx-disable-tablet] [data-sgs-marquee-clone] {
		display: none;
	}
	[data-sgs-fx~="marquee"][data-sgs-fx-off-tablet~="marquee"][data-sgs-marquee="on"][data-sgs-fx-marquee-edge-fade="true"] [data-sgs-marquee-lane="on"],
	[data-sgs-fx~="marquee"][data-sgs-fx-disable-tablet][data-sgs-marquee="on"][data-sgs-fx-marquee-edge-fade="true"] [data-sgs-marquee-lane="on"] {
		mask-image: none;
	}
}