/* 1. Preloader Overlay */
#preloader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #ffffff;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 9999;
	transition:
		opacity 0.5s ease,
		visibility 0.5s ease;
}

/* 2. Responsive Container */
.loader-container {
	/* Mobile-first size */
	width: 120px;
	height: auto;
	/* Flex center the SVG internally */
	display: flex;
	justify-content: center;
	align-items: center;
	animation: bouncePulse 2s ease-in-out infinite;
}

/* Desktop scale-up using Media Query */
@media (min-width: 768px) {
	.loader-container {
		width: 200px;
	}
}

/* 3. The SVG itself - ensures it fills its responsive container */
.loader-container svg {
	width: 100%;
	height: auto;
	display: block;
}

/* 4. A clean "Bouncing Pulse" animation */
@keyframes bouncePulse {
	0%,
	100% {
		transform: scale(0.9);
		opacity: 0.8;
	}

	50% {
		transform: scale(1.05);
		opacity: 1;
	}
}

/* Hidden state for JS */
.preloader-hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}