/* Background Animado com Mosaicos - Seção Sobre */

.about-section-animated {
	position: relative;
	overflow: hidden;
	background-color: #ffffff;
}

.animated-mosaic-bg {
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	z-index: 0;
	opacity: 0.25;
	background-image:
		/* Grid principal */
		repeating-linear-gradient(
			0deg,
			transparent,
			transparent 100px,
			#e5e5e5 100px,
			#e5e5e5 102px
		),
		repeating-linear-gradient(
			90deg,
			transparent,
			transparent 100px,
			#e5e5e5 100px,
			#e5e5e5 102px
		);
	animation: moveMosaicSmooth 12s linear infinite;
}

/* Garantir que o conteúdo fique acima do background */
.about-section-animated .container {
	position: relative;
	z-index: 1;
}

/* Animação diagonal suave */
@keyframes moveMosaicSmooth {
	0% {
		transform: translate(0, 0);
	}
	100% {
		transform: translate(100px, 100px);
	}
}

/* Responsive */
@media (max-width: 768px) {
	.animated-mosaic-bg {
		background-image:
			repeating-linear-gradient(
				0deg,
				transparent,
				transparent 70px,
				#e5e5e5 70px,
				#e5e5e5 72px
			),
			repeating-linear-gradient(
				90deg,
				transparent,
				transparent 70px,
				#e5e5e5 70px,
				#e5e5e5 72px
			);
		animation-duration: 9s;
	}

	@keyframes moveMosaicSmooth {
		0% {
			transform: translate(0, 0);
		}
		100% {
			transform: translate(70px, 70px);
		}
	}
}