.angie-preloader {
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	background: linear-gradient(-45deg, var(--preloader-bg-1, #ffffff), var(--preloader-bg-2, #f0f0f0), var(--preloader-bg-3, #e0e0e0));
	background-size: 400% 400%;
	animation: gradientBG 5s ease infinite;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}

@keyframes gradientBG {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

.angie-preloader.angie-preloader-hidden {
	opacity: 0;
	visibility: hidden;
}

.angie-preloader-content {
	display: flex;
	flex-direction: column;
	align-items: center;
    justify-content: center;
}

.angie-preloader-logo {
	max-width: 200px;
	height: auto;
	margin-bottom: 30px;
}

.angie-preloader-percentage {
	font-family: monospace;
	font-size: 1.5rem;
	color: #333;
	font-weight: bold;
}

/* Animations */
.anim-pulse { animation: pulse 1.5s infinite; }
.anim-bounce { animation: bounce 2s infinite; }
@keyframes pulse {
	0% { transform: scale(1); }
	50% { transform: scale(1.1); }
	100% { transform: scale(1); }
}
@keyframes bounce {
	0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
	40% { transform: translateY(-30px); }
	60% { transform: translateY(-15px); }
}

/* Status Bar Container - CSS Variables logic injected inline via PHP/JS based on options */
.angie-status-bar-container {
	position: absolute;
	background: rgba(0,0,0,0.1);
}

.angie-status-bar {
	background: var(--preloader-line-color, #333);
	transition: width 0.1s linear, height 0.1s linear;
}