/**
 * F. Gaspari — Motion System v1
 *
 * Lightweight CSS motion primitives. JavaScript only adds state classes.
 * GSAP is deliberately reserved for complex narrative components.
 */

/* Motion never hides content unless JavaScript has initialized safely. */
.fg-motion-ready .fg-reveal,
.fg-motion-ready .fg-reveal-left,
.fg-motion-ready .fg-reveal-right,
.fg-motion-ready .fg-reveal-scale {
	opacity: 0;
	visibility: hidden;
	transition:
		opacity var(--fg-duration-standard) var(--fg-ease-standard),
		transform var(--fg-duration-standard) var(--fg-ease-standard);
}

.fg-motion-ready .fg-reveal {
	transform: translate3d(0, 24px, 0);
}

.fg-motion-ready .fg-reveal-left {
	transform: translate3d(-24px, 0, 0);
}

.fg-motion-ready .fg-reveal-right {
	transform: translate3d(24px, 0, 0);
}

.fg-motion-ready .fg-reveal-scale {
	transform: scale(0.985);
}

.fg-motion-ready .fg-reveal.is-revealed,
.fg-motion-ready .fg-reveal-left.is-revealed,
.fg-motion-ready .fg-reveal-right.is-revealed,
.fg-motion-ready .fg-reveal-scale.is-revealed {
	opacity: 1;
	visibility: visible;
	transform: none;
}

/* Image mask reveal. Apply to a wrapper around an image. */
.fg-motion-ready .fg-mask-reveal {
	visibility: hidden;
	clip-path: inset(0 100% 0 0);
	transition: clip-path var(--fg-duration-slow) var(--fg-ease-standard);
}

.fg-motion-ready .fg-mask-reveal.is-revealed {
	visibility: visible;
	clip-path: inset(0 0 0 0);
}

/* Thread draw. Apply to an element with a visible 1px line. */
.fg-motion-ready .fg-thread-reveal {
	visibility: hidden;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--fg-duration-standard) var(--fg-ease-standard);
}

.fg-motion-ready .fg-thread-reveal.is-revealed {
	visibility: visible;
	transform: scaleX(1);
}

/* Optional delay utilities. Keep after every transition shorthand so the
   equal-specificity utility wins without !important. */
.fg-motion-ready .fg-delay-1 { transition-delay: 80ms; }
.fg-motion-ready .fg-delay-2 { transition-delay: 160ms; }
.fg-motion-ready .fg-delay-3 { transition-delay: 240ms; }

/* Accessibility: users asking for less motion see the final state. */
@media (prefers-reduced-motion: reduce) {
	/* !important guarantees the final accessible state over reveal utilities. */
	.fg-motion-ready .fg-reveal,
	.fg-motion-ready .fg-reveal-left,
	.fg-motion-ready .fg-reveal-right,
	.fg-motion-ready .fg-reveal-scale,
	.fg-motion-ready .fg-mask-reveal,
	.fg-motion-ready .fg-thread-reveal {
		opacity: 1 !important;
		visibility: visible !important;
		transform: none !important;
		clip-path: none !important;
		transition: none !important;
	}
}