/**
 * The shared motion stylesheet (Spec 38A §9, §10, §12; FR-38A-17, 18, 23, 27, 42, 49).
 *
 * Every generic motion rule lives here; per-instance values come from the renderer's scoped custom properties
 * (includes/motion/), never a `style` attribute. The contract with the renderer:
 *
 *   data-sgs-mh="self|root|group|item"    the target holds a hover state; the value is its source (§6.2)
 *   data-sgs-mh-move, data-sgs-mh-scale, data-sgs-mh-rotate
 *                                     the target's own hover state (source self) sets a translate, a scale or a rotate;
 *                                     a stylesheet's own hover movement (the button preset's lift, scale, rotate) drops
 *                                     only the matching part
 *   --sgs-mh-to-<tx|ty|rot|rx|ry|s|op|blur|gray|bright|indent|w|ring|ring-c|accent|accent-c>
 *                                     the hover state's to-values (per device; registered non-inheriting). Each rotate
 *                                     to-value (Z, X, Y) is the hover angle minus its rest angle, and the grayscale
 *                                     to-value the hover amount minus the rest grayscale (§10)
 *   --sgs-w-rest                      the resting width a width hover grows or shrinks from (default 100% of the element's box)
 *   --sgs-pad-start-rest              the resting inline-start padding an indent hover adds to (default 0px)
 *   --sgs-rot-rest, --sgs-rx-rest, --sgs-ry-rest
 *                                     the rest Z, X and Y angles, resting styling values (FR-38A-42)
 *   --sgs-gray-rest                   the resting grayscale (Grayscale to colour), a resting styling value
 *   --sgs-persp-self                  the element's one perspective (a length, or none), read by the transform channel
 *   data-sgs-mroot                    a block root whose targets use source root
 *   data-sgs-hover-group              the hover-group block (source group reads the nearest one)
 *   data-sgs-mitem                    a repeated item of a block whose targets use source item (the nearest one drives)
 *   data-sgs-mc="<channels>"          the persistent channels of the element's non-entrance owners, as the schema's
 *                                     x-sgs-writes names them (translate rotate scale opacity filter transform
 *                                     background-position ::before ::after injected)
 *   data-sgs-me="<trigger> <channels>" an entrance: trigger load|scroll|open|state, then the channels it touches
 *   --sgs-me-from-<x>, --sgs-me-to-<x>, --sgs-me-dur, --sgs-me-delay, --sgs-me-ease
 *                                     the entrance's values and timing (to-values default to the identity); the clip
 *                                     reveal's holders are per edge (--sgs-me-from-clip-<t|r|b|l>) over the uniform
 *                                     --sgs-me-from-clip. Registered non-inheriting, so each element reads only its own
 *   --sgs-me-loop-delay               a loop item's stagger delay (Sgs_Motion_Loop_Delays), inheriting, so it reaches
 *                                     the entrances inside the item; an entrance's own --sgs-me-delay wins over it
 *   data-sgs-in                       set by the reveal module (scroll) or the owning block (open, state)
 *   .sgs-motion-ready                 added by the reveal module; the only gate on a hidden start state
 *   span.sgs-motion-layer             an injected paint layer (aria-hidden), at most two per element
 *
 * The per-element `transition` list is the renderer's (each owner's own timing, never `all`).
 */

/* ── Owner custom properties (§10): typed, identity initial value, so each owner animates on its own timing.
   Channel owners never inherit (a nested target must not pick up its parent's lift or pointer angles); paint-slot
   and layer properties inherit so the pseudo-elements and layers see them, and the glare layer takes Follow
   pointer's angles from its element explicitly (below). The one perspective is `<length> | none` with initial none, which perspective() reads as no perspective. ── */
@property --sgs-me-tx { syntax: '<length-percentage>'; inherits: false; initial-value: 0px; }
@property --sgs-me-ty { syntax: '<length-percentage>'; inherits: false; initial-value: 0px; }
@property --sgs-mh-tx { syntax: '<length-percentage>'; inherits: false; initial-value: 0px; }
@property --sgs-mh-ty { syntax: '<length-percentage>'; inherits: false; initial-value: 0px; }
@property --sgs-mag-x { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --sgs-mag-y { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --sgs-plx-x { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --sgs-plx-y { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --sgs-float-x { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --sgs-float-y { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --sgs-kb-x { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --sgs-kb-y { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --sgs-rot-rest { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --sgs-mh-rot { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --sgs-me-rot { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --sgs-me-s { syntax: '<number>'; inherits: false; initial-value: 1; }
@property --sgs-me-sx { syntax: '<number>'; inherits: false; initial-value: 1; }
@property --sgs-me-sy { syntax: '<number>'; inherits: false; initial-value: 1; }
@property --sgs-mh-s { syntax: '<number>'; inherits: false; initial-value: 1; }
@property --sgs-focus-s { syntax: '<number>'; inherits: false; initial-value: 1; }
@property --sgs-kb-s { syntax: '<number>'; inherits: false; initial-value: 1; }
@property --sgs-float-s { syntax: '<number>'; inherits: false; initial-value: 1; }
@property --sgs-svl-s { syntax: '<number>'; inherits: false; initial-value: 1; }
@property --sgs-sp-x { syntax: '<number>'; inherits: false; initial-value: 1; }
@property --sgs-sp-y { syntax: '<number>'; inherits: false; initial-value: 1; }
@property --sgs-svl-op { syntax: '<number>'; inherits: false; initial-value: 1; }
@property --sgs-svl-rot { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --sgs-me-rx { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --sgs-me-ry { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --sgs-rx-rest { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --sgs-ry-rest { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --sgs-mh-rx { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --sgs-mh-ry { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --sgs-persp-self { syntax: '<length> | none'; inherits: false; initial-value: none; }
@property --sgs-tilt-x { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --sgs-tilt-y { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --sgs-me-op { syntax: '<number>'; inherits: false; initial-value: 1; }
@property --sgs-mh-op { syntax: '<number>'; inherits: false; initial-value: 1; }
@property --sgs-focus-op { syntax: '<number>'; inherits: false; initial-value: 1; }
@property --sgs-me-blur { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --sgs-mh-blur { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --sgs-gray-rest { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --sgs-mh-gray { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --sgs-mh-bright { syntax: '<number>'; inherits: false; initial-value: 1; }
@property --sgs-mh-indent { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --sgs-mh-w { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --sgs-mh-ring { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --sgs-mh-ring-c { syntax: '<color>'; inherits: false; initial-value: transparent; }
@property --sgs-mh-accent { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --sgs-mh-accent-c { syntax: '<color>'; inherits: false; initial-value: transparent; }
@property --sgs-me-clip-t { syntax: '<length-percentage>'; inherits: false; initial-value: 0%; }
@property --sgs-me-clip-r { syntax: '<length-percentage>'; inherits: false; initial-value: 0%; }
@property --sgs-me-clip-b { syntax: '<length-percentage>'; inherits: false; initial-value: 0%; }
@property --sgs-me-clip-l { syntax: '<length-percentage>'; inherits: false; initial-value: 0%; }
@property --sgs-me-clip-round { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --sgs-plx-bg-x { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --sgs-plx-bg-y { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --sgs-scroll-progress { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --sgs-cursor-field-radius { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --sgs-ripple-s { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --sgs-ripple-op { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --sgs-sheen-x { syntax: '<percentage>'; inherits: true; initial-value: 0%; }
@property --sgs-ring-x { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --sgs-ring-y { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --sgs-ring-s { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --sgs-reveal-x { syntax: '<length-percentage>'; inherits: false; initial-value: 50%; }
@property --sgs-reveal-y { syntax: '<length-percentage>'; inherits: false; initial-value: 40%; }

/* ── Per-element inputs (§10): the renderer writes each element's entrance from, to and timing values, its reveal start
   line, its hover to-values and its resting indent on that element's own scoped selector. They never inherit, so a
   nested element never takes an ancestor's value for an input it does not set (an X-only item entrance inside a grid
   entrance would otherwise drift by the grid's Y distance). The universal syntax with no initial value keeps an unset
   input guaranteed-invalid, so each var() below still falls back to the stylesheet's own default. A loop item's stagger
   delay reaches the entrances inside the item through the inheriting carrier --sgs-me-loop-delay instead. ── */
@property --sgs-me-from-tx { syntax: '*'; inherits: false; }
@property --sgs-me-from-ty { syntax: '*'; inherits: false; }
@property --sgs-me-from-rot { syntax: '*'; inherits: false; }
@property --sgs-me-from-rx { syntax: '*'; inherits: false; }
@property --sgs-me-from-ry { syntax: '*'; inherits: false; }
@property --sgs-me-from-s { syntax: '*'; inherits: false; }
@property --sgs-me-from-sx { syntax: '*'; inherits: false; }
@property --sgs-me-from-sy { syntax: '*'; inherits: false; }
@property --sgs-me-from-op { syntax: '*'; inherits: false; }
@property --sgs-me-from-blur { syntax: '*'; inherits: false; }
@property --sgs-me-from-clip { syntax: '*'; inherits: false; }
@property --sgs-me-from-clip-t { syntax: '*'; inherits: false; }
@property --sgs-me-from-clip-r { syntax: '*'; inherits: false; }
@property --sgs-me-from-clip-b { syntax: '*'; inherits: false; }
@property --sgs-me-from-clip-l { syntax: '*'; inherits: false; }
@property --sgs-me-from-clip-round { syntax: '*'; inherits: false; }
@property --sgs-me-to-tx { syntax: '*'; inherits: false; }
@property --sgs-me-to-ty { syntax: '*'; inherits: false; }
@property --sgs-me-to-rot { syntax: '*'; inherits: false; }
@property --sgs-me-to-rx { syntax: '*'; inherits: false; }
@property --sgs-me-to-ry { syntax: '*'; inherits: false; }
@property --sgs-me-to-s { syntax: '*'; inherits: false; }
@property --sgs-me-to-sx { syntax: '*'; inherits: false; }
@property --sgs-me-to-sy { syntax: '*'; inherits: false; }
@property --sgs-me-to-op { syntax: '*'; inherits: false; }
@property --sgs-me-to-blur { syntax: '*'; inherits: false; }
@property --sgs-me-to-clip { syntax: '*'; inherits: false; }
@property --sgs-me-to-clip-t { syntax: '*'; inherits: false; }
@property --sgs-me-to-clip-r { syntax: '*'; inherits: false; }
@property --sgs-me-to-clip-b { syntax: '*'; inherits: false; }
@property --sgs-me-to-clip-l { syntax: '*'; inherits: false; }
@property --sgs-me-to-clip-round { syntax: '*'; inherits: false; }
@property --sgs-me-dur { syntax: '*'; inherits: false; }
@property --sgs-me-delay { syntax: '*'; inherits: false; }
@property --sgs-me-ease { syntax: '*'; inherits: false; }
@property --sgs-me-start { syntax: '*'; inherits: false; }
@property --sgs-mh-to-tx { syntax: '*'; inherits: false; }
@property --sgs-mh-to-ty { syntax: '*'; inherits: false; }
@property --sgs-mh-to-rot { syntax: '*'; inherits: false; }
@property --sgs-mh-to-rx { syntax: '*'; inherits: false; }
@property --sgs-mh-to-ry { syntax: '*'; inherits: false; }
@property --sgs-mh-to-s { syntax: '*'; inherits: false; }
@property --sgs-mh-to-op { syntax: '*'; inherits: false; }
@property --sgs-mh-to-blur { syntax: '*'; inherits: false; }
@property --sgs-mh-to-gray { syntax: '*'; inherits: false; }
@property --sgs-mh-to-bright { syntax: '*'; inherits: false; }
@property --sgs-mh-to-indent { syntax: '*'; inherits: false; }
@property --sgs-mh-to-w { syntax: '*'; inherits: false; }
@property --sgs-w-rest { syntax: '*'; inherits: false; }
@property --sgs-mh-to-ring { syntax: '*'; inherits: false; }
@property --sgs-mh-to-ring-c { syntax: '*'; inherits: false; }
@property --sgs-mh-to-accent { syntax: '*'; inherits: false; }
@property --sgs-mh-to-accent-c { syntax: '*'; inherits: false; }
@property --sgs-pad-start-rest { syntax: '*'; inherits: false; }

/* ── The base animation (§9 entrance rule): an element's own looping animation, written by whatever owns it (the media
   atom's composed ken burns or svg presentation in media-element.css, the wave-gradient drift, the container ken
   burns) as one comma list per longhand, every list the same length. A playing entrance puts these lists first and
   its own channels after them, so the loop keeps running under the entrance and after it, and the entrance wins any
   property both animate while it plays. Per element, never inherited, so a child entrance never replays its parent's
   loop. ── */
@property --sgs-base-animation-name { syntax: '*'; inherits: false; }
@property --sgs-base-animation-duration { syntax: '*'; inherits: false; }
@property --sgs-base-animation-timing-function { syntax: '*'; inherits: false; }
@property --sgs-base-animation-delay { syntax: '*'; inherits: false; }
@property --sgs-base-animation-iteration-count { syntax: '*'; inherits: false; }
@property --sgs-base-animation-direction { syntax: '*'; inherits: false; }
@property --sgs-base-animation-fill-mode { syntax: '*'; inherits: false; }
@property --sgs-base-animation-timeline { syntax: '*'; inherits: false; }

/* ── Persistent channels (§10): declared only where a non-entrance owner writes that channel, so an element
   with nothing but an entrance never holds a transform, a filter or a containing block. ── */
[data-sgs-mc~="translate"] {
	translate: calc(var(--sgs-me-tx) + var(--sgs-mh-tx) + var(--sgs-mag-x) + var(--sgs-plx-x) + var(--sgs-float-x) + var(--sgs-kb-x)) calc(var(--sgs-me-ty) + var(--sgs-mh-ty) + var(--sgs-mag-y) + var(--sgs-plx-y) + var(--sgs-float-y) + var(--sgs-kb-y));
}
[data-sgs-mc~="rotate"] {
	rotate: calc(var(--sgs-rot-rest) + var(--sgs-me-rot) + var(--sgs-mh-rot) + var(--sgs-svl-rot));
}
[data-sgs-mc~="scale"] {
	scale: calc(var(--sgs-me-s) * var(--sgs-mh-s) * var(--sgs-focus-s) * var(--sgs-kb-s) * var(--sgs-float-s) * var(--sgs-svl-s) * var(--sgs-sp-x) * var(--sgs-me-sx)) calc(var(--sgs-me-s) * var(--sgs-mh-s) * var(--sgs-focus-s) * var(--sgs-kb-s) * var(--sgs-float-s) * var(--sgs-svl-s) * var(--sgs-sp-y) * var(--sgs-me-sy));
}
[data-sgs-mc~="opacity"] {
	opacity: calc(var(--sgs-me-op) * var(--sgs-mh-op) * var(--sgs-focus-op) * var(--sgs-svl-op));
}
[data-sgs-mc~="filter"] {
	filter: blur(calc(var(--sgs-me-blur) + var(--sgs-mh-blur))) grayscale(calc(var(--sgs-gray-rest) + var(--sgs-mh-gray))) brightness(var(--sgs-mh-bright));
}
[data-sgs-mc~="transform"] {
	transform: perspective(var(--sgs-persp-self)) rotateX(calc(var(--sgs-rx-rest) + var(--sgs-me-rx) + var(--sgs-mh-rx) + var(--sgs-tilt-x))) rotateY(calc(var(--sgs-ry-rest) + var(--sgs-me-ry) + var(--sgs-mh-ry) + var(--sgs-tilt-y)));
}
[data-sgs-mc~="padding-inline-start"] {
	padding-inline-start: calc(var(--sgs-pad-start-rest, 0px) + var(--sgs-mh-indent));
}
[data-sgs-mc~="width"] {
	width: calc(var(--sgs-w-rest, 100%) + (var(--sgs-mh-to-w, var(--sgs-w-rest, 100%)) - var(--sgs-w-rest, 100%)) * var(--sgs-mh-w));
}
[data-sgs-mc~="box-shadow"] {
	box-shadow: 0 0 0 var(--sgs-mh-ring) var(--sgs-mh-ring-c), inset 0 calc(-1 * var(--sgs-mh-accent)) 0 0 var(--sgs-mh-accent-c);
}
[data-sgs-mc~="background-position"] {
	background-position: calc(50% + var(--sgs-plx-bg-x)) calc(50% + var(--sgs-plx-bg-y));
}
/* A real <img> background (the hero's and a container's image layer) has no background-position to move, so the same
   offset moves the image through `translate`, and the image is overscanned 9% top and bottom so the travel never
   shows an edge. Where the element also holds the translate channel, the offset adds to that channel's formula. */
img[data-sgs-mc~="background-position"] {
	inset: -9% 0;
	height: 118%;
	translate: var(--sgs-plx-bg-x) var(--sgs-plx-bg-y);
}
img[data-sgs-mc~="background-position"][data-sgs-mc~="translate"] {
	translate: calc(var(--sgs-me-tx) + var(--sgs-mh-tx) + var(--sgs-mag-x) + var(--sgs-plx-x) + var(--sgs-float-x) + var(--sgs-kb-x) + var(--sgs-plx-bg-x)) calc(var(--sgs-me-ty) + var(--sgs-mh-ty) + var(--sgs-mag-y) + var(--sgs-plx-y) + var(--sgs-float-y) + var(--sgs-kb-y) + var(--sgs-plx-bg-y));
}

/* ── Hover state (§9, FR-38A-17): the hover values are the to-values times an engagement flag. The flag is set by
   the source's :hover (behind the touch-input guard of includes/helpers-hover-state.php, which only matches when the
   site chose "Desktop only"), and by :focus-visible / :has(:focus-visible) outside it, so keyboard users get the same result. Root, group and item flags
   inherit, and every root, group and item resets its own to 0, so a target follows its NEAREST root, group or item.
   A block with `sgsFocusRests` stamps `data-sgs-focus-rests` on its marked elements, and the focus arm skips them:
   its hover state plays on pointer hover only. ── */
[data-sgs-mh] { --sgs-mh-on: 0; }
[data-sgs-mh="root"] { --sgs-mh-on: var(--sgs-mh-root-on, 0); }
[data-sgs-mh="group"] { --sgs-mh-on: var(--sgs-mh-group-on, 0); }
[data-sgs-mh="item"] { --sgs-mh-on: var(--sgs-mh-item-on, 0); }
[data-sgs-mroot] { --sgs-mh-root-on: 0; }
[data-sgs-hover-group] { --sgs-mh-group-on: 0; }
[data-sgs-mitem] { --sgs-mh-item-on: 0; }

[data-sgs-mh="self"]:focus-visible:not([data-sgs-focus-rests]) { --sgs-mh-on: 1; }
[data-sgs-mroot]:focus-visible:not([data-sgs-focus-rests]),
[data-sgs-mroot]:has(:focus-visible):not([data-sgs-focus-rests]) { --sgs-mh-root-on: 1; }
[data-sgs-hover-group]:focus-visible:not([data-sgs-focus-rests]),
[data-sgs-hover-group]:has(:focus-visible):not([data-sgs-focus-rests]) { --sgs-mh-group-on: 1; }
[data-sgs-mitem]:focus-visible:not([data-sgs-focus-rests]),
[data-sgs-mitem]:has(:focus-visible):not([data-sgs-focus-rests]) { --sgs-mh-item-on: 1; }

:where(:root:not(.sgs-touch-input)) [data-sgs-mh="self"]:hover { --sgs-mh-on: 1; }
:where(:root:not(.sgs-touch-input)) [data-sgs-mroot]:hover { --sgs-mh-root-on: 1; }
:where(:root:not(.sgs-touch-input)) [data-sgs-hover-group]:hover { --sgs-mh-group-on: 1; }
:where(:root:not(.sgs-touch-input)) [data-sgs-mitem]:hover { --sgs-mh-item-on: 1; }

[data-sgs-mh] {
	--sgs-mh-tx: calc(var(--sgs-mh-to-tx, 0px) * var(--sgs-mh-on));
	--sgs-mh-ty: calc(var(--sgs-mh-to-ty, 0px) * var(--sgs-mh-on));
	--sgs-mh-rot: calc(var(--sgs-mh-to-rot, 0deg) * var(--sgs-mh-on));
	--sgs-mh-rx: calc(var(--sgs-mh-to-rx, 0deg) * var(--sgs-mh-on));
	--sgs-mh-ry: calc(var(--sgs-mh-to-ry, 0deg) * var(--sgs-mh-on));
	--sgs-mh-s: calc(1 + (var(--sgs-mh-to-s, 1) - 1) * var(--sgs-mh-on));
	--sgs-mh-op: calc(1 + (var(--sgs-mh-to-op, 1) - 1) * var(--sgs-mh-on));
	--sgs-mh-blur: calc(var(--sgs-mh-to-blur, 0px) * var(--sgs-mh-on));
	--sgs-mh-gray: calc(var(--sgs-mh-to-gray, 0) * var(--sgs-mh-on));
	--sgs-mh-bright: calc(1 + (var(--sgs-mh-to-bright, 1) - 1) * var(--sgs-mh-on));
	--sgs-mh-indent: calc(var(--sgs-mh-to-indent, 0px) * var(--sgs-mh-on));
	--sgs-mh-w: var(--sgs-mh-on);
	--sgs-mh-ring: calc(var(--sgs-mh-to-ring, 0px) * var(--sgs-mh-on));
	--sgs-mh-ring-c: var(--sgs-mh-to-ring-c, transparent);
	--sgs-mh-accent: calc(var(--sgs-mh-to-accent, 0px) * var(--sgs-mh-on));
	--sgs-mh-accent-c: var(--sgs-mh-to-accent-c, transparent);
}

/* ── Entrance (§9 entrance rule, FR-38A-18): each touched channel plays its own animation of the --sgs-me-*
   properties, and every keyframe declares that channel with the full composite formula, so nothing is held once
   it ends. Load plays with no JavaScript; a scroll reveal starts hidden only once the reveal module has run. ── */
@keyframes sgs-me-translate {
	from {
		--sgs-me-tx: var(--sgs-me-from-tx, 0px);
		--sgs-me-ty: var(--sgs-me-from-ty, 0px);
		translate: calc(var(--sgs-me-tx) + var(--sgs-mh-tx) + var(--sgs-mag-x) + var(--sgs-plx-x) + var(--sgs-float-x) + var(--sgs-kb-x)) calc(var(--sgs-me-ty) + var(--sgs-mh-ty) + var(--sgs-mag-y) + var(--sgs-plx-y) + var(--sgs-float-y) + var(--sgs-kb-y));
	}
	to {
		--sgs-me-tx: var(--sgs-me-to-tx, 0px);
		--sgs-me-ty: var(--sgs-me-to-ty, 0px);
		translate: calc(var(--sgs-me-tx) + var(--sgs-mh-tx) + var(--sgs-mag-x) + var(--sgs-plx-x) + var(--sgs-float-x) + var(--sgs-kb-x)) calc(var(--sgs-me-ty) + var(--sgs-mh-ty) + var(--sgs-mag-y) + var(--sgs-plx-y) + var(--sgs-float-y) + var(--sgs-kb-y));
	}
}
@keyframes sgs-me-rotate {
	from {
		--sgs-me-rot: var(--sgs-me-from-rot, 0deg);
		rotate: calc(var(--sgs-rot-rest) + var(--sgs-me-rot) + var(--sgs-mh-rot) + var(--sgs-svl-rot));
	}
	to {
		--sgs-me-rot: var(--sgs-me-to-rot, 0deg);
		rotate: calc(var(--sgs-rot-rest) + var(--sgs-me-rot) + var(--sgs-mh-rot) + var(--sgs-svl-rot));
	}
}
@keyframes sgs-me-transform {
	from {
		--sgs-me-rx: var(--sgs-me-from-rx, 0deg);
		--sgs-me-ry: var(--sgs-me-from-ry, 0deg);
		transform: perspective(var(--sgs-persp-self)) rotateX(calc(var(--sgs-rx-rest) + var(--sgs-me-rx) + var(--sgs-mh-rx) + var(--sgs-tilt-x))) rotateY(calc(var(--sgs-ry-rest) + var(--sgs-me-ry) + var(--sgs-mh-ry) + var(--sgs-tilt-y)));
	}
	to {
		--sgs-me-rx: var(--sgs-me-to-rx, 0deg);
		--sgs-me-ry: var(--sgs-me-to-ry, 0deg);
		transform: perspective(var(--sgs-persp-self)) rotateX(calc(var(--sgs-rx-rest) + var(--sgs-me-rx) + var(--sgs-mh-rx) + var(--sgs-tilt-x))) rotateY(calc(var(--sgs-ry-rest) + var(--sgs-me-ry) + var(--sgs-mh-ry) + var(--sgs-tilt-y)));
	}
}
@keyframes sgs-me-scale {
	from {
		--sgs-me-s: var(--sgs-me-from-s, 1);
		--sgs-me-sx: var(--sgs-me-from-sx, 1);
		--sgs-me-sy: var(--sgs-me-from-sy, 1);
		scale: calc(var(--sgs-me-s) * var(--sgs-mh-s) * var(--sgs-focus-s) * var(--sgs-kb-s) * var(--sgs-float-s) * var(--sgs-svl-s) * var(--sgs-sp-x) * var(--sgs-me-sx)) calc(var(--sgs-me-s) * var(--sgs-mh-s) * var(--sgs-focus-s) * var(--sgs-kb-s) * var(--sgs-float-s) * var(--sgs-svl-s) * var(--sgs-sp-y) * var(--sgs-me-sy));
	}
	to {
		--sgs-me-s: var(--sgs-me-to-s, 1);
		--sgs-me-sx: var(--sgs-me-to-sx, 1);
		--sgs-me-sy: var(--sgs-me-to-sy, 1);
		scale: calc(var(--sgs-me-s) * var(--sgs-mh-s) * var(--sgs-focus-s) * var(--sgs-kb-s) * var(--sgs-float-s) * var(--sgs-svl-s) * var(--sgs-sp-x) * var(--sgs-me-sx)) calc(var(--sgs-me-s) * var(--sgs-mh-s) * var(--sgs-focus-s) * var(--sgs-kb-s) * var(--sgs-float-s) * var(--sgs-svl-s) * var(--sgs-sp-y) * var(--sgs-me-sy));
	}
}
@keyframes sgs-me-opacity {
	from {
		--sgs-me-op: var(--sgs-me-from-op, 1);
		opacity: calc(var(--sgs-me-op) * var(--sgs-mh-op) * var(--sgs-focus-op) * var(--sgs-svl-op));
	}
	to {
		--sgs-me-op: var(--sgs-me-to-op, 1);
		opacity: calc(var(--sgs-me-op) * var(--sgs-mh-op) * var(--sgs-focus-op) * var(--sgs-svl-op));
	}
}
@keyframes sgs-me-filter {
	from {
		--sgs-me-blur: var(--sgs-me-from-blur, 0px);
		filter: blur(calc(var(--sgs-me-blur) + var(--sgs-mh-blur))) grayscale(calc(var(--sgs-gray-rest) + var(--sgs-mh-gray))) brightness(var(--sgs-mh-bright));
	}
	to {
		--sgs-me-blur: var(--sgs-me-to-blur, 0px);
		filter: blur(calc(var(--sgs-me-blur) + var(--sgs-mh-blur))) grayscale(calc(var(--sgs-gray-rest) + var(--sgs-mh-gray))) brightness(var(--sgs-mh-bright));
	}
}
/* The clip reveal: one owner per edge. Each edge reads its own holder (a one-edge clip, Sgs_Motion_Clip_Edge) and
   falls back to the uniform amount `--sgs-me-<from|to>-clip` (clipEdge all), so a uniform reveal renders as before. */
@keyframes sgs-me-clip-path {
	from {
		--sgs-me-clip-t: var(--sgs-me-from-clip-t, var(--sgs-me-from-clip, 0%));
		--sgs-me-clip-r: var(--sgs-me-from-clip-r, var(--sgs-me-from-clip, 0%));
		--sgs-me-clip-b: var(--sgs-me-from-clip-b, var(--sgs-me-from-clip, 0%));
		--sgs-me-clip-l: var(--sgs-me-from-clip-l, var(--sgs-me-from-clip, 0%));
		--sgs-me-clip-round: var(--sgs-me-from-clip-round, 0px);
		clip-path: inset(var(--sgs-me-clip-t) var(--sgs-me-clip-r) var(--sgs-me-clip-b) var(--sgs-me-clip-l) round var(--sgs-me-clip-round));
	}
	to {
		--sgs-me-clip-t: var(--sgs-me-to-clip-t, var(--sgs-me-to-clip, 0%));
		--sgs-me-clip-r: var(--sgs-me-to-clip-r, var(--sgs-me-to-clip, 0%));
		--sgs-me-clip-b: var(--sgs-me-to-clip-b, var(--sgs-me-to-clip, 0%));
		--sgs-me-clip-l: var(--sgs-me-to-clip-l, var(--sgs-me-to-clip, 0%));
		--sgs-me-clip-round: var(--sgs-me-to-clip-round, 0px);
		clip-path: inset(var(--sgs-me-clip-t) var(--sgs-me-clip-r) var(--sgs-me-clip-b) var(--sgs-me-clip-l) round var(--sgs-me-clip-round));
	}
}

@media (prefers-reduced-motion: no-preference) {
	/* The entrance's timing lives in custom properties, never in a bare animation longhand: a bare longhand here ties
	   with any class the element also carries (`.sgs-media-el` is 0,1,0 too), so the stylesheet printed last would
	   decide the entrance's duration, iteration count and direction. Every rule that plays an entrance (the playing
	   rule below, motion-triggers.css's open, close and state rules) writes all eight longhands from the
	   --sgs-me-a-list-* lists: the base animation's positions first, then one position per channel. --sgs-me-a-dur,
	   -ease, -delay and -fill are the per-channel values a trigger or a block overrides. */
	[data-sgs-me] {
		--sgs-me-a-translate: none;
		--sgs-me-a-rotate: none;
		--sgs-me-a-transform: none;
		--sgs-me-a-scale: none;
		--sgs-me-a-opacity: none;
		--sgs-me-a-filter: none;
		--sgs-me-a-clip-path: none;
		--sgs-me-a-dur: var(--sgs-me-dur, var(--wp--custom--entrance--duration, 750ms));
		--sgs-me-a-ease: var(--sgs-me-ease, var(--wp--custom--entrance--easing, ease-out));
		--sgs-me-a-delay: var(--sgs-me-delay, var(--sgs-me-loop-delay, 0ms));
		--sgs-me-a-fill: backwards;
		--sgs-me-a-list-name: var(--sgs-base-animation-name, none), var(--sgs-me-a-translate), var(--sgs-me-a-rotate), var(--sgs-me-a-transform), var(--sgs-me-a-scale), var(--sgs-me-a-opacity), var(--sgs-me-a-filter), var(--sgs-me-a-clip-path);
		--sgs-me-a-list-duration: var(--sgs-base-animation-duration, 0s), var(--sgs-me-a-dur), var(--sgs-me-a-dur), var(--sgs-me-a-dur), var(--sgs-me-a-dur), var(--sgs-me-a-dur), var(--sgs-me-a-dur), var(--sgs-me-a-dur);
		--sgs-me-a-list-timing-function: var(--sgs-base-animation-timing-function, ease), var(--sgs-me-a-ease), var(--sgs-me-a-ease), var(--sgs-me-a-ease), var(--sgs-me-a-ease), var(--sgs-me-a-ease), var(--sgs-me-a-ease), var(--sgs-me-a-ease);
		--sgs-me-a-list-delay: var(--sgs-base-animation-delay, 0s), var(--sgs-me-a-delay), var(--sgs-me-a-delay), var(--sgs-me-a-delay), var(--sgs-me-a-delay), var(--sgs-me-a-delay), var(--sgs-me-a-delay), var(--sgs-me-a-delay);
		--sgs-me-a-list-iteration-count: var(--sgs-base-animation-iteration-count, 1), 1, 1, 1, 1, 1, 1, 1;
		--sgs-me-a-list-direction: var(--sgs-base-animation-direction, normal), normal, normal, normal, normal, normal, normal, normal;
		--sgs-me-a-list-fill-mode: var(--sgs-base-animation-fill-mode, none), var(--sgs-me-a-fill), var(--sgs-me-a-fill), var(--sgs-me-a-fill), var(--sgs-me-a-fill), var(--sgs-me-a-fill), var(--sgs-me-a-fill), var(--sgs-me-a-fill);
		--sgs-me-a-list-timeline: var(--sgs-base-animation-timeline, auto), auto, auto, auto, auto, auto, auto, auto;
	}
	/* A disclosure panel's entrance defaults to the panel open-and-close duration (§7). */
	[data-sgs-me~="open"] {
		--sgs-me-a-dur: var(--sgs-me-dur, var(--wp--custom--duration--slow, 450ms));
	}
	[data-sgs-me~="translate"] { --sgs-me-a-translate: sgs-me-translate; }
	[data-sgs-me~="rotate"] { --sgs-me-a-rotate: sgs-me-rotate; }
	[data-sgs-me~="transform"] { --sgs-me-a-transform: sgs-me-transform; }
	[data-sgs-me~="scale"] { --sgs-me-a-scale: sgs-me-scale; }
	[data-sgs-me~="opacity"] { --sgs-me-a-opacity: sgs-me-opacity; }
	[data-sgs-me~="filter"] { --sgs-me-a-filter: sgs-me-filter; }
	[data-sgs-me~="clip-path"] { --sgs-me-a-clip-path: sgs-me-clip-path; }

	/* A multi-keyframe entrance is played by the WAAPI module (motion-keyframes.js), never by these two-state rules. */
	[data-sgs-me]:not([data-sgs-me-keyframes]):is([data-sgs-me~="load"], [data-sgs-in]) {
		animation-name: var(--sgs-me-a-list-name);
		animation-duration: var(--sgs-me-a-list-duration);
		animation-timing-function: var(--sgs-me-a-list-timing-function);
		animation-delay: var(--sgs-me-a-list-delay);
		animation-iteration-count: var(--sgs-me-a-list-iteration-count);
		animation-direction: var(--sgs-me-a-list-direction);
		animation-fill-mode: var(--sgs-me-a-list-fill-mode);
		animation-timeline: var(--sgs-me-a-list-timeline);
	}

	/* The hidden start state: only under the reveal module's class, only before the element is in view. */
	.sgs-motion-ready [data-sgs-me~="scroll"]:not([data-sgs-in])[data-sgs-me~="translate"] {
		--sgs-me-tx: var(--sgs-me-from-tx, 0px);
		--sgs-me-ty: var(--sgs-me-from-ty, 0px);
		translate: calc(var(--sgs-me-tx) + var(--sgs-mh-tx) + var(--sgs-mag-x) + var(--sgs-plx-x) + var(--sgs-float-x) + var(--sgs-kb-x)) calc(var(--sgs-me-ty) + var(--sgs-mh-ty) + var(--sgs-mag-y) + var(--sgs-plx-y) + var(--sgs-float-y) + var(--sgs-kb-y));
	}
	.sgs-motion-ready [data-sgs-me~="scroll"]:not([data-sgs-in])[data-sgs-me~="rotate"] {
		--sgs-me-rot: var(--sgs-me-from-rot, 0deg);
		rotate: calc(var(--sgs-rot-rest) + var(--sgs-me-rot) + var(--sgs-mh-rot) + var(--sgs-svl-rot));
	}
	.sgs-motion-ready [data-sgs-me~="scroll"]:not([data-sgs-in])[data-sgs-me~="transform"] {
		--sgs-me-rx: var(--sgs-me-from-rx, 0deg);
		--sgs-me-ry: var(--sgs-me-from-ry, 0deg);
		transform: perspective(var(--sgs-persp-self)) rotateX(calc(var(--sgs-rx-rest) + var(--sgs-me-rx) + var(--sgs-mh-rx) + var(--sgs-tilt-x))) rotateY(calc(var(--sgs-ry-rest) + var(--sgs-me-ry) + var(--sgs-mh-ry) + var(--sgs-tilt-y)));
	}
	.sgs-motion-ready [data-sgs-me~="scroll"]:not([data-sgs-in])[data-sgs-me~="scale"] {
		--sgs-me-s: var(--sgs-me-from-s, 1);
		--sgs-me-sx: var(--sgs-me-from-sx, 1);
		--sgs-me-sy: var(--sgs-me-from-sy, 1);
		scale: calc(var(--sgs-me-s) * var(--sgs-mh-s) * var(--sgs-focus-s) * var(--sgs-kb-s) * var(--sgs-float-s) * var(--sgs-svl-s) * var(--sgs-sp-x) * var(--sgs-me-sx)) calc(var(--sgs-me-s) * var(--sgs-mh-s) * var(--sgs-focus-s) * var(--sgs-kb-s) * var(--sgs-float-s) * var(--sgs-svl-s) * var(--sgs-sp-y) * var(--sgs-me-sy));
	}
	.sgs-motion-ready [data-sgs-me~="scroll"]:not([data-sgs-in])[data-sgs-me~="opacity"] {
		--sgs-me-op: var(--sgs-me-from-op, 1);
		opacity: calc(var(--sgs-me-op) * var(--sgs-mh-op) * var(--sgs-focus-op) * var(--sgs-svl-op));
	}
	.sgs-motion-ready [data-sgs-me~="scroll"]:not([data-sgs-in])[data-sgs-me~="filter"] {
		--sgs-me-blur: var(--sgs-me-from-blur, 0px);
		filter: blur(calc(var(--sgs-me-blur) + var(--sgs-mh-blur))) grayscale(calc(var(--sgs-gray-rest) + var(--sgs-mh-gray))) brightness(var(--sgs-mh-bright));
	}
	.sgs-motion-ready [data-sgs-me~="scroll"]:not([data-sgs-in])[data-sgs-me~="clip-path"] {
		--sgs-me-clip-t: var(--sgs-me-from-clip-t, var(--sgs-me-from-clip, 0%));
		--sgs-me-clip-r: var(--sgs-me-from-clip-r, var(--sgs-me-from-clip, 0%));
		--sgs-me-clip-b: var(--sgs-me-from-clip-b, var(--sgs-me-from-clip, 0%));
		--sgs-me-clip-l: var(--sgs-me-from-clip-l, var(--sgs-me-from-clip, 0%));
		--sgs-me-clip-round: var(--sgs-me-from-clip-round, 0px);
		clip-path: inset(var(--sgs-me-clip-t) var(--sgs-me-clip-r) var(--sgs-me-clip-b) var(--sgs-me-clip-l) round var(--sgs-me-clip-round));
	}
}

/* ── Paint slots (§10, FR-38A-49): one owner per pseudo-element, at most two injected layers. The host rule has
   zero specificity, so a block's own positioning always wins over it. ── */
:where([data-sgs-mc~="::before"], [data-sgs-mc~="::after"], [data-sgs-mc~="injected"]) {
	position: relative;
	isolation: isolate;
}
[data-sgs-mc~="::before"]::before,
[data-sgs-mc~="::after"]::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
}
.sgs-motion-layer {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	overflow: hidden;
	pointer-events: none;
}
/* The glare layer reads its own element's Follow pointer angles through two plain (unregistered, inheriting) copies
   taken on the element: an explicit `inherit` of the registered, non-inheriting angles reads 0deg in WebKit 26. The
   angles themselves never inherit, so a nested element never picks up its parent's pointer tilt. */
[data-sgs-mc~="injected"] {
	--sgs-glare-x: var(--sgs-tilt-x);
	--sgs-glare-y: var(--sgs-tilt-y);
}

/* ── Reduced motion (§12, FR-38A-27): nothing moves, every delay is zero, and colour, shadow, opacity and filter
   changes become instant state flips. Entrances show their final state, because the entrance rules above apply
   only under no-preference. The rest Z, X and Y angles and the rest grayscale are styling values and stay. ── */
@media (prefers-reduced-motion: reduce) {
	[data-sgs-mh] {
		--sgs-mh-indent: 0px;
		--sgs-mh-w: 0;
		--sgs-mh-tx: 0px;
		--sgs-mh-ty: 0px;
		--sgs-mh-rot: 0deg;
		--sgs-mh-rx: 0deg;
		--sgs-mh-ry: 0deg;
		--sgs-mh-s: 1;
	}
	:is([data-sgs-mh], [data-sgs-me], [data-sgs-mc]) {
		transition-duration: var(--wp--custom--duration--instant, 0ms) !important;
		transition-delay: initial !important;
		animation-delay: initial !important;
	}
}