/* =====================================================================
   Animate - reveal on scroll
   Defaults: 0.4s, 15px, ease. Set per element with modifier classes.
===================================================================== */

:root {
	--anim-duration: 0.4s;
	--anim-delay: 0s;
	--anim-distance: 15px;
	--anim-ease: ease;
}

@keyframes animFadeIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes animFadeUp {
	from { opacity: 0; transform: translateY(var(--anim-distance)); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes animFadeDown {
	from { opacity: 0; transform: translateY(calc(var(--anim-distance) * -1)); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes animFadeLeft {
	from { opacity: 0; transform: translateX(var(--anim-distance)); }
	to   { opacity: 1; transform: translateX(0); }
}

@keyframes animFadeRight {
	from { opacity: 0; transform: translateX(calc(var(--anim-distance) * -1)); }
	to   { opacity: 1; transform: translateX(0); }
}

/* Hidden until the observer marks it visible */
.anim-in,
.anim-up,
.anim-down,
.anim-left,
.anim-right,
.anim-child {
	opacity: 0;
	will-change: opacity, transform;
}

.anim-visible {
	animation-name: animFadeIn;
	animation-duration: var(--anim-duration);
	animation-delay: var(--anim-delay);
	animation-timing-function: var(--anim-ease);
	animation-fill-mode: both;
}

.anim-up.anim-visible,
.anim-stagger.anim-up .anim-visible    { animation-name: animFadeUp; }

.anim-down.anim-visible,
.anim-stagger.anim-down .anim-visible  { animation-name: animFadeDown; }

.anim-left.anim-visible,
.anim-stagger.anim-left .anim-visible  { animation-name: animFadeLeft; }

.anim-right.anim-visible,
.anim-stagger.anim-right .anim-visible { animation-name: animFadeRight; }

/* Stagger children default to fade up unless the parent says otherwise */
.anim-stagger .anim-visible { animation-name: animFadeUp; }
.anim-stagger.anim-in .anim-visible { animation-name: animFadeIn; }

/* ─── Modifiers ──────────────────────────────────────────────────── */

.anim-dur-2  { --anim-duration: 0.2s; }
.anim-dur-3  { --anim-duration: 0.3s; }
.anim-dur-4  { --anim-duration: 0.4s; }
.anim-dur-5  { --anim-duration: 0.5s; }
.anim-dur-6  { --anim-duration: 0.6s; }
.anim-dur-8  { --anim-duration: 0.8s; }
.anim-dur-10 { --anim-duration: 1s; }

.anim-delay-1 { --anim-delay: 0.1s; }
.anim-delay-2 { --anim-delay: 0.2s; }
.anim-delay-3 { --anim-delay: 0.3s; }
.anim-delay-4 { --anim-delay: 0.4s; }
.anim-delay-5 { --anim-delay: 0.5s; }
.anim-delay-7 { --anim-delay: 0.7s; }

.anim-dist-sm { --anim-distance: 8px; }
.anim-dist-md { --anim-distance: 15px; }
.anim-dist-lg { --anim-distance: 30px; }
.anim-dist-xl { --anim-distance: 50px; }

.anim-ease-out  { --anim-ease: cubic-bezier(0.22, 0.61, 0.36, 1); }
.anim-ease-snap { --anim-ease: cubic-bezier(0.33, 1, 0.68, 1); }
.anim-ease-flat { --anim-ease: linear; }

/* ─── Accessibility and failsafes ────────────────────────────────── */

@media (max-width: 767px) {
	.anim-no-mobile,
	.anim-no-mobile > *,
	.anim-no-mobile .anim-child {
		opacity: 1 !important;
		animation: none !important;
		transform: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	[class*="anim-"] {
		opacity: 1 !important;
		animation: none !important;
		transform: none !important;
	}
}

/* Elementor editor - never hide anything while building */
.elementor-editor-active [class*="anim-"] {
	opacity: 1 !important;
	animation: none !important;
	transform: none !important;
}