/**
 * OpsMind Preload — front-end application of Theme Options selection.
 */

:root {
	--om-c1: var(--opsmind-preload-c1, #f0b27a);
	--om-c2: var(--opsmind-preload-c2, #f4ebff);
	--om-c3: var(--opsmind-preload-c3, #5ec4c0);
	--om-grad: var(--opsmind-preload-grad, linear-gradient(135deg, var(--om-c1), var(--om-c2) 48%, var(--om-c3)));
	--om-display: "Outfit", "Tajawal", "Segoe UI", sans-serif;
}

/* Global fixed overlay — light (~50%) blur, single layer */
#opsmind-preload-overlay {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.5);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	pointer-events: all;
}
#opsmind-preload-overlay.is-on {
	display: flex !important;
}

/* When our overlay is on, mute native full-page loaders (avoid double heavy blur). */
body.opsmind-preload-overlay-on .map-content-loading,
body.opsmind-preload-overlay-on .map-loading,
body.opsmind-preload-overlay-on .loader-wrapper.om-preload-wrap,
body.opsmind-preload-active .map-content-loading.om-preload-wrap {
	background: transparent !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
}
body.opsmind-preload-overlay-on .modern-search-result.loading .map-content-loading,
body.opsmind-preload-overlay-on .map-content-loading.om-preload-wrap {
	opacity: 0 !important;
	pointer-events: none !important;
}

/* Kill legacy core rule: .map-content-loading span { position:absolute; width:100% } */
body.opsmind-preload-active .map-content-loading .om-flip,
body.opsmind-preload-active .map-content-loading .om-flip__letter,
body.opsmind-preload-active .filter-loading .om-flip__letter,
body.opsmind-preload-active .loader-wrapper .om-flip__letter,
#opsmind-preload-overlay .om-flip__letter {
	position: relative !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	bottom: auto !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	margin-top: 0 !important;
	font-style: normal !important;
	font-weight: 800 !important;
	text-align: inherit !important;
	z-index: auto !important;
}

body.opsmind-preload-active .loader-wrapper .ops-loader,
body.opsmind-preload-active .map-content-loading .ops-loader,
body.opsmind-preload-active .map-loading .ops-loader,
body.opsmind-preload-active .filter-loading .ops-loader,
body.opsmind-preload-active .opsmind-orb,
body.opsmind-preload-active .opsmind-orb__spin,
body.opsmind-preload-active .lds-ripple {
	display: none !important;
	opacity: 0 !important;
	visibility: hidden !important;
	animation: none !important;
}

.loader-wrapper.om-preload-wrap,
.map-content-loading.om-preload-wrap,
.map-loading.om-preload-wrap,
.filter-loading.om-preload-wrap {
	align-items: center !important;
	justify-content: center !important;
	background: rgba(255, 255, 255, 0.5) !important;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	z-index: 40 !important;
}

.modern-search-result.loading .map-content-loading.om-preload-wrap,
.modern-search-result.loading .filter-loading.om-preload-wrap {
	display: block !important;
}

.om-preload {
	display: grid;
	place-items: center;
	pointer-events: none;
}

/* 1 Infinity */
.om-preload--1 .om-inf {
	width: 170px;
	height: 85px;
	filter: drop-shadow(0 10px 22px color-mix(in srgb, var(--om-c1) 30%, transparent));
}
.om-preload--1 .om-inf__path {
	stroke: url(#omInfGradFront);
	stroke-width: 16;
	stroke-linecap: round;
	stroke-linejoin: round;
	fill: none;
	stroke-dasharray: 280;
	animation: omInfFlow 2.4s ease-in-out infinite;
}
@keyframes omInfFlow {
	0% { stroke-dashoffset: 280; opacity: 0.85; }
	50% { stroke-dashoffset: 0; opacity: 1; }
	100% { stroke-dashoffset: -280; opacity: 0.85; }
}

/* 2 Ripples */
.om-preload--2 { position: relative; width: 130px; height: 130px; }
.om-preload--2 .om-rip {
	position: absolute; inset: 0; border-radius: 50%;
	border: 1.5px solid color-mix(in srgb, var(--om-c3) 45%, white);
	opacity: 0; animation: omRipple 3.2s ease-out infinite;
}
.om-preload--2 .om-rip:nth-child(2) { animation-delay: 0.55s; }
.om-preload--2 .om-rip:nth-child(3) { animation-delay: 1.1s; }
.om-preload--2 .om-rip:nth-child(4) { animation-delay: 1.65s; }
.om-preload--2 .om-rip:nth-child(5) { animation-delay: 2.2s; }
.om-preload--2 .om-rip--bg {
	inset: 8%; border: 0; opacity: 1; animation: none;
	background: linear-gradient(145deg, var(--om-c1), var(--om-c3));
	filter: saturate(0.8) brightness(1.06);
}
.om-preload--2 .om-rip--core {
	inset: 40%; border: 0; opacity: 1;
	animation: omCorePulse 2s ease-in-out infinite;
	background: radial-gradient(circle at 35% 30%, #fff, transparent 70%);
}
@keyframes omRipple {
	0% { transform: scale(0.35); opacity: 0.55; }
	70% { opacity: 0.15; }
	100% { transform: scale(1); opacity: 0; }
}
@keyframes omCorePulse {
	0%, 100% { transform: scale(0.92); }
	50% { transform: scale(1.08); }
}

/* 3 Capsule */
.om-preload--3 .om-cap {
	position: relative; width: 58px; height: 132px; border-radius: 999px;
	background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0.18));
	border: 1px solid rgba(255,255,255,0.75);
	box-shadow: 0 14px 32px rgba(15, 23, 42, 0.12);
	overflow: hidden;
}
.om-preload--3 .om-cap__mist {
	position: absolute; left: -20%; width: 140%; height: 70%; border-radius: 50%;
	filter: blur(10px) saturate(0.85); opacity: 0.85;
	animation: omMistRise 4.5s ease-in-out infinite;
}
.om-preload--3 .om-cap__mist--a { bottom: -10%; background: radial-gradient(circle, var(--om-c3), transparent 70%); }
.om-preload--3 .om-cap__mist--b { bottom: 10%; background: radial-gradient(circle, var(--om-c2), transparent 68%); animation-delay: -1.4s; opacity: 0.55; }
.om-preload--3 .om-cap__mist--c { bottom: 25%; background: radial-gradient(circle, var(--om-c1), transparent 70%); animation-delay: -2.6s; }
.om-preload--3 .om-cap__shine {
	position: absolute; inset: 8% 18% auto; height: 42%; border-radius: 999px;
	background: linear-gradient(180deg, rgba(255,255,255,0.7), transparent);
}
@keyframes omMistRise {
	0% { transform: translateY(18%) scale(1); }
	50% { transform: translateY(-35%) scale(1.08); }
	100% { transform: translateY(18%) scale(1); }
}

/* 4 Comet */
.om-preload--4 .om-comet {
	position: relative; width: 120px; height: 120px; border-radius: 50%;
	background: conic-gradient(from 0deg, transparent 0 62%, color-mix(in srgb, var(--om-c1) 55%, white) 72%, var(--om-c2) 82%, var(--om-c3) 92%, transparent 100%);
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 12px), #000 calc(100% - 11px));
	mask: radial-gradient(farthest-side, transparent calc(100% - 12px), #000 calc(100% - 11px));
	animation: omCometSpin 2.2s linear infinite;
	filter: drop-shadow(0 0 10px color-mix(in srgb, var(--om-c1) 35%, transparent));
}
.om-preload--4 .om-comet__spark {
	position: absolute; width: 12px; height: 12px; border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #fff, var(--om-c1));
	top: 78%; left: 72%;
	box-shadow: 0 0 14px color-mix(in srgb, var(--om-c1) 70%, white);
}
@keyframes omCometSpin { to { transform: rotate(360deg); } }

/* 5 Name flip */
.om-preload--5 .om-flip {
	display: flex; flex-direction: row; align-items: center; justify-content: center;
	gap: 0.06em; direction: ltr !important; unicode-bidi: isolate;
	font-family: var(--om-display);
	font-size: clamp(1.85rem, 5vw, 2.75rem);
	font-weight: 800; letter-spacing: 0.04em; line-height: 1;
	perspective: 900px; min-height: 1.2em;
}
.om-preload--5 .om-flip__letter {
	display: inline-block; transform-style: preserve-3d;
	font-style: normal;
	background: var(--om-grad); background-size: 200% 200%;
	-webkit-background-clip: text; background-clip: text; color: transparent;
	animation:
		omLetterRun var(--om-flip-dur, 3.6s) cubic-bezier(0.4, 0, 0.2, 1) infinite,
		omLetterGrad 3.6s ease-in-out infinite;
	animation-delay: var(--om-delay, 0s), 0s;
}
.om-preload--5 .om-flip[data-dir="left"] .om-flip__letter {
	animation-name: omLetterRunLeft, omLetterGrad;
}
@keyframes omLetterGrad {
	0%, 100% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
}
@keyframes omLetterRun {
	0% { opacity: 0; transform: translateX(1.4em) rotateY(-75deg) scale(0.86); }
	28% { opacity: 1; transform: translateX(0) rotateY(0deg) scale(1); }
	48% { opacity: 1; transform: translateX(0) rotateY(0deg) scale(1); }
	78% { opacity: 1; transform: translateX(-0.35em) rotateY(55deg) scale(0.94); }
	100% { opacity: 0; transform: translateX(-1.5em) rotateY(80deg) scale(0.82); }
}
@keyframes omLetterRunLeft {
	0% { opacity: 0; transform: translateX(-1.4em) rotateY(75deg) scale(0.86); }
	28% { opacity: 1; transform: translateX(0) rotateY(0deg) scale(1); }
	48% { opacity: 1; transform: translateX(0) rotateY(0deg) scale(1); }
	78% { opacity: 1; transform: translateX(0.35em) rotateY(-55deg) scale(0.94); }
	100% { opacity: 0; transform: translateX(1.5em) rotateY(-80deg) scale(0.82); }
}