/**
 * Site preloader — Sara Jwelry
 */

.sj-site-loader {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 48px;
	background: var(--sj-loader-bg, #0a0806);
	opacity: 1;
	visibility: visible;
	transition: opacity 0.55s ease, visibility 0.55s ease;
}

html.sj-loader-done .sj-site-loader,
.sj-site-loader.is-hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

/* Logo */
.sj-site-loader__logo-wrap {
	position: relative;
	width: 160px;
	height: 160px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sj-site-loader__logo {
	width: 100%;
	height: 100%;
	object-fit: contain;
	opacity: 1;
	animation: sj-loader-fade-in 1.4s ease-out 0.2s both, sj-loader-breathe 4s ease-in-out 1.6s infinite;
}

.sj-site-loader__logo-fallback {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	color: var(--sj-loader-gold, #c9a35b);
	opacity: 1;
	animation: sj-loader-fade-in 1.4s ease-out 0.2s both;
}

/* Gold arc */
.sj-site-loader__arc {
	position: absolute;
	inset: -22px;
	border-radius: 50%;
	border: 1px solid transparent;
	border-top-color: color-mix(in srgb, var(--sj-loader-gold, #c9a35b) 55%, transparent);
	opacity: 0;
	animation: sj-loader-fade-arc 1s ease-out 0.6s forwards, sj-loader-spin 2.4s linear 1.6s infinite;
}

/* Progress bar */
.sj-site-loader__bar {
	position: relative;
	width: 140px;
	height: 1px;
	background: color-mix(in srgb, var(--sj-loader-gold, #c9a35b) 15%, transparent);
	overflow: hidden;
}

.sj-site-loader__bar::before {
	content: "";
	position: absolute;
	inset: 0;
	width: 40%;
	background: linear-gradient(
		90deg,
		transparent,
		color-mix(in srgb, var(--sj-loader-gold, #c9a35b) 90%, transparent),
		transparent
	);
	animation: sj-loader-slide 1.6s ease-in-out infinite;
}

@keyframes sj-loader-fade-in {
	from {
		opacity: 0;
		transform: scale(0.96);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes sj-loader-breathe {
	0%,
	100% {
		opacity: 0.85;
	}
	50% {
		opacity: 1;
	}
}

@keyframes sj-loader-fade-arc {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

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

@keyframes sj-loader-slide {
	0% {
		transform: translateX(-100%);
	}
	100% {
		transform: translateX(350%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.sj-site-loader,
	.sj-site-loader__logo,
	.sj-site-loader__logo-fallback,
	.sj-site-loader__arc,
	.sj-site-loader__bar::before {
		animation: none !important;
		transition: none !important;
	}

	.sj-site-loader__logo,
	.sj-site-loader__logo-fallback,
	.sj-site-loader__arc {
		opacity: 1;
	}
}