/* ==========================================================================
   MakeAdera Scroll Reveal Stylesheet
   Reusable reveal-on-scroll states. Pairs with scroll-reveal.js.
   Author: aderaDev

   The hidden state is scoped under html.ma-reveal-ready (added by the JS),
   so content stays fully visible when JavaScript is unavailable.
   ========================================================================== */

html.ma-reveal-ready [data-reveal] {
	opacity: 0;
	transform: translateY(36px);
	transition:
		opacity 1.3s cubic-bezier(0.22, 1, 0.36, 1),
		transform 1.3s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: opacity, transform;
}

/* Direction variants */
html.ma-reveal-ready [data-reveal="left"] {
	transform: translateX(-44px);
}

html.ma-reveal-ready [data-reveal="right"] {
	transform: translateX(44px);
}

html.ma-reveal-ready [data-reveal="fade"] {
	transform: none;
}

/* Revealed state */
html.ma-reveal-ready [data-reveal].is-revealed {
	opacity: 1;
	transform: none;
}

/* Reduced motion: never hide or animate */
@media (prefers-reduced-motion: reduce) {
	html.ma-reveal-ready [data-reveal] {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}