body {
	font-family: "Inter", sans-serif;
}

.grainy-bg {
	background: linear-gradient(
		135deg,
		#000000 0%,
		#1a1a1a 25%,
		#2d2d2d 50%,
		#1a1a1a 75%,
		#000000 100%
	);
	position: relative;
}

.grainy-bg::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.1'/%3E%3C/svg%3E");
	opacity: 0.3;
	z-index: -1;
}

.album-card {
	transform: translateY(20px);
	opacity: 0;
	animation: fadeInUp 0.8s ease-out forwards;
}

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

.album-card:nth-child(1) {
	animation-delay: 0.1s;
}

.album-card:nth-child(2) {
	animation-delay: 0.2s;
}

.album-card:nth-child(3) {
	animation-delay: 0.3s;
}

.album-card:nth-child(4) {
	animation-delay: 0.4s;
}

.album-card:nth-child(5) {
	animation-delay: 0.5s;
}

.album-card:nth-child(n + 6) {
	animation-delay: 0.6s;
}

.album-image {
	transition: transform 0.3s ease;
}

.album-card:hover .album-image {
	transform: scale(1.02);
}

.skeleton {
	background: linear-gradient(90deg, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%);
	background-size: 200% 100%;
	animation: loading 1.5s infinite;
}

@keyframes loading {
	0% {
		background-position: 200% 0;
	}

	100% {
		background-position: -200% 0;
	}
}

.line-clamp-2 {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}