/* Ensure elements are hidden before JavaScript runs */
[data-animate]:not([data-animate=""]):not([data-animate="none"]) {
	opacity: 0;
	visibility: hidden;
	will-change: opacity, visibility, transform;
}

/* When JavaScript applies .animated, animations start */
[data-animate]:not([data-animate=""]):not([data-animate="none"]).animated {
	animation-name: var(--animation-name);
	animation-duration: var(--animation-speed);
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
	/* Removed animation-delay because JS handles the wait before adding the class */
	visibility: visible;
}

/* Temporary transition to smooth the initial snap for delayed scroll-tied animations */
[data-animate].animated.initial-transition {
	transition: opacity 0.5s ease-out, transform 0.5s ease-out !important;
}

@media (prefers-reduced-motion:reduce),
print {
	[data-animate].animated {
		animation-duration: 1ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 1ms !important
	}
}

/* Animation Keyframes */
@keyframes fadeIn {
	0% { opacity: 0; visibility: hidden; }
	1% { visibility: visible; }
	100% { opacity: 1; visibility: visible; }
}

@keyframes fadeInDown {
	0% { opacity: 0; transform: translate3d(0, -25px, 0) }
	100% { opacity: 1; transform: translateZ(0) }
}

@keyframes fadeInLeft {
	0% { opacity: 0; transform: translate3d(-25px, 0, 0) }
	100% { opacity: 1; transform: translateZ(0) }
}

@keyframes fadeInRight {
	0% { opacity: 0; transform: translate3d(25px, 0, 0) }
	100% { opacity: 1; transform: translateZ(0) }
}

@keyframes fadeInUp {
	0% { opacity: 0; transform: translate3d(0, 25px, 0) }
	100% { opacity: 1; transform: translateZ(0) }
}

@keyframes slideUp {
	0% { transform: translateY(30px); opacity: 0; visibility: hidden; }
	1% { visibility: visible; }
	100% { transform: translateY(0); opacity: 1; visibility: visible; }
}

@keyframes slideLeft {
	0% { transform: translateX(30px); opacity: 0; visibility: hidden; }
	1% { visibility: visible; }
	100% { transform: translateX(0); opacity: 1; visibility: visible; }
}

@keyframes heartBeat {
	0% { transform: scale(1) }
	14% { transform: scale(1.3) }
	28% { transform: scale(1) }
	42% { transform: scale(1.3) }
	70% { transform: scale(1) }
}

@keyframes wobble {
	0% { transform: translateZ(0) }
	15% { transform: translate3d(-25%, 0, 0) rotate(-5deg) }
	30% { transform: translate3d(20%, 0, 0) rotate(3deg) }
	45% { transform: translate3d(-15%, 0, 0) rotate(-3deg) }
	60% { transform: translate3d(10%, 0, 0) rotate(2deg) }
	75% { transform: translate3d(-5%, 0, 0) rotate(-1deg) }
	to { transform: translateZ(0) }
}