/*
 * The Boss Premium Preloader — frontend styles
 * Dynamic values (colours, size, speed) are injected as CSS custom
 * properties on :root via wp_add_inline_style() from the main plugin file.
 */

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

#bdpp-preloader {
	position: fixed;
	inset: 0;
	z-index: 2147483647;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background: radial-gradient(120% 120% at 50% 38%, var(--bdpp-bg-1) 0%, var(--bdpp-bg-2) 55%, var(--bdpp-bg-3) 100%);
	overflow: hidden;
	-webkit-font-smoothing: antialiased;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--bdpp-fg);
	will-change: opacity;
}

/* Optional gradient background — only applied when the admin picks
   "Gradient" for the background type. Solid (default/original) is untouched. */
#bdpp-preloader.bdpp-bg-gradient {
	background: linear-gradient(var(--bdpp-grad-dir, 135deg), var(--bdpp-grad-1, var(--bdpp-bg-1)) 0%, var(--bdpp-grad-2, var(--bdpp-bg-3)) 100%);
}

#bdpp-preloader .bdpp-glow {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 70vmax;
	height: 70vmax;
	transform: translate(-50%, -50%) scale(1);
	background: radial-gradient(circle, var(--bdpp-glow-soft) 0%, var(--bdpp-glow-faint) 45%, rgba(0, 0, 0, 0) 72%);
	filter: blur(2px);
	animation: bdpp-breathe calc(5.6s / var(--bdpp-speed)) ease-in-out infinite;
	pointer-events: none;
}

#bdpp-preloader .bdpp-top {
	position: absolute;
	top: max(22px, env(safe-area-inset-top));
	left: 0;
	right: 0;
	text-align: center;
	opacity: 0;
	transform: translateY(-6px);
	animation: bdpp-fade-in calc(1s / var(--bdpp-speed)) calc(.2s / var(--bdpp-speed)) ease forwards;
}

#bdpp-preloader .bdpp-top-label {
	font-size: clamp(10px, 1.4vw, var(--bdpp-text-size, 12px));
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--bdpp-text-color, var(--bdpp-fg-soft));
	font-weight: var(--bdpp-text-weight, 500);
	font-family: var(--bdpp-text-family, inherit);
}

#bdpp-preloader .bdpp-top-label em {
	font-style: normal;
	color: var(--bdpp-fg);
}

#bdpp-preloader .bdpp-center {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(16px, 3.4vw, 28px);
	padding: 0 20px;
}

#bdpp-logo-canvas {
	width: clamp(120px, 30vw, var(--bdpp-logo-max));
	height: auto;
	aspect-ratio: 546 / 619;
	display: block;
}

/* Logo mask, used by every animation style except "Dots" (which draws on
   the canvas above). Rather than showing the uploaded image's raw pixels
   (which can vanish if e.g. a dark logo lands on a dark background), it
   fills the logo's silhouette with the current auto-contrast colour —
   exactly like the Dots style already does — so it stays visible and
   on-theme no matter what logo or background colour is chosen. */
#bdpp-logo-mask {
	display: none;
	width: clamp(120px, 30vw, var(--bdpp-logo-max));
	height: clamp(120px, 30vw, var(--bdpp-logo-max));
	background-color: var(--bdpp-fg);
	-webkit-mask-image: var(--bdpp-logo-mask-url);
	mask-image: var(--bdpp-logo-mask-url);
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	filter: drop-shadow(0 0 18px var(--bdpp-glow-soft));
}

#bdpp-preloader.bdpp-style-dots #bdpp-logo-canvas { display: block; }
#bdpp-preloader.bdpp-style-dots #bdpp-logo-mask { display: none; }

#bdpp-preloader.bdpp-style-fade #bdpp-logo-canvas,
#bdpp-preloader.bdpp-style-wipe #bdpp-logo-canvas,
#bdpp-preloader.bdpp-style-pulse #bdpp-logo-canvas {
	display: none;
}

#bdpp-preloader.bdpp-style-fade #bdpp-logo-mask,
#bdpp-preloader.bdpp-style-wipe #bdpp-logo-mask,
#bdpp-preloader.bdpp-style-pulse #bdpp-logo-mask {
	display: block;
}

/* Style: Fade — simple, premium fade + gentle scale-in. */
#bdpp-preloader.bdpp-style-fade #bdpp-logo-mask {
	opacity: 0;
	transform: scale(.94);
	animation: bdpp-logo-fade-in calc(1.6s / var(--bdpp-speed)) cubic-bezier(.22, 1, .36, 1) forwards;
}

@keyframes bdpp-logo-fade-in {
	to { opacity: 1; transform: scale(1); }
}

/* Style: Wipe Reveal — the logo reveals left-to-right behind a soft edge. */
#bdpp-preloader.bdpp-style-wipe #bdpp-logo-mask {
	opacity: 1;
	clip-path: inset(0 100% 0 0);
	animation: bdpp-logo-wipe-in calc(1.8s / var(--bdpp-speed)) cubic-bezier(.65, 0, .35, 1) forwards;
}

@keyframes bdpp-logo-wipe-in {
	0% { clip-path: inset(0 100% 0 0); }
	100% { clip-path: inset(0 0% 0 0); }
}

/* Style: Pulse Glow — fades in, then breathes with a soft glow while loading. */
#bdpp-preloader.bdpp-style-pulse #bdpp-logo-mask {
	opacity: 0;
	animation:
		bdpp-logo-fade-in calc(1.3s / var(--bdpp-speed)) ease forwards,
		bdpp-logo-pulse-loop calc(3.2s / var(--bdpp-speed)) ease-in-out calc(1.3s / var(--bdpp-speed)) infinite;
}

@keyframes bdpp-logo-pulse-loop {
	0%, 100% { transform: scale(1); filter: drop-shadow(0 0 14px var(--bdpp-glow-soft)); }
	50% { transform: scale(1.035); filter: drop-shadow(0 0 30px var(--bdpp-glow-strong)); }
}

#bdpp-preloader .bdpp-bar {
	width: clamp(84px, 16vw, 140px);
	height: 2px;
	border-radius: 2px;
	background: var(--bdpp-track);
	overflow: hidden;
	position: relative;
}

#bdpp-preloader .bdpp-bar-fill {
	position: absolute;
	inset: 0 auto 0 0;
	width: 0%;
	background: linear-gradient(90deg, var(--bdpp-fg), var(--bdpp-glow-strong));
	box-shadow: 0 0 10px var(--bdpp-glow-soft);
	transition: width .3s ease-out;
}

#bdpp-preloader .bdpp-bottom {
	position: absolute;
	left: 0;
	right: 0;
	bottom: max(26px, env(safe-area-inset-bottom));
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	padding: 0 clamp(20px, 5vw, 56px);
	opacity: 0;
	transform: translateY(8px);
	animation: bdpp-fade-in calc(1s / var(--bdpp-speed)) calc(.32s / var(--bdpp-speed)) ease forwards;
	gap: 16px;
}

#bdpp-preloader .bdpp-tagline {
	font-size: clamp(11px, 1.6vw, var(--bdpp-text-size, 13px));
	letter-spacing: .02em;
	color: var(--bdpp-text-color, var(--bdpp-fg-soft));
	font-weight: var(--bdpp-text-weight, 400);
	font-family: var(--bdpp-text-family, inherit);
	max-width: 56vw;
}

#bdpp-preloader .bdpp-percent {
	font-size: clamp(20px, 4vw, 32px);
	font-weight: 600;
	letter-spacing: -.01em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

#bdpp-preloader .bdpp-percent-sign {
	font-size: .5em;
	opacity: .5;
	margin-left: 2px;
}

@keyframes bdpp-fade-in {
	to { opacity: 1; transform: none; }
}

@keyframes bdpp-breathe {
	0%, 100% { opacity: .55; transform: translate(-50%, -50%) scale(1); }
	50% { opacity: .9; transform: translate(-50%, -50%) scale(1.08); }
}

#bdpp-preloader.bdpp-exit .bdpp-top,
#bdpp-preloader.bdpp-exit .bdpp-bottom,
#bdpp-preloader.bdpp-exit .bdpp-center {
	transition: opacity .55s ease, transform .6s ease;
	opacity: 0;
	transform: translateY(-10px) scale(.97);
}

#bdpp-preloader.bdpp-exit-wipe {
	animation: bdpp-iris-wipe calc(.9s / var(--bdpp-speed)) calc(.4s / var(--bdpp-speed)) cubic-bezier(.65, 0, .35, 1) forwards;
}

@keyframes bdpp-iris-wipe {
	from { clip-path: circle(130% at 50% 42%); }
	to { clip-path: circle(0% at 50% 42%); }
}

@media (prefers-reduced-motion: reduce) {
	#bdpp-preloader .bdpp-glow { animation: none; }
	#bdpp-preloader.bdpp-exit-wipe {
		animation: none;
		transition: opacity .35s ease;
		opacity: 0;
	}
	#bdpp-preloader.bdpp-style-fade #bdpp-logo-mask,
	#bdpp-preloader.bdpp-style-wipe #bdpp-logo-mask,
	#bdpp-preloader.bdpp-style-pulse #bdpp-logo-mask {
		animation: none !important;
		opacity: 1;
		transform: none;
		clip-path: none;
	}
}

/* ---------- Mobile Settings ----------
   Phones only (max-width: 600px) get their own logo size and top/bottom
   text size, weight, and colour, set independently from Desktop in the
   admin settings. Tablets keep the existing smooth Desktop-based scaling
   above this width, and the whole overlay's centering/layout is untouched
   here — only sizes and colours change. Every value falls back to its
   Desktop equivalent if a Mobile value was never set. */
@media (max-width: 600px) {
	#bdpp-logo-canvas {
		width: clamp(100px, 34vw, var(--bdpp-logo-max-m, var(--bdpp-logo-max)));
	}
	#bdpp-logo-mask {
		width: clamp(100px, 34vw, var(--bdpp-logo-max-m, var(--bdpp-logo-max)));
		height: clamp(100px, 34vw, var(--bdpp-logo-max-m, var(--bdpp-logo-max)));
	}
	#bdpp-preloader .bdpp-top-label {
		font-size: clamp(9px, 3.2vw, var(--bdpp-top-size-m, var(--bdpp-text-size, 12px)));
		font-weight: var(--bdpp-top-weight-m, var(--bdpp-text-weight, 500));
		color: var(--bdpp-top-color-m, var(--bdpp-text-color, var(--bdpp-fg-soft)));
	}
	#bdpp-preloader .bdpp-tagline {
		font-size: clamp(9px, 3.4vw, var(--bdpp-bottom-size-m, var(--bdpp-text-size, 13px)));
		font-weight: var(--bdpp-bottom-weight-m, var(--bdpp-text-weight, 400));
		color: var(--bdpp-bottom-color-m, var(--bdpp-text-color, var(--bdpp-fg-soft)));
	}
}