/**
 * VM Base Theme - Scroll Animations
 *
 * Reusable scroll-triggered animation classes.
 * Apply .vm-animate + a variant class to any element.
 * The IntersectionObserver in animations.js adds .is-visible when
 * the element enters the viewport, triggering the transition.
 *
 * Usage:
 *   <div class="vm-animate vm-fade-up">...</div>
 *   <div class="vm-animate vm-fade-left vm-delay-2">...</div>
 *
 * @package VM_Base_Theme
 * @since 1.0.0
 */

/* ==========================================================================
   Keyframes
   ========================================================================== */

@keyframes vm-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes vm-fade-up {
	from { opacity: 0; transform: translateY(40px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes vm-fade-down {
	from { opacity: 0; transform: translateY(-40px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes vm-fade-left {
	from { opacity: 0; transform: translateX(40px); }
	to   { opacity: 1; transform: translateX(0); }
}

@keyframes vm-fade-right {
	from { opacity: 0; transform: translateX(-40px); }
	to   { opacity: 1; transform: translateX(0); }
}

@keyframes vm-zoom-in {
	from { opacity: 0; transform: scale(0.92); }
	to   { opacity: 1; transform: scale(1); }
}

/* ==========================================================================
   Base state — hidden before observer fires
   ========================================================================== */

.vm-animate {
	opacity: 0;
	transition:
		opacity 0.6s ease,
		transform 0.6s ease;
	will-change: opacity, transform;
}

/* Keyframe variants handle their own motion — don't also transition opacity */
.vm-animate.is-visible[class*="vm-fade"],
.vm-animate.is-visible.vm-zoom-in {
	transition: none;
}

/* ==========================================================================
   Variant starting transforms
   ========================================================================== */

.vm-fade-in {
	/* opacity only — no transform needed */
}

.vm-fade-up {
	transform: translateY(40px);
}

.vm-fade-down {
	transform: translateY(-40px);
}

.vm-fade-left {
	transform: translateX(40px);
}

.vm-fade-right {
	transform: translateX(-40px);
}

.vm-zoom-in {
	transform: scale(0.92);
}

/* ==========================================================================
   Visible state — added by IntersectionObserver
   ========================================================================== */

.vm-animate.is-visible {
	opacity: 1;
	transform: none;
}

.vm-animate.is-visible.vm-fade-in {
	animation: vm-fade-in var(--vm-animate-duration, 0.6s) ease both;
}

.vm-animate.is-visible.vm-fade-up {
	animation: vm-fade-up var(--vm-animate-duration, 0.6s) ease both;
	transform: none;
}

.vm-animate.is-visible.vm-fade-down {
	animation: vm-fade-down var(--vm-animate-duration, 0.6s) ease both;
	transform: none;
}

.vm-animate.is-visible.vm-fade-left {
	animation: vm-fade-left var(--vm-animate-duration, 0.6s) ease both;
	transform: none;
}

.vm-animate.is-visible.vm-fade-right {
	animation: vm-fade-right var(--vm-animate-duration, 0.6s) ease both;
	transform: none;
}

.vm-animate.is-visible.vm-zoom-in {
	animation: vm-zoom-in var(--vm-animate-duration, 0.6s) ease both;
	transform: none;
}

/* ACF block shells: stay visible when inner elements handle scroll motion */
.vm-cb-main.vm-animate:has(.vm-animate),
.vm-cb-main.vm-animate:has(.anim-ready) {
	opacity: 1;
	transform: none;
}

.vm-cb-main.vm-animate:has(.vm-animate).is-visible,
.vm-cb-main.vm-animate:has(.anim-ready).is-visible {
	transition: none;
	animation: none;
}

/* ==========================================================================
   Delay utilities
   ========================================================================== */

.vm-delay-1 { transition-delay: 100ms; animation-delay: 100ms; }
.vm-delay-2 { transition-delay: 200ms; animation-delay: 200ms; }
.vm-delay-3 { transition-delay: 300ms; animation-delay: 300ms; }
.vm-delay-4 { transition-delay: 400ms; animation-delay: 400ms; }
.vm-delay-5 { transition-delay: 500ms; animation-delay: 500ms; }
.vm-delay-6 { transition-delay: 600ms; animation-delay: 600ms; }

/* ==========================================================================
   Duration utilities (optional overrides)
   ========================================================================== */

.vm-duration-fast   { transition-duration: 0.35s; animation-duration: 0.35s; }
.vm-duration-normal { transition-duration: 0.6s; animation-duration: 0.6s; }
.vm-duration-slow   { transition-duration: 1s; animation-duration: 1s; }

/* ==========================================================================
   Reduced motion — respect user preference
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.vm-animate {
		opacity: 1;
		transform: none;
		transition: none;
		animation: none;
	}

	.vm-animate.is-visible {
		transition: none;
		animation: none;
	}
}