/* WASD Ads Preloader — estilos */

:root {
	--wppl-bg: #ffffff;
	--wppl-accent: #2563eb;
	--wppl-logo-size: 200px;
}

html.wppl-lock,
html.wppl-lock body {
	overflow: hidden !important;
	height: 100%;
}

.wppl-preloader {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--wppl-bg);
	opacity: 1;
	visibility: visible;
	transition: opacity var(--wppl-fade, 350ms) ease, visibility 0s linear 0s;
}

.wppl-preloader.wppl-hide {
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--wppl-fade, 350ms) ease, visibility 0s linear var(--wppl-fade, 350ms);
}

.wppl-inner {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Anel giratório */
.wppl-ring {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 3px solid color-mix(in srgb, var(--wppl-accent) 20%, transparent);
	border-top-color: var(--wppl-accent);
	animation: wppl-spin 0.8s linear infinite;
}

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

/* Pontos pulsantes */
.wppl-dots {
	display: flex;
	gap: 10px;
}

.wppl-dots span {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--wppl-accent);
	animation: wppl-bounce 1.1s ease-in-out infinite;
}

.wppl-dots span:nth-child(2) { animation-delay: 0.15s; }
.wppl-dots span:nth-child(3) { animation-delay: 0.3s; }

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

/* Barra de progresso indeterminada */
.wppl-bar {
	width: 180px;
	height: 4px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--wppl-accent) 15%, transparent);
	overflow: hidden;
}

.wppl-bar-fill {
	height: 100%;
	width: 40%;
	border-radius: 999px;
	background: var(--wppl-accent);
	animation: wppl-slide 1.2s ease-in-out infinite;
}

@keyframes wppl-slide {
	0% { transform: translateX(-100%); }
	100% { transform: translateX(350%); }
}

/* Logo pulsante */
.wppl-logo {
	max-width: var(--wppl-logo-size, 200px);
	max-height: var(--wppl-logo-size, 200px);
	width: auto;
	height: auto;
	animation: wppl-pulse 1.3s ease-in-out infinite;
}

@keyframes wppl-pulse {
	0%, 100% { transform: scale(1); opacity: 1; }
	50% { transform: scale(0.9); opacity: 0.7; }
}

@media (prefers-reduced-motion: reduce) {
	.wppl-ring,
	.wppl-dots span,
	.wppl-bar-fill,
	.wppl-logo {
		animation: none;
	}
}