/* Ensure elements are hidden before JavaScript runs */
[data-animate] {
	opacity: 1;
	visibility: visible;
	will-change: opacity, visibility, transform;
}

/* When JavaScript applies .animated, animations start */
[data-animate].animated {
	animation-name: var(--animation-name);
	animation-duration: var(--animation-speed);
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
	animation-delay: var(--animation-delay);
}

/* Ensure animation does not reset */
.animate-on-scroll {
	animation-fill-mode: forwards;
}

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


[data-animate="fadeIn"],
[data-animate="fadeInDown"],
[data-animate="fadeInDownBig"],
[data-animate="fadeInLeft"],
[data-animate="fadeInLeftBig"],
[data-animate="fadeInRight"],
[data-animate="fadeInRightBig"],
[data-animate="fadeInUp"],
[data-animate="fadeInUpBig"] {
	opacity: 0;
}

/* Example animations with visibility fix */
@keyframes fadeIn {
	0% { opacity: 0; visibility: hidden; }
	1% { visibility: visible; }
	100% { opacity: 1; visibility: visible; }
}

@keyframes fadeOut {
	0% { opacity: 1; visibility: visible; }
	100% { opacity: 0; visibility: hidden; }
}

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

@keyframes fadeInDownBig{
	0%{
		opacity:0;
		transform:translate3d(0,-30%,0)
	}
	100% {
		opacity:1;
		transform:translateZ(0)
	}
}

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

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

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

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

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

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

[data-animate="bounce"] {
	animation-name: bounce;
	transform-origin: center bottom;
}

@keyframes bounce{
	0%,20%,53%,to{
		animation-timing-function:cubic-bezier(.215,.61,.355,1);
		transform:translateZ(0)
	}
	40%,43%{
		animation-timing-function:cubic-bezier(.755,.05,.855,.06);
		transform:translate3d(0,-30px,0) scaleY(1.1)
	}
	70%{
		animation-timing-function:cubic-bezier(.755,.05,.855,.06);
		transform:translate3d(0,-15px,0) scaleY(1.05)
	}
	80%{
		transform:translateZ(0) scaleY(.95);
		transition-timing-function:cubic-bezier(.215,.61,.355,1)
	}
	90%{
		transform:translate3d(0,-4px,0) scaleY(1.02)
	}
}


@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; }
}

[data-animate="heartBeat"] {
	animation-duration:1.3s;
	animation-duration:calc(var(--animation-speed)*1.3);
	animation-name:heartBeat;
	animation-timing-function:ease-in-out
}

@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)
	}
}