/* Fondo decorativo de login y registro: resplandor que pulsa despacio detras de la tarjeta e
   iconos del juego muy tenues a los lados (solo en pantallas anchas). Todo es mejora opcional: si el
   navegador no entiende alguna propiedad o el usuario pidio "reducir movimiento", la pantalla queda
   con el degradado estatico de la pagina. */
.container-login100 {
	position: relative;
	overflow: hidden;
}
.container-login100::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 44%;
	width: 900px;
	height: 900px;
	margin: -450px 0 0 -450px;
	background: radial-gradient(circle, rgba(124, 79, 216, .38) 0%, rgba(124, 79, 216, 0) 62%);
	pointer-events: none;
	animation: dp-fondo-pulso 8s ease-in-out infinite;
}
.wrap-login100 {
	position: relative;
	z-index: 1;
}

.dp-fondo {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	pointer-events: none;
	z-index: 0;
}
.dp-fondo svg {
	position: absolute;
	height: auto;
	opacity: .2;
	-webkit-filter: blur(.6px);
	filter: blur(.6px);
	animation: dp-fondo-flota 9s ease-in-out infinite;
}
.dp-fondo .dp-f-pregunta { left: 9%;  top: 16%; width: 96px; animation-delay: 0s; }
.dp-fondo .dp-f-estrella { left: 15%; top: 68%; width: 56px; animation-delay: -3s; }
.dp-fondo .dp-f-rayo     { right: 10%; top: 20%; width: 84px; animation-delay: -5s; }
.dp-fondo .dp-f-copa     { right: 14%; top: 66%; width: 88px; animation-delay: -2s; }
.dp-fondo .dp-f-estrella2 { right: 27%; top: 46%; width: 36px; animation-delay: -6s; }
.dp-fondo .dp-f-pregunta2 { left: 26%; top: 44%; width: 40px; animation-delay: -4s; }

@keyframes dp-fondo-pulso {
	0%, 100% { opacity: .55; transform: scale(.94); }
	50%      { opacity: 1;   transform: scale(1.06); }
}
@keyframes dp-fondo-flota {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-12px); }
}

/* En pantallas angostas los iconos taparian la tarjeta: se ocultan. */
@media (max-width: 899px) {
	.dp-fondo { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.container-login100::before,
	.dp-fondo svg { animation: none; }
}
