/**
 * EB Global Theme - Scroll Animations
 *
 * Premium scroll-triggered reveal animations.
 * Uses GPU-composited properties only (opacity, transform).
 * Inspired by Cosmax editorial transitions.
 *
 * @package EB_Global_Theme
 * @since 1.0.0
 */

/* ==========================================================================
   Base Reveal — Fade Up (default)
   ========================================================================== */

[data-reveal] {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity var(--transition-reveal), transform var(--transition-reveal);
	will-change: opacity, transform;
}

[data-reveal].revealed {
	opacity: 1;
	transform: translateY(0);
}

/* ==========================================================================
   Reveal Variants
   ========================================================================== */

/* Fade in from left */
[data-reveal="left"] {
	transform: translateX(-40px);
}

[data-reveal="left"].revealed {
	transform: translateX(0);
}

/* Fade in from right */
[data-reveal="right"] {
	transform: translateX(40px);
}

[data-reveal="right"].revealed {
	transform: translateX(0);
}

/* Scale up */
[data-reveal="scale"] {
	transform: scale(0.92);
}

[data-reveal="scale"].revealed {
	transform: scale(1);
}

/* Fade only (no movement) */
[data-reveal="fade"] {
	transform: none;
}

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

/* Slide up from further */
[data-reveal="up-lg"] {
	transform: translateY(60px);
}

[data-reveal="up-lg"].revealed {
	transform: translateY(0);
}

/* ==========================================================================
   Stagger Delays — for child elements
   ========================================================================== */

[data-reveal-delay="1"] { transition-delay: 100ms; }
[data-reveal-delay="2"] { transition-delay: 200ms; }
[data-reveal-delay="3"] { transition-delay: 300ms; }
[data-reveal-delay="4"] { transition-delay: 400ms; }
[data-reveal-delay="5"] { transition-delay: 500ms; }
[data-reveal-delay="6"] { transition-delay: 600ms; }

/* ==========================================================================
   Elementor Integration — Auto-reveal on Elementor sections
   ========================================================================== */

/* Apply reveal to Elementor sections and columns */
.elementor-section[data-reveal],
.elementor-column[data-reveal],
.elementor-widget[data-reveal] {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity var(--transition-reveal), transform var(--transition-reveal);
}

.elementor-section[data-reveal].revealed,
.elementor-column[data-reveal].revealed,
.elementor-widget[data-reveal].revealed {
	opacity: 1;
	transform: translateY(0);
}

/* ==========================================================================
   Hover Animations
   ========================================================================== */

.eb-hover-lift {
	transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.eb-hover-lift:hover {
	transform: translateY(-6px);
	box-shadow: var(--shadow-lg);
}

.eb-hover-scale {
	transition: transform var(--transition-normal);
}

.eb-hover-scale:hover {
	transform: scale(1.03);
}

/* Image zoom on hover (for cards) */
.eb-hover-zoom {
	overflow: hidden;
}

.eb-hover-zoom img {
	transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

.eb-hover-zoom:hover img {
	transform: scale(1.08);
}

/* ==========================================================================
   Page Transition
   ========================================================================== */

.eb-page-enter {
	animation: ebPageEnter 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes ebPageEnter {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ==========================================================================
   Parallax-lite (CSS only, subtle)
   ========================================================================== */

.eb-parallax {
	will-change: transform;
	transition: transform 100ms linear;
}

/* ==========================================================================
   Reduced Motion — Respect user preference
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	[data-reveal] {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.eb-hover-lift:hover,
	.eb-hover-scale:hover,
	.eb-hover-zoom:hover img {
		transform: none;
	}

	.eb-page-enter {
		animation: none;
	}
}