/* =========================================================
 * WRAPPER
 * ========================================================= */

#po-preloader {
	position: fixed;
	inset: 0;
	z-index: 9999;

	display: flex;
	align-items: center;
	justify-content: center;

	background: var(--po-loader-bg);
}

/* =========================================================
 * FADE (opacity only)
 * ========================================================= */

#po-preloader.po-fade {
	transition: opacity var(--po-loader-speed) ease;
}

#po-preloader.po-fade.po-loaded {
	opacity: 0;
	pointer-events: none;
}

/* =========================================================
 * SLIDE UP (transform only)
 * ========================================================= */

#po-preloader.po-slideup {
	transition: transform var(--po-loader-speed) cubic-bezier(0.77, 0, 0.175, 1);
}

#po-preloader.po-slideup.po-loaded {
	transform: translateY(-100%);
	pointer-events: none;
}

/* =========================================================
 * SLIDE DOWN (transform only)
 * ========================================================= */

#po-preloader.po-slidedown {
	transition: transform var(--po-loader-speed) cubic-bezier(0.77, 0, 0.175, 1);
}

#po-preloader.po-slidedown.po-loaded {
	transform: translateY(100%);
	pointer-events: none;
}

/* =========================================================
 * INNER
 * ========================================================= */

.po-preloader-inner {
	text-align: center;
}

/* =========================================================
 * LOGO
 * ========================================================= */

.po-preloader-logo-wrapper {
	position: relative;
	display: inline-block;
	overflow: hidden;
}

.po-preloader-logo {
	width: 100%;
	max-width: var(--po-loader-size);
	height: auto;
	display: block;
	position: relative;
	z-index: 1;
}

/* =========================================================
 * FILL EFFECT (overlay version)
 * ========================================================= */

.po-fill-overlay {
	position: absolute;
	inset: 0;
	background: var(--po-loader-bg);

	/* hidden by default */
	display: none;

	/* start fully covering */
	height: 100%;

	transition: height var(--po-loader-speed) cubic-bezier(0.83, 0, 0.17, 1);

	z-index: 2;
}

/* Only activate overlay for fillup */
.po-effect-fillup .po-fill-overlay {
	display: block;
}

/* Animate reveal (top → bottom) */
.po-effect-fillup.po-effect-start .po-fill-overlay {
	height: 0%;
}

/* =========================================================
 * FADEOUT EFFECT (logo only)
 * ========================================================= */

.po-effect-fadeout .po-preloader-logo {
	transition: opacity var(--po-loader-speed) ease;
}

.po-effect-fadeout.po-effect-start .po-preloader-logo {
	opacity: 0;
}

/* =========================================================
 * SPINNER
 * ========================================================= */

.po-spinner {
	width: var(--po-spinner-size);
	height: var(--po-spinner-size);

	border: 3px solid rgba(0,0,0,0.1);
	border-top-color: var(--po-spinner-colour);

	border-radius: 50%;

	animation: po-spin 0.8s linear infinite;
}

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

#po-preloader {
	will-change: opacity, transform;
}