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

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

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

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

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

@keyframes slideInRight {
	from { transform: translateX(100%); }
	to { transform: translateX(0); }
}

@keyframes slideInLeft {
	from { transform: translateX(-100%); }
	to { transform: translateX(0); }
}

@keyframes pulse {
	0% { box-shadow: 0 0 0 0 rgba(211, 47, 47, 0.45); }
	70% { box-shadow: 0 0 0 14px rgba(211, 47, 47, 0); }
	100% { box-shadow: 0 0 0 0 rgba(211, 47, 47, 0); }
}

@keyframes shimmer {
	0% { background-position: 100% 0; }
	100% { background-position: -100% 0; }
}

@keyframes float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-12px); }
}

@keyframes countUp {
	from { opacity: 0.5; transform: scale(0.95); }
	to { opacity: 1; transform: scale(1); }
}

@keyframes confetti {
	0% { transform: translateY(0) rotate(0); opacity: 1; }
	100% { transform: translateY(-40px) rotate(180deg); opacity: 0; }
}

@keyframes flyToCart {
	0% { transform: scale(1); opacity: 1; }
	100% { transform: translate(-180px, -120px) scale(0.2); opacity: 0; }
}

@keyframes shake {
	0%, 100% { transform: translateX(0); }
	20%, 60% { transform: translateX(8px); }
	40%, 80% { transform: translateX(-8px); }
}

@keyframes checkmark {
	from { stroke-dashoffset: 24; }
	to { stroke-dashoffset: 0; }
}

.animate-on-scroll {
	opacity: 1;
	transform: translateY(0);
	transition: opacity 0.4s var(--havir-ease-out), transform 0.4s var(--havir-ease-out);
}

.animate-on-scroll.animated {
	opacity: 1 !important;
	transform: translateY(0) !important;
}

.fade-in { animation: fadeIn 0.25s var(--havir-ease-out) both; }
.fade-in-up { animation: fadeInUp 0.35s var(--havir-ease-out) both; }
.fade-in-down { animation: fadeInDown 0.35s var(--havir-ease-out) both; }
.fade-in-right { animation: fadeInRight 0.35s var(--havir-ease-out) both; }
.fade-in-left { animation: fadeInLeft 0.35s var(--havir-ease-out) both; }
.slide-in-right { animation: slideInRight 0.3s var(--havir-ease-out) both; }
.slide-in-left { animation: slideInLeft 0.3s var(--havir-ease-out) both; }
.pulse { animation: pulse 1.6s infinite; }
.float { animation: float 3.5s ease-in-out infinite; }
.shake { animation: shake 0.4s var(--havir-ease-out) both; }

.skeleton {
	background: linear-gradient(90deg, #f0f0f4 25%, #fbfbfd 37%, #f0f0f4 63%);
	background-size: 300% 100%;
	animation: shimmer 1.2s ease-in-out infinite;
	color: transparent;
	border-radius: var(--havir-radius-sm);
}

.transition-fast { transition-duration: 0.15s; }
.transition-normal { transition-duration: 0.25s; }
.transition-slow { transition-duration: 0.5s; }

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.001ms !important;
	}
}