/* ============================================
   LALMEK Reveal FX - Scroll Animations
   ============================================
   Usage:
   - Class:     <div class="reveal-fade-up">
   - Attribute: <div data-reveal="fade-up">
   ============================================ */

/* ------------------------------------------
   Initial hidden state
   ------------------------------------------ */
[data-reveal],
[class*="reveal-"] {
	opacity: 0;
	will-change: opacity, transform;
	transition-property: opacity, transform;
	transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
	transition-duration: 600ms;
	transition-delay: 0ms;
}

/* ------------------------------------------
   Visible state
   ------------------------------------------ */
[data-reveal].is-visible,
[class*="reveal-"].is-visible {
	opacity: 1;
	transform: none;
}

/* ------------------------------------------
   Effect variants - initial transforms
   ------------------------------------------ */
[data-reveal="fade-up"],
.reveal-fade-up {
	transform: translateY(40px);
}

[data-reveal="fade-down"],
.reveal-fade-down {
	transform: translateY(-40px);
}

[data-reveal="fade-left"],
.reveal-fade-left {
	transform: translateX(-40px);
}

[data-reveal="fade-right"],
.reveal-fade-right {
	transform: translateX(40px);
}

[data-reveal="zoom-in"],
.reveal-zoom-in {
	transform: scale(0.9);
}

[data-reveal="zoom-out"],
.reveal-zoom-out {
	transform: scale(1.1);
}

[data-reveal="flip-up"],
.reveal-flip-up {
	transform: perspective(600px) rotateX(15deg);
	backface-visibility: hidden;
}

[data-reveal="fade"],
.reveal-fade {
	transform: none;
}

/* ------------------------------------------
   Page builder edit modes — show everything
   ------------------------------------------ */
.fl-builder-edit [data-reveal],
.fl-builder-edit [class*="reveal-"] {
	opacity: 1 !important;
	transform: none !important;
	transition: none !important;
}

/* ------------------------------------------
   Reduced motion preference
   ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	[data-reveal],
	[class*="reveal-"] {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}