/**
 * DTEC animation utility classes.
 *
 * Add `dtec-animate` + a direction class to any element.
 * Element starts invisible, animates in when `.is-visible` is added.
 *
 * Usage:
 *   <div class="dtec-animate fade-up">...</div>
 *
 * Trigger via JS:
 *   el.classList.add('is-visible');
 *
 * Or auto-trigger on scroll with IntersectionObserver (see animations.js).
 *
 * Stagger with `--delay` custom property:
 *   <div class="dtec-animate fade-up" style="--delay: 0.1s">...</div>
 */

/* --- Base: hidden until triggered --- */

.dtec-animate {
	opacity: 0;
	will-change: opacity, transform;
	transition:
		opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1) var(--delay, 0s),
		transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) var(--delay, 0s);
}

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

/* --- Direction variants --- */

.dtec-animate.fade-up {
	transform: translateY(24px);
}

.dtec-animate.fade-down {
	transform: translateY(-24px);
}

.dtec-animate.fade-left {
	transform: translateX(24px);
}

.dtec-animate.fade-right {
	transform: translateX(-24px);
}

.dtec-animate.fade-in {
	transform: none;
}

.dtec-animate.scale-in {
	transform: scale(0.85);
}

.dtec-animate.scale-up {
	transform: scale(0.5);
}

/* --- Speed modifiers --- */

.dtec-animate.fast {
	transition-duration: 0.3s;
}

.dtec-animate.slow {
	transition-duration: 0.8s;
}

/* --- Bounce variant (for icons, checkmarks) --- */

.dtec-animate.bounce {
	transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* --- Respect reduced motion --- */

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