/**
 * Maz Electric motion system.
 *
 * Governance:
 * - Reveal classes: .has-reveal, .has-reveal-children, .maz-trace
 * - Scroll-driven (animation-timeline: view()) with an
 *   IntersectionObserver fallback driven by assets/js/motion.js
 * - Fully suppressed under prefers-reduced-motion
 * - Not loaded in the editor (see functions.php: add_editor_style
 *   includes theme.css only)
 * - Print visibility handled in theme.css
 */

@media (prefers-reduced-motion: no-preference) {

	/* -------------------------------------------------------------- */
	/* Native scroll-driven path                                        */
	/* -------------------------------------------------------------- */

	@supports (animation-timeline: view()) {
		.has-reveal {
			animation: maz-reveal var(--wp--custom--animation--duration--base) var(--wp--custom--animation--easing--out) both;
			animation-timeline: view();
			animation-range: entry 10% entry 45%;
		}

		.has-reveal-children > * {
			animation: maz-reveal var(--wp--custom--animation--duration--base) var(--wp--custom--animation--easing--out) both;
			animation-timeline: view();
			animation-range: entry 10% entry 50%;
		}

		.maz-trace path {
			stroke-dasharray: 1;
			stroke-dashoffset: 1;
			animation: maz-trace-draw var(--wp--custom--animation--duration--slow) var(--wp--custom--animation--easing--out) both;
			animation-timeline: view();
			animation-range: entry 0% entry 70%;
		}
	}

	/* -------------------------------------------------------------- */
	/* Observer fallback: motion.js adds .is-revealed                   */
	/* -------------------------------------------------------------- */

	@supports not (animation-timeline: view()) {
		.has-reveal,
		.has-reveal-children > * {
			opacity: 0;
			translate: 0 var(--wp--custom--animation--distance--base);
			transition:
				opacity var(--wp--custom--animation--duration--base) var(--wp--custom--animation--easing--out),
				translate var(--wp--custom--animation--duration--base) var(--wp--custom--animation--easing--out);
		}

		.has-reveal.is-revealed,
		.has-reveal-children.is-revealed > * {
			opacity: 1;
			translate: 0 0;
		}

		/* Grid stagger, capped at eight children */

		.has-reveal-children.is-revealed > *:nth-child(2) { transition-delay: calc(var(--wp--custom--animation--stagger) * 1); }
		.has-reveal-children.is-revealed > *:nth-child(3) { transition-delay: calc(var(--wp--custom--animation--stagger) * 2); }
		.has-reveal-children.is-revealed > *:nth-child(4) { transition-delay: calc(var(--wp--custom--animation--stagger) * 3); }
		.has-reveal-children.is-revealed > *:nth-child(5) { transition-delay: calc(var(--wp--custom--animation--stagger) * 4); }
		.has-reveal-children.is-revealed > *:nth-child(6) { transition-delay: calc(var(--wp--custom--animation--stagger) * 5); }
		.has-reveal-children.is-revealed > *:nth-child(7) { transition-delay: calc(var(--wp--custom--animation--stagger) * 6); }
		.has-reveal-children.is-revealed > *:nth-child(n+8) { transition-delay: calc(var(--wp--custom--animation--stagger) * 7); }

		.maz-trace path {
			stroke-dasharray: 1;
			stroke-dashoffset: 1;
			transition: stroke-dashoffset var(--wp--custom--animation--duration--slow) var(--wp--custom--animation--easing--out);
		}

		.maz-trace.is-revealed path {
			stroke-dashoffset: 0;
		}
	}
}

@keyframes maz-reveal {
	from {
		opacity: 0;
		translate: 0 var(--wp--custom--animation--distance--base);
	}

	to {
		opacity: 1;
		translate: 0 0;
	}
}

@keyframes maz-trace-draw {
	from {
		stroke-dashoffset: 1;
	}

	to {
		stroke-dashoffset: 0;
	}
}