/* Luna moon preloader — theme-owned visual layer. */
.site-preloader {
	--loader-bg: #f6efeb;
	--loader-panel: #fffaf7;
	--loader-moon-empty: #e8dfda;
	--loader-moon-full: #d4dac5;
	--loader-text: #273247;
	--loader-muted: #6f6b72;
	--loader-duration: 1800ms;
	--loader-moon-size: 214px;
	--loader-kicker-size: 11px;
	--loader-title-size: 42px;
	--loader-note-size: 14px;
	background:
		radial-gradient(circle at 18% 16%, color-mix(in srgb, var(--loader-moon-full) 38%, transparent), transparent 24%),
		radial-gradient(circle at 82% 22%, color-mix(in srgb, var(--loader-moon-empty) 48%, transparent), transparent 22%),
		radial-gradient(circle at 50% 86%, color-mix(in srgb, var(--loader-moon-full) 22%, transparent), transparent 28%),
		var(--loader-bg);
	transition: opacity .72s cubic-bezier(.22, 1, .36, 1), visibility .72s ease;
}

.site-preloader-panel {
	width: min(480px, 100%);
	padding: 38px 34px 32px;
	border-color: color-mix(in srgb, var(--loader-moon-full) 28%, white);
	background:
		radial-gradient(circle at 50% 0, rgba(255,255,255,.74), transparent 36%),
		color-mix(in srgb, var(--loader-panel) 86%, transparent);
	box-shadow:
		0 34px 80px color-mix(in srgb, var(--loader-muted) 14%, transparent),
		inset 0 1px 0 rgba(255,255,255,.92);
}

.site-preloader-panel::after {
	border-color: color-mix(in srgb, var(--loader-moon-full) 28%, transparent);
}

.preloader-orbit {
	width: var(--loader-moon-size);
	height: var(--loader-moon-size);
	border-color: color-mix(in srgb, var(--loader-moon-full) 42%, transparent);
	background:
		radial-gradient(circle, rgba(255,255,255,.56), transparent 64%),
		conic-gradient(from 20deg, transparent, color-mix(in srgb, var(--loader-moon-full) 58%, transparent), transparent 30%, color-mix(in srgb, var(--loader-moon-full) 34%, transparent), transparent 72%);
	box-shadow:
		0 26px 65px color-mix(in srgb, var(--loader-moon-full) 42%, transparent),
		inset 0 0 0 1px rgba(255,255,255,.58);
	animation: lunaLoaderOrbitBreath 2.8s ease-in-out infinite;
}

.preloader-orbit::before,
.preloader-orbit::after {
	border-color: color-mix(in srgb, var(--loader-muted) 20%, transparent);
}

.preloader-moon {
	inset: 15.5%;
	border-color: rgba(255,255,255,.76);
	background:
		radial-gradient(circle at 28% 23%, rgba(255,255,255,.82), transparent 22%),
		radial-gradient(circle at 66% 70%, color-mix(in srgb, var(--loader-moon-full) 72%, #73805a), transparent 44%),
		linear-gradient(145deg, color-mix(in srgb, var(--loader-moon-full) 72%, white), var(--loader-moon-full));
	box-shadow:
		inset -12px -14px 26px color-mix(in srgb, var(--loader-muted) 13%, transparent),
		inset 9px 9px 22px rgba(255,255,255,.55),
		0 16px 42px color-mix(in srgb, var(--loader-moon-full) 48%, transparent);
}

.preloader-moon::before {
	z-index: 1;
	background:
		radial-gradient(circle at 28% 58%, color-mix(in srgb, var(--loader-muted) 15%, transparent), transparent 13%),
		radial-gradient(circle at 63% 31%, color-mix(in srgb, var(--loader-muted) 13%, transparent), transparent 12%),
		radial-gradient(circle at 60% 74%, color-mix(in srgb, var(--loader-muted) 11%, transparent), transparent 14%),
		linear-gradient(105deg, transparent 22%, rgba(255,255,255,.5) 46%, transparent 70%);
	background-size: auto, auto, auto, 220% 100%;
	animation: lunaLoaderSheen var(--loader-duration) ease-in-out both;
}

.preloader-moon::after {
	z-index: 2;
	top: -2%;
	left: -2%;
	width: 104%;
	height: 104%;
	background:
		radial-gradient(circle at 34% 30%, rgba(255,255,255,.32), transparent 30%),
		var(--loader-moon-empty);
	opacity: 1;
	box-shadow: inset -12px -10px 24px color-mix(in srgb, var(--loader-muted) 10%, transparent);
	animation: lunaLoaderMoonComplete var(--loader-duration) cubic-bezier(.65, 0, .28, 1) forwards;
}

.preloader-moon > span {
	position: absolute;
	z-index: 3;
	inset: 0;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.36);
	pointer-events: none;
}

.preloader-kicker {
	font-size: var(--loader-kicker-size);
	font-weight: 750;
	letter-spacing: .08em;
	text-transform: none;
	color: var(--loader-muted);
}

.preloader-copy strong {
	font-size: var(--loader-title-size);
	font-weight: 850;
	line-height: 1.2;
	color: var(--loader-text);
}

.preloader-copy p {
	font-size: var(--loader-note-size);
	color: var(--loader-muted);
}

.preloader-progress {
	display: block;
	width: min(210px, 72%);
	height: 4px;
	margin: 18px auto 0;
	border-radius: 999px;
	overflow: hidden;
	background: color-mix(in srgb, var(--loader-moon-empty) 62%, white);
}

.preloader-progress i {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--loader-moon-full), color-mix(in srgb, var(--loader-moon-full) 54%, white));
	transform: scaleX(0);
	transform-origin: right center;
	animation: lunaLoaderProgress var(--loader-duration) cubic-bezier(.65, 0, .28, 1) forwards;
}

@keyframes lunaLoaderMoonComplete {
	0% { transform: translateX(0); }
	68% { transform: translateX(74%); }
	100% { transform: translateX(108%); }
}

@keyframes lunaLoaderProgress {
	0% { transform: scaleX(0); }
	100% { transform: scaleX(1); }
}

@keyframes lunaLoaderSheen {
	0% { background-position: 0 0, 0 0, 0 0, 130% 0; }
	100% { background-position: 0 0, 0 0, 0 0, -30% 0; }
}

@keyframes lunaLoaderOrbitBreath {
	0%, 100% { transform: scale(.985); filter: saturate(.94); }
	50% { transform: scale(1); filter: saturate(1.06); }
}

@media (max-width: 640px) {
	.site-preloader-panel {
		padding: 30px 20px 26px;
	}

	.preloader-orbit {
		width: min(var(--loader-moon-size), 48vw);
		height: min(var(--loader-moon-size), 48vw);
	}

	.preloader-copy strong {
		font-size: min(var(--loader-title-size), 9vw);
	}
}

@media (prefers-reduced-motion: reduce) {
	.preloader-moon::after {
		transform: translateX(108%);
	}

	.preloader-progress i {
		transform: scaleX(1);
	}
}