/**
 * Animated Background - Gaming Theme
 *
 * Fondo animado con temática de videojuegos
 * Color rojo vino con elementos en movimiento
 */

/* Fondo principal con gradiente alegre infantil */
body {
	background: linear-gradient(135deg, #AEFFFF 0%, #7EC8E3 50%, #AEFFFF 100%) !important;
	background-attachment: fixed !important;
	position: relative !important;
	overflow-x: hidden !important;
}

/* Container para las animaciones de fondo */
.game-background {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	z-index: -1 !important;
	overflow: hidden !important;
	pointer-events: none !important;
}

/* Capa de puntos en movimiento */
.bg-dots {
	position: absolute !important;
	width: 100% !important;
	height: 100% !important;
	background-image:
		radial-gradient(circle, rgba(255, 215, 8, 0.15) 1px, transparent 1px),
		radial-gradient(circle, rgba(255, 145, 77, 0.12) 1px, transparent 1px) !important;
	background-size: 50px 50px, 80px 80px !important;
	background-position: 0 0, 25px 25px !important;
	animation: moveDots 20s linear infinite !important;
}

@keyframes moveDots {
	0% {
		background-position: 0 0, 25px 25px;
	}
	100% {
		background-position: 50px 50px, 75px 75px;
	}
}

/* Líneas diagonales animadas */
.bg-lines {
	position: absolute !important;
	width: 100% !important;
	height: 100% !important;
	opacity: 0.15 !important;
}

.bg-line {
	position: absolute !important;
	width: 2px !important;
	height: 100% !important;
	background: linear-gradient(180deg,
		transparent 0%,
		rgba(255, 215, 8, 0.3) 50%,
		transparent 100%) !important;
	animation: moveLine 15s linear infinite !important;
}

.bg-line:nth-child(1) {
	left: 10% !important;
	animation-delay: 0s !important;
	animation-duration: 12s !important;
}

.bg-line:nth-child(2) {
	left: 25% !important;
	animation-delay: -3s !important;
	animation-duration: 15s !important;
}

.bg-line:nth-child(3) {
	left: 40% !important;
	animation-delay: -6s !important;
	animation-duration: 18s !important;
}

.bg-line:nth-child(4) {
	left: 55% !important;
	animation-delay: -9s !important;
	animation-duration: 14s !important;
}

.bg-line:nth-child(5) {
	left: 70% !important;
	animation-delay: -12s !important;
	animation-duration: 16s !important;
}

.bg-line:nth-child(6) {
	left: 85% !important;
	animation-delay: -5s !important;
	animation-duration: 13s !important;
}

@keyframes moveLine {
	0% {
		transform: translateY(-100%) scaleY(0);
	}
	50% {
		transform: translateY(0%) scaleY(1);
	}
	100% {
		transform: translateY(100%) scaleY(0);
	}
}

/* Iconos de gaming flotantes */
.game-icons {
	position: absolute !important;
	width: 100% !important;
	height: 100% !important;
}

.game-icon {
	position: absolute !important;
	font-size: 24px !important;
	opacity: 0.2 !important;
	animation: floatIcon 20s ease-in-out infinite !important;
	color: #FF914D !important;
}

/* Distribución de iconos */
.game-icon:nth-child(1) {
	left: 5% !important;
	top: 10% !important;
	animation-delay: 0s !important;
	animation-duration: 15s !important;
}

.game-icon:nth-child(2) {
	left: 15% !important;
	top: 60% !important;
	animation-delay: -3s !important;
	animation-duration: 18s !important;
}

.game-icon:nth-child(3) {
	left: 30% !important;
	top: 30% !important;
	animation-delay: -6s !important;
	animation-duration: 20s !important;
}

.game-icon:nth-child(4) {
	left: 50% !important;
	top: 70% !important;
	animation-delay: -9s !important;
	animation-duration: 16s !important;
}

.game-icon:nth-child(5) {
	left: 65% !important;
	top: 20% !important;
	animation-delay: -12s !important;
	animation-duration: 22s !important;
}

.game-icon:nth-child(6) {
	left: 80% !important;
	top: 50% !important;
	animation-delay: -5s !important;
	animation-duration: 19s !important;
}

.game-icon:nth-child(7) {
	left: 90% !important;
	top: 80% !important;
	animation-delay: -8s !important;
	animation-duration: 17s !important;
}

.game-icon:nth-child(8) {
	left: 20% !important;
	top: 85% !important;
	animation-delay: -11s !important;
	animation-duration: 21s !important;
}

@keyframes floatIcon {
	0%, 100% {
		transform: translateY(0) rotate(0deg) scale(1);
		opacity: 0.1;
	}
	25% {
		transform: translateY(-20px) rotate(5deg) scale(1.1);
		opacity: 0.2;
	}
	50% {
		transform: translateY(-40px) rotate(-5deg) scale(1.05);
		opacity: 0.15;
	}
	75% {
		transform: translateY(-20px) rotate(3deg) scale(1.08);
		opacity: 0.18;
	}
}

/* Partículas flotantes (canvas) */
.particles-canvas {
	position: absolute !important;
	width: 100% !important;
	height: 100% !important;
	top: 0 !important;
	left: 0 !important;
}

/* Efectos de resplandor */
.bg-glow {
	position: absolute !important;
	width: 100% !important;
	height: 100% !important;
}

.glow-circle {
	position: absolute !important;
	border-radius: 50% !important;
	background: radial-gradient(circle, rgba(255, 215, 8, 0.12) 0%, rgba(255, 145, 77, 0.08) 50%, transparent 70%) !important;
	animation: pulseGlow 8s ease-in-out infinite !important;
}

.glow-circle:nth-child(1) {
	width: 300px !important;
	height: 300px !important;
	top: 10% !important;
	left: 20% !important;
	animation-delay: 0s !important;
}

.glow-circle:nth-child(2) {
	width: 400px !important;
	height: 400px !important;
	top: 50% !important;
	right: 15% !important;
	animation-delay: -4s !important;
}

.glow-circle:nth-child(3) {
	width: 250px !important;
	height: 250px !important;
	bottom: 15% !important;
	left: 60% !important;
	animation-delay: -2s !important;
}

@keyframes pulseGlow {
	0%, 100% {
		transform: scale(1);
		opacity: 0.3;
	}
	50% {
		transform: scale(1.2);
		opacity: 0.5;
	}
}

/* Asegurar que el contenido esté por encima */
.site-main,
.container {
	position: relative !important;
	z-index: 1 !important;
	background: rgba(255, 255, 255, 0.5) !important;
	border-radius: 12px !important;
	padding: 20px !important;
	margin-top: 20px !important;
	margin-bottom: 20px !important;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

/* Responsive */
@media (max-width: 768px) {
	.game-icon {
		font-size: 18px !important;
	}

	.bg-line {
		width: 1px !important;
	}

	.glow-circle {
		width: 200px !important;
		height: 200px !important;
	}
}

/* Reducir animaciones en dispositivos de bajo rendimiento */
@media (prefers-reduced-motion: reduce) {
	.bg-dots,
	.bg-line,
	.game-icon,
	.glow-circle {
		animation: none !important;
	}
}