.content-section#about {
	position: relative;
	background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.025), transparent);
	background-size: 100% 300%;
	background-position: 0 0;
	animation: about-gradient 12s ease-in-out infinite;
}

.about-shine {
	position: absolute;
	z-index: 2;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	height: 100%;
	background:
		linear-gradient(180deg, rgba(255, 151, 77, 0.15) 0%, rgba(255, 72, 71, 0.2) 50%, rgba(255, 151, 77, 0.15) 100%);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	filter: blur(28px);
	mix-blend-mode: screen;
	opacity: 0;
	pointer-events: none;
	animation: about-pulse-fade 6s ease-in-out infinite;
	overflow: hidden;
}

@keyframes about-gradient {
	0%,
	100% {
		background-position: 0 0;
	}

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

@keyframes about-pulse-fade {
	0%,
	100% {
		opacity: 0;
	}

	50% {
		opacity: 0.35;
	}
}

.info-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(14px, 2vw, 20px);
}

.info-card {
	min-width: 0;
	padding: clamp(20px, 2.2vw, 26px);
	border: 1px solid var(--border);
	border-radius: 18px;
	background: linear-gradient(145deg, rgba(38, 41, 46, 0.8), rgba(25, 27, 31, 0.9));
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
	transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
	animation: card-appear 0.6s ease-out backwards;
}

.info-card:hover {
	transform: translateY(-4px);
	border-color: rgba(255, 32, 40, 0.68);
	background: linear-gradient(145deg, rgba(255, 32, 40, 0.15), rgba(255, 32, 40, 0.08));
	box-shadow: 0 8px 20px rgba(255, 32, 40, 0.25);
}

.card-symbol {
	display: grid;
	width: 46px;
	height: 46px;
	flex: 0 0 auto;
	place-items: center;
	margin-bottom: 17px;
	border-radius: 14px;
	background: rgba(225, 38, 59, 0.14);
	color: var(--red-light);
	font-size: 22px;
	line-height: 1;
}

.info-card h3 {
	margin-bottom: 8px;
}

.info-card p {
	color: var(--muted);
	font-size: 14.5px;
	line-height: 1.7;
}

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

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

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

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

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

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

@keyframes card-appear {
	from {
		opacity: 0;
		transform: translateY(20px);
	}

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

.content-section#about h2 span {
	background: linear-gradient(
		105deg,
		var(--red) 0%,
		var(--red) 38%,
		rgba(255, 244, 216, 0.52) 48%,
		rgba(255, 155, 50, 0.46) 52%,
		var(--red) 62%,
		var(--red) 100%
	);
	background-clip: text;
	background-size: 250% 100%;
	background-position: 100% 0;
	color: transparent;
	-webkit-background-clip: text;
	filter: drop-shadow(0 0 8px rgba(255, 32, 40, 0.22));
	animation: name-shine 3.8s ease-in-out infinite;
}

@keyframes name-shine {
	0%,
	8% {
		background-position: 100% 0;
	}

	48%,
	100% {
		background-position: 0 0;
	}
}

@media (max-width: 1000px) {
	.info-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.info-card:last-child {
		grid-column: 1 / -1;
	}
}

@media (max-width: 540px) {
	.info-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.info-card:last-child {
		grid-column: auto;
	}

	.info-card {
		padding: 22px;
	}
}