@keyframes loopBg {
	0% {
		background-position: 200% 0%;
	}
	100% {
		background-position: 00% 0%;
	}
}

@keyframes floating {
	0% {
		transform: translateY(-50%);
	}
	50% {
		transform: translateY(calc(-50% - var(--floating-distance)));
	}
	100% {
		transform: translateY(-50%);
	}
}

@keyframes blink {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}


.inFromLeft:not(.appear) {
	transform: translateX(-100vw);
	opacity: 0;
}

.inFromLeft,
.inFromRight {
	transition: transform 0.75s 0.25s ease-out, opacity 0.75s 0.25s ease-out;
}

.inFromRight:not(.appear) {
	transform: translateX(100vw);
	opacity: 0;
}

/* Skill rows: freeze container, animate cards individually */
#skillsContainer .skillCardsContainer.inFromLeft:not(.appear),
#skillsContainer .skillCardsContainer.inFromRight:not(.appear) {
	transform: none;
	opacity: 1;
}

#skillsContainer .skillCardsContainer.inFromLeft:not(.appear) .skillCard,
#skillsContainer .skillCardsContainer.inFromRight:not(.appear) .skillCard {
	opacity: 0;
	animation: none;
}

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

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

#skillsContainer .skillCardsContainer.inFromLeft.appear .skillCard {
	animation:
		slideInLeft 0.7s calc(var(--card-index) * 60ms) ease-out both,
		floatCards calc(5s * var(--random, 1)) calc(var(--card-index) * 60ms + 0.7s) ease-in-out infinite;
}

#skillsContainer .skillCardsContainer.inFromRight.appear .skillCard {
	animation:
		slideInRight 0.7s calc(var(--card-index) * 60ms) ease-out both,
		floatCards calc(5s * var(--random, 1)) calc(var(--card-index) * 60ms + 0.7s) ease-in-out infinite;
}

/* Project filter tags: staggered slide in from left */
#projectsTagsSelection .projectTag.inFromLeft.appear {
	animation: slideInLeft 0.9s calc(var(--tag-index, 0) * 65ms) ease-out backwards;
}

/* Project cards: staggered slide in per row, then release transform for open/close transition */
#projectsContainer .projectPreview.inFromLeft.appear {
	animation: slideInLeft 1s calc(var(--card-index, 0) * 120ms) ease-out backwards;
}

#projectsContainer .projectPreview.inFromRight.appear {
	animation: slideInRight 1s calc(var(--card-index, 0) * 120ms) ease-out backwards;
}