#wpapp-preloader {
	position: fixed;
	top: 0; left: 0;
	width: 100%; height: 100%;
	background: #000; /* Black background */
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 999999;
}

.wpapp-preloader-wrapper {
	position: relative;
	width: var(--wpapp-width, 250px);
	aspect-ratio: 1 / 1; /* ✅ Keep it a perfect square */
	overflow: hidden;
}

.wpapp-preloader-wrapper img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	opacity: 0.2; /* ✅ Light opacity like your example */
}

.wpapp-preloader-wrapper::after {
	content: "";
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	background: var(--wpapp-image) no-repeat center/contain;
	opacity: 1;
	clip-path: inset(100% 0 0 0);
	animation: wpapp-fill 5s linear infinite;
}

.wpapp-default-spinner {
	width: 64px;
	height: 64px;
	border: 6px solid rgba(255, 255, 255, 0.35);
	border-top-color: var(--wpapp-spinner-color, #24807e);
	border-radius: 50%;
	animation: wpapp-spin 0.9s linear infinite;
}

@keyframes wpapp-fill {
	0%   { clip-path: inset(100% 0 0 0); }
	100% { clip-path: inset(0 0 0 0); }
}

@keyframes wpapp-spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}
#wpapp-preloader[aria-busy="true"],
body.wpapp-preloader-active {
	overflow: hidden;
}