@charset "utf-8";

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

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

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

@keyframes fadeOut {
	from { opacity: 1; }
	to { opacity: 0; visibility: hidden; }
}

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

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

@keyframes bounce {
	0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
	40% { transform: translateX(-50%) translateY(-10px); }
	60% { transform: translateX(-50%) translateY(-5px); }
}

@keyframes scaleIn {
	from { opacity: 0; transform: scale(0.9); }
	to { opacity: 1; transform: scale(1); }
}

@keyframes pulse {
	0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.4); }
	70% { box-shadow: 0 0 0 15px rgba(37, 99, 235, 0); }
	100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
}


/* --------------------------------------------------- Scroll Animations --------------------------------------------------- */
.animate-on-scroll {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

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

.animate-fade-in {
	opacity: 0;
	transition: opacity 0.6s ease;
}

.animate-fade-in.animated {
	opacity: 1;
}

.animate-slide-left {
	opacity: 0;
	transform: translateX(-40px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.animate-slide-left.animated {
	opacity: 1;
	transform: translateX(0);
}

.animate-slide-right {
	opacity: 0;
	transform: translateX(40px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.animate-slide-right.animated {
	opacity: 1;
	transform: translateX(0);
}

.animate-scale {
	opacity: 0;
	transform: scale(0.9);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.animate-scale.animated {
	opacity: 1;
	transform: scale(1);
}


/* --------------------------------------------------- Staggered Delays --------------------------------------------------- */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }
.delay-6 { transition-delay: 0.6s; }


/* --------------------------------------------------- Hover Animations --------------------------------------------------- */
.hover-lift {
	transition: transform var(--transition), box-shadow var(--transition);
}

.hover-lift:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-md);
}

.hover-glow:hover {
	box-shadow: 0 0 20px rgba(37, 99, 235, 0.15);
}


/* --------------------------------------------------- Loading Skeleton --------------------------------------------------- */
@keyframes shimmer {
	0% { background-position: -200% 0; }
	100% { background-position: 200% 0; }
}

.skeleton {
	background: linear-gradient(90deg, var(--bg-subtle) 25%, var(--border-light) 50%, var(--bg-subtle) 75%);
	background-size: 200% 100%;
	animation: shimmer 1.5s infinite;
	border-radius: var(--radius-sm);
}