/**
 * Bottom Blur Effect Styles
 * Efecto de blur en la parte inferior que desaparece al llegar al final
 */

#bottom-blur-overlay {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 20px;
	/* Gradiente de arriba (transparente) hacia abajo (más opaco pero nunca totalmente blanco) */
	background: linear-gradient(
		to bottom,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0.02) 6%,
		rgba(255, 255, 255, 0.04) 12%,
		rgba(255, 255, 255, 0.07) 18%,
		rgba(255, 255, 255, 0.10) 24%,
		rgba(255, 255, 255, 0.14) 30%,
		rgba(255, 255, 255, 0.18) 36%,
		rgba(255, 255, 255, 0.22) 42%,
		rgba(255, 255, 255, 0.26) 48%,
		rgba(255, 255, 255, 0.30) 54%,
		rgba(255, 255, 255, 0.33) 60%,
		rgba(255, 255, 255, 0.36) 66%,
		rgba(255, 255, 255, 0.38) 72%,
		rgba(255, 255, 255, 0.40) 78%,
		rgba(255, 255, 255, 0.42) 84%,
		rgba(255, 255, 255, 0.43) 90%,
		rgba(255, 255, 255, 0.44) 96%,
		rgba(255, 255, 255, 0.45) 100%
	);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	pointer-events: none;
	z-index: 9998;
	opacity: 1;
	transition: opacity 0.4s ease-out;
}

#bottom-blur-overlay.scrolled-to-bottom {
	opacity: 0;
	pointer-events: none;
}

@media (max-width: 768px) {
	#bottom-blur-overlay {
		height: 50px;
		backdrop-filter: blur(6px);
		-webkit-backdrop-filter: blur(6px);
	}
}