/* ==========================================================================
   Site Preloader - Wave Pulse
   رنگ‌ها و سایز رو با متغیرهای CSS پایین راحت شخصی‌سازی کن
   ========================================================================== */

:root {
	--preloader-bg: #f6c784;          /* رنگ پس‌زمینه پری‌لودر */
	--preloader-wave-color: #2c3e50;  /* رنگ شکل موج */
	--preloader-logo-size: 110px;     /* سایز لوگو */
	--preloader-text-color: #3a2c14;  /* رنگ عدد درصد */
}

html.preloader-active {
	overflow: hidden;
	height: 100%;
}

#site-preloader {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--preloader-bg);
	transition: opacity .6s ease, visibility .6s ease;
	opacity: 1;
	visibility: visible;
}

#site-preloader.is-hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.preloader-inner {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.preloader-stage {
	position: relative;
	width: calc(var(--preloader-logo-size) * 3.6);
	height: calc(var(--preloader-logo-size) * 3.6);
	display: flex;
	align-items: center;
	justify-content: center;
}

.preloader-logo {
	position: relative;
	z-index: 3;
	width: var(--preloader-logo-size);
	height: auto;
	display: block;
	filter: drop-shadow(0 0 12px rgba(0,0,0,.25));
}

/* حلقه‌های موج: بیرون میرن، محو میشن و دوباره جمع میشن توی لوگو */
.preloader-wave {
	position: absolute;
	top: 50%;
	left: 50%;
	width: calc(var(--preloader-logo-size) * 1.3);
	height: auto;
	color: var(--preloader-wave-color);
	opacity: 0;
	z-index: 1;
	pointer-events: none;
	animation: preloaderWave 3.2s cubic-bezier(.45,0,.4,1) infinite;
}

.preloader-wave svg {
	display: block;
	width: 100%;
	height: auto;
}

.preloader-wave:nth-child(1) { animation-delay: 0s; }
.preloader-wave:nth-child(2) {
	animation-delay: .8s;
	animation-name: preloaderWaveAlt; /* چرخش برعکس برای حس نامنظم‌تر */
}
.preloader-wave:nth-child(3) { animation-delay: 1.6s; }
.preloader-wave:nth-child(4) {
	animation-delay: 2.4s;
	animation-name: preloaderWaveAlt;
}

/* شکل SVG از نزدیک لوگو بزرگ و چرخان بیرون میره، محو میشه و برمیگرده تو لوگو */
@keyframes preloaderWave {
	0% {
		transform: translate(-50%, -50%) scale(.25) rotate(0deg);
		opacity: 0;
	}
	12% {
		opacity: .9;
	}
	55% {
		transform: translate(-50%, -50%) scale(2.4) rotate(80deg);
		opacity: .35;
	}
	100% {
		transform: translate(-50%, -50%) scale(.25) rotate(180deg);
		opacity: 0;
	}
}

@keyframes preloaderWaveAlt {
	0% {
		transform: translate(-50%, -50%) scale(.25) rotate(0deg);
		opacity: 0;
	}
	12% {
		opacity: .9;
	}
	55% {
		transform: translate(-50%, -50%) scale(2.4) rotate(-80deg);
		opacity: .35;
	}
	100% {
		transform: translate(-50%, -50%) scale(.25) rotate(-180deg);
		opacity: 0;
	}
}

.preloader-percent {
	margin-top: 28px;
	font-family: 'Courier New', monospace;
	font-variant-numeric: tabular-nums;
	font-size: 22px;
	letter-spacing: 2px;
	color: var(--preloader-text-color);
	direction: ltr;
}

.preloader-percent::after {
	content: '%';
	margin-inline-start: 2px;
	opacity: .6;
}

@media (max-width: 480px) {
	:root {
		--preloader-logo-size: 80px;
	}
}