/**
 * Adams Scroll Animations — frontend styles.
 *
 * Initial (hidden) state on [data-adams-scroll]; the .adams-is-visible class
 * (added by frontend.js on scroll) transitions each element into place.
 * All animation is opacity + transform only, for compositor-friendly perf.
 *
 * @package AdamsScrollAnimations
 */

[data-adams-scroll] {
	opacity: 0;
	transition-property: opacity, transform;
	transition-duration: 0.7s;
	transition-timing-function: cubic-bezier( 0.22, 0.61, 0.36, 1 );
	transition-delay: 0ms;
	will-change: opacity, transform;
}

/* Per-block delay, driven by the data-adams-delay attribute. */
[data-adams-scroll][data-adams-delay="100"] {
	transition-delay: 100ms;
}

[data-adams-scroll][data-adams-delay="200"] {
	transition-delay: 200ms;
}

[data-adams-scroll][data-adams-delay="300"] {
	transition-delay: 300ms;
}

[data-adams-scroll][data-adams-delay="500"] {
	transition-delay: 500ms;
}

/* Starting transforms per animation type. */
[data-adams-animation="fade-in"] {
	transform: none;
}

[data-adams-animation="slide-up"] {
	transform: translateY( 2.5em );
}

[data-adams-animation="slide-left"] {
	/* Element starts to the right, slides left into place. */
	transform: translateX( 2.5em );
}

[data-adams-animation="slide-right"] {
	/* Element starts to the left, slides right into place. */
	transform: translateX( -2.5em );
}

/* Resting (visible) state — applied once the element scrolls into view. */
[data-adams-scroll].adams-is-visible {
	opacity: 1;
	transform: none;
}

/* Respect users who prefer reduced motion: no transition, always visible. */
@media ( prefers-reduced-motion: reduce ) {
	[data-adams-scroll] {
		opacity: 1;
		transform: none;
		transition: none;
		will-change: auto;
	}
}