/**
 * Animation Extension
 *
 * 7 animation types with initial (hidden) and fired states.
 * Intersection Observer in app.js triggers the -fired class.
 *
 * @package StartLike_Editor
 */

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

@keyframes sleBounceIn {
	0% {
		opacity: 0;
		transform: scale(0.3);
	}
	50% {
		opacity: 1;
		transform: scale(1.05);
	}
	70% {
		transform: scale(0.9);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes sleBounceDown {
	0% {
		opacity: 0;
		transform: translateY(-60px);
	}
	60% {
		opacity: 1;
		transform: translateY(10px);
	}
	80% {
		transform: translateY(-5px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

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

@keyframes sleFadeInUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes sleFadeInDown {
	from {
		opacity: 0;
		transform: translateY(-30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes sleFadeInLeft {
	from {
		opacity: 0;
		transform: translateX(-30px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes sleFadeInRight {
	from {
		opacity: 0;
		transform: translateX(30px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

/* ==========================================================================
   Initial States (hidden before animation fires)
   ========================================================================== */

.sle-animation-bounce-in {
	opacity: 0;
	transform: scale(0.3);
}

.sle-animation-bounce-down {
	opacity: 0;
	transform: translateY(-60px);
}

.sle-animation-fade-in {
	opacity: 0;
}

.sle-animation-fade-in-up {
	opacity: 0;
	transform: translateY(30px);
}

.sle-animation-fade-in-down {
	opacity: 0;
	transform: translateY(-30px);
}

.sle-animation-fade-in-left {
	opacity: 0;
	transform: translateX(-30px);
}

.sle-animation-fade-in-right {
	opacity: 0;
	transform: translateX(30px);
}

/* ==========================================================================
   Fired States (visible after animation triggers)
   ========================================================================== */

.sle-animation-bounce-in-fired {
	opacity: 0;
	will-change: animation;
	animation: sleBounceIn 0.8s cubic-bezier(0, 0, 0, 1) forwards;
}

.sle-animation-bounce-down-fired {
	opacity: 0;
	will-change: animation;
	animation: sleBounceDown 0.8s cubic-bezier(0, 0, 0, 1) forwards;
}

.sle-animation-fade-in-fired {
	opacity: 0;
	will-change: animation;
	animation: sleFadeIn 0.6s cubic-bezier(0, 0, 0, 1) forwards;
}

.sle-animation-fade-in-up-fired {
	opacity: 0;
	will-change: animation;
	animation: sleFadeInUp 0.6s cubic-bezier(0, 0, 0, 1) forwards;
}

.sle-animation-fade-in-down-fired {
	opacity: 0;
	will-change: animation;
	animation: sleFadeInDown 0.6s cubic-bezier(0, 0, 0, 1) forwards;
}

.sle-animation-fade-in-left-fired {
	opacity: 0;
	will-change: animation;
	animation: sleFadeInLeft 0.6s cubic-bezier(0, 0, 0, 1) forwards;
}

.sle-animation-fade-in-right-fired {
	opacity: 0;
	will-change: animation;
	animation: sleFadeInRight 0.6s cubic-bezier(0, 0, 0, 1) forwards;
}