/**
 * Common Animation keyframes
 *
 * This file contains frequently used utility class combinations to reduce repetition
 * in your components and improve consistency across the application.
 */
@keyframes border-glow {
	0% {
		box-shadow: 0 0 10px hsl(var(--color-primary) / 0.5);
	}
	50% {
		box-shadow: 0 0 20px hsl(var(--color-primary) / 0.8);
	}
	100% {
		box-shadow: 0 0 10px hsl(var(--color-primary) / 0.5);
	}
}

@keyframes ripple-down {
	0%,
	100% {
		transform: translateY(0);
		opacity: 0.8;
	}
	50% {
		transform: translateY(4px);
		opacity: 1;
	}
}

/* Define keyframes for fade-in */
@keyframes fade-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Define keyframes for fade-in-only without translation */
@keyframes fade-in-only {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes pulse-in {
	0% {
		transform: scale(0.95);
		opacity: 0;
	}
	100% {
		transform: scale(1);
		opacity: 1;
	}
}

@keyframes border-glow {
	0% {
		box-shadow: 0 0 10px hsl(var(--color-primary) / 0.5);
	}
	50% {
		box-shadow: 0 0 20px hsl(var(--color-primary) / 0.8);
	}
	100% {
		box-shadow: 0 0 10px hsl(var(--color-primary) / 0.5);
	}
}

@keyframes ripple-down {
	0%,
	100% {
		transform: translateY(0);
		opacity: 0.8;
	}
	50% {
		transform: translateY(4px);
		opacity: 1;
	}
}

/* Define keyframes for fade-in */
@keyframes fade-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Define keyframes for fade-in-only without translation */
@keyframes fade-in-only {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* Icon animation */
@keyframes icon-subtle-wiggle {
	0%,
	100% {
		transform: rotate(0deg);
	}
	25% {
		transform: rotate(-15deg);
	}
	75% {
		transform: rotate(15deg);
	}
}
