/* ==========================================================================
   SURABHI PORTFOLIO — PRELOADER
   ========================================================================== */


/* ==========================================================================
   BASE
   ========================================================================== */

.preloader {

	position: fixed;

	inset: 0;

	background: var(--color-background);

	z-index: var(--z-preloader);

	display: flex;

	align-items: center;

	justify-content: center;

	opacity: 1;

	visibility: visible;

	transition:
		opacity 0.7s ease,
		visibility 0.7s ease;

}


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

.preloader-inner {

	display: flex;

	flex-direction: column;

	align-items: center;

	justify-content: center;

}


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

.preloader-logo {

	text-align: center;

}


.preloader-text {

	display: inline-block;

	font-family: var(--font-primary);

	font-size: 1rem;

	font-weight: 600;

	letter-spacing: 0.08em;

	text-transform: uppercase;

	color: var(--color-text);

}


/* ==========================================================================
   PROGRESS
   ========================================================================== */

.preloader-progress {

	width: 200px;

	height: 2px;

	margin-top: 30px;

	background: var(--color-border);

	overflow: hidden;

}


.preloader-progress-bar {

	width: 0;

	height: 100%;

	background: var(--color-primary);

}


/* ==========================================================================
   HIDDEN STATE
   ========================================================================== */

.preloader--hidden {

	opacity: 0;

	visibility: hidden;

	pointer-events: none;

}