/**
 * Divi Essential — Preloader extension (front-end).
 *
 * Colors/size are driven by CSS custom properties set inline on #dnxte-preloader:
 *   --dnxte-pl-color    primary animation color
 *   --dnxte-pl-color-2  secondary color (two-tone loaders)
 *   --dnxte-pl-size     base animation size (px)
 *   --dnxte-pl-fade     fade-out duration (ms)
 */

/* Scoped to the ID (not the bare class) so it can't leak onto unrelated
   elements that happen to use the `dnxte-preloader` class — e.g. the admin
   extension toggle, whose label class is the extension slug. */
#dnxte-preloader {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 1;
	transition: opacity var(--dnxte-pl-fade, 500ms) ease;
}

/* JS adds this class to trigger the fade-out. */
#dnxte-preloader.dnxte-preloader--hide {
	opacity: 0;
}

/* While the overlay is up, prevent the page from scrolling. */
html.dnxte-preloader-active,
html.dnxte-preloader-active body {
	overflow: hidden;
}

.dnxte-preloader__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

.dnxte-preloader__logo {
	max-width: 160px;
	height: auto;
}

.dnxte-preloader__custom {
	max-width: 160px;
	height: auto;
}

.dnxte-preloader__text {
	letter-spacing: 0.04em;
}

/* Step-by-step text swaps with a quick cross-fade (see preloader.js SWAP_MS). */
.dnxte-preloader__steps {
	transition: opacity 0.15s ease;
}

.dnxte-preloader__steps.is-swapping {
	opacity: 0;
}

/* Base loader sizing token. */
.dnxte-pl {
	--s: var(--dnxte-pl-size, 48px);
	--c: var(--dnxte-pl-color, #7a5af8);
	--c2: var(--dnxte-pl-color-2, #e0e0e0);
}

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

/* 1. Ring */
.dnxte-pl-ring {
	width: var(--s); height: var(--s);
	border: calc(var(--s) / 9) solid color-mix(in srgb, var(--c) 22%, transparent);
	border-top-color: var(--c);
	border-radius: 50%;
	animation: dnxte-pl-spin 1s linear infinite;
}

/* 2. Dual ring */
.dnxte-pl-dual {
	width: var(--s); height: var(--s);
	border: calc(var(--s) / 9) solid transparent;
	border-top-color: var(--c);
	border-bottom-color: var(--c);
	border-radius: 50%;
	animation: dnxte-pl-spin 1.1s ease-in-out infinite;
}

/* 3. Bouncing dots */
.dnxte-pl-dots { display: flex; gap: calc(var(--s) / 6); }
.dnxte-pl-dots span {
	width: calc(var(--s) / 3.5); height: calc(var(--s) / 3.5);
	background: var(--c); border-radius: 50%;
	animation: dnxte-pl-bounce 0.6s ease-in-out infinite;
}
.dnxte-pl-dots span:nth-child(2) { animation-delay: 0.15s; }
.dnxte-pl-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes dnxte-pl-bounce {
	0%, 100% { transform: translateY(0); opacity: 0.6; }
	50% { transform: translateY(calc(var(--s) / -3)); opacity: 1; }
}

/* 4. Pulse circle */
.dnxte-pl-pulse {
	width: var(--s); height: var(--s);
	background: var(--c); border-radius: 50%;
	animation: dnxte-pl-pulse 1s ease-in-out infinite;
}
@keyframes dnxte-pl-pulse {
	0%, 100% { transform: scale(0.5); opacity: 0.4; }
	50% { transform: scale(1); opacity: 1; }
}

/* 5. Equalizer bars */
.dnxte-pl-bars { display: flex; gap: calc(var(--s) / 9); align-items: flex-end; height: var(--s); }
.dnxte-pl-bars span {
	width: calc(var(--s) / 6); height: 100%;
	background: var(--c); border-radius: 3px;
	animation: dnxte-pl-bars 1s ease-in-out infinite;
}
.dnxte-pl-bars span:nth-child(2) { animation-delay: 0.2s; }
.dnxte-pl-bars span:nth-child(3) { animation-delay: 0.4s; }
.dnxte-pl-bars span:nth-child(4) { animation-delay: 0.6s; }
@keyframes dnxte-pl-bars {
	0%, 100% { transform: scaleY(0.3); }
	50% { transform: scaleY(1); }
}

/* 6. Ripple */
.dnxte-pl-ripple { position: relative; width: var(--s); height: var(--s); }
.dnxte-pl-ripple span {
	position: absolute; border: calc(var(--s) / 12) solid var(--c);
	border-radius: 50%; animation: dnxte-pl-ripple 1.2s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.dnxte-pl-ripple span:nth-child(2) { animation-delay: -0.6s; }
@keyframes dnxte-pl-ripple {
	0% { top: 50%; left: 50%; width: 0; height: 0; opacity: 1; }
	100% { top: 0; left: 0; width: 100%; height: 100%; opacity: 0; }
}

/* 7. Ellipsis */
.dnxte-pl-ellipsis { position: relative; width: calc(var(--s) * 1.4); height: calc(var(--s) / 2.4); }
.dnxte-pl-ellipsis span {
	position: absolute; top: 0; width: calc(var(--s) / 4.3); height: calc(var(--s) / 4.3);
	border-radius: 50%; background: var(--c); animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.dnxte-pl-ellipsis span:nth-child(1) { left: 8%; animation: dnxte-pl-ell1 0.6s infinite; }
.dnxte-pl-ellipsis span:nth-child(2) { left: 8%; animation: dnxte-pl-ell2 0.6s infinite; }
.dnxte-pl-ellipsis span:nth-child(3) { left: 40%; animation: dnxte-pl-ell2 0.6s infinite; }
.dnxte-pl-ellipsis span:nth-child(4) { left: 72%; animation: dnxte-pl-ell3 0.6s infinite; }
@keyframes dnxte-pl-ell1 { 0% { transform: scale(0); } 100% { transform: scale(1); } }
@keyframes dnxte-pl-ell3 { 0% { transform: scale(1); } 100% { transform: scale(0); } }
@keyframes dnxte-pl-ell2 { 0% { transform: translateX(0); } 100% { transform: translateX(180%); } }

/* 8. Square flip */
.dnxte-pl-flip {
	width: calc(var(--s) * 0.9); height: calc(var(--s) * 0.9);
	background: var(--c); animation: dnxte-pl-flip 1.2s ease-in-out infinite;
}
@keyframes dnxte-pl-flip {
	0% { transform: perspective(120px) rotateX(0) rotateY(0); }
	50% { transform: perspective(120px) rotateX(-180deg) rotateY(0); }
	100% { transform: perspective(120px) rotateX(-180deg) rotateY(-180deg); }
}

/* 9. Orbiting dots */
.dnxte-pl-spinner-dots { position: relative; width: var(--s); height: var(--s); animation: dnxte-pl-spin 1.4s linear infinite; }
.dnxte-pl-spinner-dots span {
	position: absolute; width: calc(var(--s) / 5); height: calc(var(--s) / 5);
	background: var(--c); border-radius: 50%;
}
.dnxte-pl-spinner-dots span:nth-child(1) { top: 0; left: 50%; transform: translateX(-50%); }
.dnxte-pl-spinner-dots span:nth-child(2) { right: 0; top: 50%; transform: translateY(-50%); opacity: 0.75; }
.dnxte-pl-spinner-dots span:nth-child(3) { bottom: 0; left: 50%; transform: translateX(-50%); opacity: 0.5; }
.dnxte-pl-spinner-dots span:nth-child(4) { left: 0; top: 50%; transform: translateY(-50%); opacity: 0.25; }

/* 10. Heartbeat */
.dnxte-pl-heartbeat {
	width: var(--s); height: var(--s);
	background: var(--c); border-radius: 50%;
	animation: dnxte-pl-heartbeat 1s ease infinite;
}
@keyframes dnxte-pl-heartbeat {
	0% { transform: scale(0.8); } 25% { transform: scale(1); }
	50% { transform: scale(0.85); } 75% { transform: scale(1.05); }
	100% { transform: scale(0.8); }
}

/* 11. Orbit (two-tone) */
.dnxte-pl-orbit {
	width: var(--s); height: var(--s);
	border: calc(var(--s) / 9) solid var(--c2);
	border-right-color: var(--c); border-left-color: var(--c);
	border-radius: 50%;
	animation: dnxte-pl-spin 0.9s linear infinite;
}

/* 12. Wave dots */
.dnxte-pl-wave { display: flex; gap: calc(var(--s) / 8); }
.dnxte-pl-wave span {
	width: calc(var(--s) / 4.5); height: calc(var(--s) / 4.5);
	border-radius: 50%; background: var(--c);
	animation: dnxte-pl-wave 1.2s ease-in-out infinite;
}
.dnxte-pl-wave span:nth-child(2) { animation-delay: 0.1s; }
.dnxte-pl-wave span:nth-child(3) { animation-delay: 0.2s; }
.dnxte-pl-wave span:nth-child(4) { animation-delay: 0.3s; }
.dnxte-pl-wave span:nth-child(5) { animation-delay: 0.4s; }
@keyframes dnxte-pl-wave {
	0%, 40%, 100% { transform: scale(0.4); opacity: 0.5; }
	20% { transform: scale(1); opacity: 1; }
}

/* Accessibility: respect reduced-motion — keep a static indicator. */
@media (prefers-reduced-motion: reduce) {
	.dnxte-pl,
	.dnxte-pl * {
		animation: none !important;
	}
	.dnxte-pl-custom,
	.dnxte-preloader__custom { animation: none !important; }

	/* Step text still changes, but without the cross-fade. */
	.dnxte-preloader__steps { transition: none !important; }
}