:root {
	--preloadify-bg: #ffffff;
	--preloadify-color: #E25D44;
	--preloadify-delay: 1500;
	--preloadify-logo-height: 80px;
	--preloadify-container-width: 100%;
}

body:not(.loaded) #page-loader {
	display: flex;
}

#page-loader {
	background-color: var(--preloadify-bg);
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: none;
	align-items: center;
	justify-content: center;
	transition: opacity 0.3s ease;
}

.loader-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: var(--preloadify-container-width);
}

.loader-logo img {
	max-height: var(--preloadify-logo-height);
	margin-bottom: 20px;
}

.loader-dots {
	display: flex;
	gap: 0.4rem;
}

.loader-dots span {
	width: 10px;
	height: 10px;
	background-color: var(--preloadify-color);
	border-radius: 50%;
	display: inline-block;
	animation: bounce 1.2s infinite ease-in-out;
}

.loader-dots span:nth-child(2) { animation-delay: 0.2s; }
.loader-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes bounce {
	0%, 80%, 100% { transform: scale(0.8); opacity: 0.5; }
	40% { transform: scale(1.2); opacity: 1; }
}

.loader-circle {
	width: 40px;
	height: 40px;
	border: 5px solid #ccc;
	border-top-color: var(--preloadify-color);
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.loader-bar {
	width: 100px;
	height: 5px;
	background: #ccc;
	position: relative;
	overflow: hidden;
	border-radius: 3px;
}

.loader-bar::before {
	content: '';
	position: absolute;
	left: -40%;
	width: 40%;
	height: 100%;
	background: var(--preloadify-color);
	animation: loadbar 1s infinite;
}

@keyframes loadbar {
	0% { left: -40%; }
	100% { left: 100%; }
}

.loader-pulse {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: var(--preloadify-color);
	animation: pulse 1.2s infinite ease-in-out;
}

@keyframes pulse {
	0%, 100% { transform: scale(1); opacity: 0.6; }
	50% { transform: scale(1.4); opacity: 1; }
}

.loader-logo.bounce {
	animation: bounceLogo 1s infinite ease-in-out;
}

@keyframes bounceLogo {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-10px); }
}