.fade-in {
	animation: fadeIn 0.8s ease-out forwards;
}

.skill-tag {
	transition: all 0.3s ease-in-out;
}

.skill-tag.active-skill {
	animation: highlight 2s ease-in-out infinite;
	color: #e5e7eb;
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(20px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes move {
	0% {
		transform: translateY(0) rotate(0deg);
		opacity: 1;
	}

	100% {
		transform: translateY(-120vh) rotate(720deg);
		opacity: 0;
	}
}

@keyframes highlight {
	0%,
	100% {
		animation-timing-function: ease-in-out;
		background-color: color-mix(
			in srgb,
			var(--highlight-color) 25%,
			transparent
		);
	}

	50% {
		box-shadow: 0 0 16px var(--highlight-color),
			inset 0 0 10px var(--highlight-color);
		background-color: color-mix(
			in srgb,
			var(--highlight-color) 35%,
			transparent
		);
	}
}