/**
 * FluxCore smart preloader — front-end styles.
 * All themeable values come in as CSS custom properties set inline by PHP,
 * so this file never needs per-site edits.
 */

#fluxcore-preloader {
	--fx-line-color: #87e64b;
	--fx-accent-color: #87e64b;
	--fx-line-size: 4px;
	--fx-logo-size: 90px;
	--fx-text-size: 16px;
	--fx-text-color: #ffffff;
	--fx-text-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--fx-percentage-size: 42px;
	--fx-percentage-color: #87e64b;

	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	background: #000;
	opacity: 1;
	visibility: visible;
}

/* Glassmorphism: translucent background (set inline by PHP) plus a soft frosted border/glow. */
#fluxcore-preloader.fx-glass {
	border: 1px solid rgba( 255, 255, 255, 0.14 );
	box-shadow: inset 0 1px 0 rgba( 255, 255, 255, 0.08 );
}

#fluxcore-preloader.fx-is-hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.4s ease, visibility 0.4s ease;
}

/* Prevent background scroll while the preloader is visible. */
body.fx-preloader-active {
	overflow: hidden;
}

/* ---------- Logo ---------- */
.fx-preloader__logo {
	display: flex;
	align-items: center;
	justify-content: center;
}

.fx-preloader__logo img {
	width: var(--fx-logo-size);
	height: auto;
	max-width: 60vw;
	display: block;
}

.fx-logo-fade .fx-preloader__logo img {
	animation: fx-fade-in 1.1s ease both;
}

.fx-logo-pulse .fx-preloader__logo img {
	animation: fx-pulse 1.6s ease-in-out infinite;
}

@keyframes fx-fade-in {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes fx-pulse {
	0%, 100% { transform: scale(1); opacity: 1; }
	50%      { transform: scale(1.06); opacity: 0.85; }
}

/* ---------- Animation styles: only one is shown at a time via .fx-style-* ---------- */
.fx-preloader__anim {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.fx-anim-line,
.fx-anim-spinner,
.fx-anim-dots,
.fx-anim-percentage {
	display: none;
}

/* Line bar */
.fx-style-line .fx-anim-line {
	position: relative;
	display: block;
	width: 100%;
	height: var(--fx-line-size);
	background: color-mix(in srgb, var(--fx-line-color) 18%, transparent);
	overflow: visible;
}

.fx-style-line .fx-anim-line .fx-line-fill {
	display: block;
	height: 100% !important; /* fixed thickness on desktop — always overrides JS's inline height */
	width: 0%; /* fill dimension on desktop — JS's inline width animates this */
	background: var(--fx-line-color);
}

/* The percentage label that travels along the bar's fill edge. Hidden unless
   the Line bar style is active and the percentage counter is enabled. */
.fx-line-percentage {
	display: none;
	position: absolute;
	white-space: nowrap;
	font-family: var(--fx-text-font);
	font-size: var(--fx-percentage-size);
	color: var(--fx-percentage-color);
	font-weight: 600;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	pointer-events: none;
}

.fx-style-line.fx-show-percentage .fx-line-percentage {
	display: block;
	top: -1.6em !important; /* fixed position above the bar on desktop — overrides JS's inline top */
	left: 0; /* JS's inline left animates this, tracking the fill edge */
	transform: translateX(-50%);
}

/* Mobile: the line bar becomes a vertical strip flush against the left edge
   of the screen, filling top → bottom, while the logo/text stay centered as
   usual. The percentage label travels down the bar's fill edge instead. */
@media ( max-width: 640px ) {
	.fx-style-line .fx-anim-line {
		position: fixed;
		left: 0;
		top: 0;
		bottom: 0;
		width: var(--fx-line-size);
		height: auto;
	}

	.fx-style-line .fx-anim-line .fx-line-fill {
		width: 100% !important; /* now the fixed thickness dimension */
		height: 0%; /* now the fill dimension — JS's inline height animates this */
	}

	.fx-style-line.fx-show-percentage .fx-line-percentage {
		left: calc(100% + 10px) !important; /* fixed position beside the bar — overrides JS's inline left */
		top: 0; /* JS's inline top animates this, tracking the fill edge */
		transform: translateY(-50%);
	}
}

/* Spinner */
.fx-style-spinner .fx-anim-spinner {
	display: block;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 3px solid color-mix(in srgb, var(--fx-accent-color) 20%, transparent);
	border-top-color: var(--fx-accent-color);
	animation: fx-spin 0.9s linear infinite;
}

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

/* Dots */
.fx-style-dots .fx-anim-dots {
	display: flex;
	gap: 10px;
}

.fx-style-dots .fx-anim-dots i {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--fx-accent-color);
	display: block;
	animation: fx-bounce 1s ease-in-out infinite;
}

.fx-style-dots .fx-anim-dots i:nth-child(2) { animation-delay: 0.15s; }
.fx-style-dots .fx-anim-dots i:nth-child(3) { animation-delay: 0.3s; }

@keyframes fx-bounce {
	0%, 80%, 100% { transform: translateY(0); opacity: 0.5; }
	40%           { transform: translateY(-10px); opacity: 1; }
}

/* Big centered percentage */
.fx-style-percentage .fx-anim-percentage {
	display: block;
	font-family: var(--fx-text-font);
	font-size: var(--fx-percentage-size);
	font-weight: 700;
	color: var(--fx-percentage-color);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

/* ---------- Text ---------- */
.fx-preloader__text {
	font-family: var(--fx-text-font);
	font-size: var(--fx-text-size);
	color: var(--fx-text-color);
	text-align: center;
	letter-spacing: 0.02em;
}

/* ---------- Separate percentage counter (line / spinner / dots styles) ---------- */
.fx-preloader__percentage {
	font-family: var(--fx-text-font);
	font-size: var(--fx-percentage-size);
	color: var(--fx-percentage-color);
	font-weight: 600;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

/* ---------- Entrance transitions (play once as the preloader first paints) ---------- */
#fluxcore-preloader.fx-enter-fade {
	animation-name: fxEnterFade;
	animation-duration: var( --fx-enter-duration, 0.6s );
	animation-timing-function: ease;
	animation-fill-mode: both;
}

#fluxcore-preloader.fx-enter-zoom {
	animation-name: fxEnterZoom;
	animation-duration: var( --fx-enter-duration, 0.6s );
	animation-timing-function: ease;
	animation-fill-mode: both;
}

#fluxcore-preloader.fx-enter-scale {
	animation-name: fxEnterScale;
	animation-duration: var( --fx-enter-duration, 0.6s );
	animation-timing-function: ease;
	animation-fill-mode: both;
}

#fluxcore-preloader.fx-enter-flip {
	animation-name: fxEnterFlip;
	animation-duration: var( --fx-enter-duration, 0.7s );
	animation-timing-function: ease;
	animation-fill-mode: both;
}

#fluxcore-preloader.fx-enter-blur {
	animation-name: fxEnterBlur;
	animation-duration: var( --fx-enter-duration, 0.6s );
	animation-timing-function: ease;
	animation-fill-mode: both;
}

#fluxcore-preloader.fx-enter-slide.fx-dir-up {
	animation-name: fxEnterSlideUp;
	animation-duration: var( --fx-enter-duration, 0.6s );
	animation-timing-function: ease;
	animation-fill-mode: both;
}

#fluxcore-preloader.fx-enter-slide.fx-dir-down {
	animation-name: fxEnterSlideDown;
	animation-duration: var( --fx-enter-duration, 0.6s );
	animation-timing-function: ease;
	animation-fill-mode: both;
}

#fluxcore-preloader.fx-enter-slide.fx-dir-left {
	animation-name: fxEnterSlideLeft;
	animation-duration: var( --fx-enter-duration, 0.6s );
	animation-timing-function: ease;
	animation-fill-mode: both;
}

#fluxcore-preloader.fx-enter-slide.fx-dir-right {
	animation-name: fxEnterSlideRight;
	animation-duration: var( --fx-enter-duration, 0.6s );
	animation-timing-function: ease;
	animation-fill-mode: both;
}

@keyframes fxEnterFade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes fxEnterZoom {
	from { opacity: 0; transform: scale( 0.85 ); }
	to   { opacity: 1; transform: scale( 1 ); }
}

@keyframes fxEnterScale {
	from { opacity: 0; transform: scale( 0.4 ); }
	to   { opacity: 1; transform: scale( 1 ); }
}

@keyframes fxEnterFlip {
	from { opacity: 0; transform: perspective( 900px ) rotateX( 90deg ); }
	to   { opacity: 1; transform: perspective( 900px ) rotateX( 0 ); }
}

@keyframes fxEnterBlur {
	from { opacity: 0; filter: blur( 16px ); }
	to   { opacity: 1; filter: blur( 0 ); }
}

@keyframes fxEnterSlideUp {
	from { opacity: 0; transform: translateY( 50px ); }
	to   { opacity: 1; transform: translateY( 0 ); }
}

@keyframes fxEnterSlideDown {
	from { opacity: 0; transform: translateY( -50px ); }
	to   { opacity: 1; transform: translateY( 0 ); }
}

@keyframes fxEnterSlideLeft {
	from { opacity: 0; transform: translateX( 50px ); }
	to   { opacity: 1; transform: translateX( 0 ); }
}

@keyframes fxEnterSlideRight {
	from { opacity: 0; transform: translateX( -50px ); }
	to   { opacity: 1; transform: translateX( 0 ); }
}

/* ---------- Exit transitions (JS adds one of these classes once loading is complete) ---------- */
#fluxcore-preloader.fx-exit-fade {
	animation-name: fxExitFade;
	animation-duration: var( --fx-exit-duration, 0.5s );
	animation-timing-function: ease;
	animation-fill-mode: forwards;
}

#fluxcore-preloader.fx-exit-zoom {
	animation-name: fxExitZoom;
	animation-duration: var( --fx-exit-duration, 0.5s );
	animation-timing-function: ease;
	animation-fill-mode: forwards;
}

#fluxcore-preloader.fx-exit-shrink {
	animation-name: fxExitShrink;
	animation-duration: var( --fx-exit-duration, 0.5s );
	animation-timing-function: ease;
	animation-fill-mode: forwards;
}

#fluxcore-preloader.fx-exit-ease-out {
	animation-name: fxExitEaseOut;
	animation-duration: var( --fx-exit-duration, 0.6s );
	animation-timing-function: cubic-bezier( 0, 0, 0.2, 1 );
	animation-fill-mode: forwards;
}

#fluxcore-preloader.fx-exit-blur {
	animation-name: fxExitBlur;
	animation-duration: var( --fx-exit-duration, 0.5s );
	animation-timing-function: ease;
	animation-fill-mode: forwards;
}

#fluxcore-preloader.fx-exit-slide.fx-dir-up {
	animation-name: fxExitSlideUp;
	animation-duration: var( --fx-exit-duration, 0.5s );
	animation-timing-function: ease;
	animation-fill-mode: forwards;
}

#fluxcore-preloader.fx-exit-slide.fx-dir-down {
	animation-name: fxExitSlideDown;
	animation-duration: var( --fx-exit-duration, 0.5s );
	animation-timing-function: ease;
	animation-fill-mode: forwards;
}

#fluxcore-preloader.fx-exit-slide.fx-dir-left {
	animation-name: fxExitSlideLeft;
	animation-duration: var( --fx-exit-duration, 0.5s );
	animation-timing-function: ease;
	animation-fill-mode: forwards;
}

#fluxcore-preloader.fx-exit-slide.fx-dir-right {
	animation-name: fxExitSlideRight;
	animation-duration: var( --fx-exit-duration, 0.5s );
	animation-timing-function: ease;
	animation-fill-mode: forwards;
}

#fluxcore-preloader.fx-exit-active {
	pointer-events: none;
}

@keyframes fxExitFade {
	to { opacity: 0; }
}

@keyframes fxExitZoom {
	to { opacity: 0; transform: scale( 1.2 ); }
}

@keyframes fxExitShrink {
	to { opacity: 0; transform: scale( 0.55 ); }
}

@keyframes fxExitEaseOut {
	to { opacity: 0; transform: translateY( -14px ); }
}

@keyframes fxExitBlur {
	to { opacity: 0; filter: blur( 16px ); }
}

@keyframes fxExitSlideUp {
	to { opacity: 0; transform: translateY( -70px ); }
}

@keyframes fxExitSlideDown {
	to { opacity: 0; transform: translateY( 70px ); }
}

@keyframes fxExitSlideLeft {
	to { opacity: 0; transform: translateX( -70px ); }
}

@keyframes fxExitSlideRight {
	to { opacity: 0; transform: translateX( 70px ); }
}

@media (prefers-reduced-motion: reduce) {
	#fluxcore-preloader,
	#fluxcore-preloader.fx-enter-fade,
	#fluxcore-preloader.fx-enter-zoom,
	#fluxcore-preloader.fx-enter-scale,
	#fluxcore-preloader.fx-enter-flip,
	#fluxcore-preloader.fx-enter-blur,
	#fluxcore-preloader.fx-enter-slide,
	#fluxcore-preloader.fx-exit-fade,
	#fluxcore-preloader.fx-exit-zoom,
	#fluxcore-preloader.fx-exit-shrink,
	#fluxcore-preloader.fx-exit-ease-out,
	#fluxcore-preloader.fx-exit-blur,
	#fluxcore-preloader.fx-exit-slide,
	.fx-preloader__logo img,
	.fx-anim-spinner,
	.fx-anim-dots i {
		animation: none !important;
		transition: opacity 0.2s linear !important;
		transform: none !important;
		filter: none !important;
	}
}