/**
 * GS Core Pure — Motion Stylesheet
 * GPU-only (transform, opacity, filter), Single Vector Intent, Reduced-Motion Safe
 */

/* Baseline state when JavaScript is enabled */
.js [data-motion]:not(.motion-ready) {
	opacity: 0;
	pointer-events: none;
}

/* Base animated element rules */
[data-motion] {
	transition-property: opacity, transform, filter;
	transition-duration: 0.65s;
	transition-timing-function: var(--ease-out);
	transition-delay: var(--local-motion-delay);
	will-change: opacity, transform;
}

/* Motion Variants */
[data-motion="fade-up"]:not(.motion-ready) {
	transform: translate3d(0, var(--local-motion-distance), 0);
}

[data-motion="fade-down"]:not(.motion-ready) {
	transform: translate3d(0, calc(-1 * var(--local-motion-distance), 0);
}

[data-motion="fade-left"]:not(.motion-ready) {
	transform: translate3d(var(--local-motion-distance), 0, 0);
}

[data-motion="fade-right"]:not(.motion-ready) {
	transform: translate3d(calc(-1 * var(--local-motion-distance), 0, 0);
}

[data-motion="zoom-in"]:not(.motion-ready) {
	transform: scale3d(0.95, 0.95, 1);
}

/* Active animated state */
[data-motion].motion-ready {
	opacity: 1;
	transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
	pointer-events: auto;
}

/* Stagger Children Support */
[data-motion="stagger"] > * {
	opacity: 0;
	transform: translate3d(0, 1rem, 0);
	transition: opacity 0.5s var(--ease-out),
	            transform 0.5s var(--ease-out);
	will-change: opacity, transform;
}

[data-motion="stagger"].motion-ready > * {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}

/* Stagger Child Delays (Pure CSS Math) */
[data-motion="stagger"].motion-ready > *:nth-child(1) { transition-delay: 50ms; }
[data-motion="stagger"].motion-ready > *:nth-child(2) { transition-delay: 100ms; }
[data-motion="stagger"].motion-ready > *:nth-child(3) { transition-delay: 150ms; }
[data-motion="stagger"].motion-ready > *:nth-child(4) { transition-delay: 200ms; }
[data-motion="stagger"].motion-ready > *:nth-child(5) { transition-delay: 250ms; }
[data-motion="stagger"].motion-ready > *:nth-child(6) { transition-delay: 300ms; }

/* Accessible Reduced Motion */
@media (prefers-reduced-motion: reduce) {
	.js [data-motion]:not(.motion-ready),
	[data-motion],
	[data-motion].motion-ready,
	[data-motion="stagger"] > *,
	[data-motion="stagger"].motion-ready > * {
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
		transition: none !important;
		pointer-events: auto !important;
	}
}