/* ===================================================================
   ASTYLIO Reveal — fade + slide-up section reveals
   Step 8 Premium Motion. Uses IntersectionObserver (astylio-reveal.js).
   Content is visible by default; JS adds .is-revealed to trigger animation.
   =================================================================== */

/* --- Base reveal: hidden state (only when JS has initialized) --- */
.js-reveal {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity var(--astylio-duration-reveal, 500ms) var(--astylio-ease-enter, cubic-bezier(0.16, 1, 0.3, 1)),
	            transform var(--astylio-duration-reveal, 500ms) var(--astylio-ease-enter, cubic-bezier(0.16, 1, 0.3, 1));
	will-change: opacity, transform;
}

.js-reveal.is-revealed {
	opacity: 1;
	transform: translateY(0);
}

/* --- Stagger children (lightweight, max 4 items) --- */
.js-reveal-stagger > * {
	opacity: 0;
	transform: translateY(10px);
	transition: opacity var(--astylio-duration-reveal, 500ms) var(--astylio-ease-enter, cubic-bezier(0.16, 1, 0.3, 1)),
	            transform var(--astylio-duration-reveal, 500ms) var(--astylio-ease-enter, cubic-bezier(0.16, 1, 0.3, 1));
	will-change: opacity, transform;
}

.js-reveal-stagger.is-revealed > *:nth-child(1) { transition-delay: 0ms; }
.js-reveal-stagger.is-revealed > *:nth-child(2) { transition-delay: 60ms; }
.js-reveal-stagger.is-revealed > *:nth-child(3) { transition-delay: 120ms; }
.js-reveal-stagger.is-revealed > *:nth-child(4) { transition-delay: 180ms; }

.js-reveal-stagger.is-revealed > * {
	opacity: 1;
	transform: translateY(0);
}

/* --- Reduced motion: content visible immediately --- */
@media (prefers-reduced-motion: reduce) {
	.js-reveal,
	.js-reveal-stagger > * {
		opacity: 1;
		transform: none;
		transition: none;
	}
}