/*!
 * Karam Preloader v1.1.0 — Frontend styles
 * Author: Mostafa Kattan
 *
 * Variables (set inline by PHP):
 *   --kpre-bar-1-delay ... --kpre-bar-4-delay  bar staggers
 *   --kpre-divider-delay, --kpre-word-1-delay, --kpre-word-2-delay
 *   --kpre-vertical-delay, --kpre-tagline-delay,
 *   --kpre-progress-delay, --kpre-credit-delay
 */

#kpre-overlay {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

/* ---------- STAGE ---------- */

.kpre-stage {
	width: 100%;
	max-width: var( --kpre-stage-max, 480px );
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 22px;
	padding: 0 16px;
	box-sizing: border-box;
}

/* Stage entrance variants */
.kpre-stage-fade .kpre-stage     { animation: kpre-stage-fade  900ms ease 0ms forwards; opacity: 0; }
.kpre-stage-zoom .kpre-stage     { animation: kpre-stage-zoom  900ms cubic-bezier(0.22,0.61,0.36,1) 0ms forwards; opacity: 0; transform: scale(0.94); }
.kpre-stage-slide-up .kpre-stage { animation: kpre-stage-up    900ms cubic-bezier(0.22,0.61,0.36,1) 0ms forwards; opacity: 0; transform: translateY(20px); }

@keyframes kpre-stage-fade { to { opacity: 1; } }
@keyframes kpre-stage-zoom { to { opacity: 1; transform: scale(1); } }
@keyframes kpre-stage-up   { to { opacity: 1; transform: translateY(0); } }

/* ---------- LOGO SVG ---------- */

.kpre-logo {
	width: 100%;
	height: auto;
	display: block;
	overflow: visible;
}

.kpre-custom-logo {
	max-width: 100%;
	height: auto;
	display: block;
	opacity: 0;
	animation: kpre-fade-up 900ms cubic-bezier( 0.22, 0.61, 0.36, 1 ) 100ms forwards;
}

/* ---------- BARS — shared base ---------- */

.kpre-bar {
	opacity: 0;
	animation-fill-mode: forwards;
	animation-timing-function: cubic-bezier( 0.22, 0.61, 0.36, 1 );
	animation-duration: 600ms;
}

.kpre-bar-1 { animation-delay: var( --kpre-bar-1-delay, 100ms ); }
.kpre-bar-2 { animation-delay: var( --kpre-bar-2-delay, 220ms ); }
.kpre-bar-3 { animation-delay: var( --kpre-bar-3-delay, 340ms ); }
.kpre-bar-4 { animation-delay: var( --kpre-bar-4-delay, 460ms ); }

/* ---- LEFT (default) ---- */
.kpre-bar-left .kpre-bar { transform-origin: left center; transform: scaleX(0); animation-name: kpre-bar-left; }
@keyframes kpre-bar-left {
	0%   { transform: translateX(-40px) scaleX(0); opacity: 0; }
	60%  { opacity: 1; }
	100% { transform: translateX(0)     scaleX(1); opacity: 1; }
}

/* ---- RIGHT ---- */
.kpre-bar-right .kpre-bar { transform-origin: right center; transform: scaleX(0); animation-name: kpre-bar-right; }
@keyframes kpre-bar-right {
	0%   { transform: translateX(40px)  scaleX(0); opacity: 0; }
	60%  { opacity: 1; }
	100% { transform: translateX(0)     scaleX(1); opacity: 1; }
}

/* ---- UP (slide up from below) ---- */
.kpre-bar-up .kpre-bar { animation-name: kpre-bar-up; }
@keyframes kpre-bar-up {
	0%   { transform: translateY(30px); opacity: 0; }
	100% { transform: translateY(0);    opacity: 1; }
}

/* ---- DOWN (slide down from above) ---- */
.kpre-bar-down .kpre-bar { animation-name: kpre-bar-down; }
@keyframes kpre-bar-down {
	0%   { transform: translateY(-30px); opacity: 0; }
	100% { transform: translateY(0);     opacity: 1; }
}

/* ---- ALTERNATE (odd from left, even from right) ---- */
.kpre-bar-alternate .kpre-bar-1,
.kpre-bar-alternate .kpre-bar-3 { transform-origin: left center;  transform: scaleX(0); animation-name: kpre-bar-left; }
.kpre-bar-alternate .kpre-bar-2,
.kpre-bar-alternate .kpre-bar-4 { transform-origin: right center; transform: scaleX(0); animation-name: kpre-bar-right; }

/* ---- SCALE ---- */
.kpre-bar-scale .kpre-bar { transform-origin: center center; animation-name: kpre-bar-scale; }
@keyframes kpre-bar-scale {
	0%   { transform: scale(0.5); opacity: 0; }
	100% { transform: scale(1);   opacity: 1; }
}

/* ---- FADE ---- */
.kpre-bar-fade .kpre-bar { animation-name: kpre-bar-fade; }
@keyframes kpre-bar-fade {
	0%   { opacity: 0; }
	100% { opacity: 1; }
}

/* ---------- Continuous gentle pulse after intro ---------- */

.kpre-pulse-on .kpre-bars {
	animation: kpre-bars-pulse 2400ms ease-in-out 1800ms infinite;
}

@keyframes kpre-bars-pulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.78; }
}

/* ---------- DIVIDER ---------- */

.kpre-divider {
	stroke-dasharray: 220;
	stroke-dashoffset: 220;
	opacity: 0;
	animation: kpre-divider-draw 700ms cubic-bezier(0.22,0.61,0.36,1) var( --kpre-divider-delay, 650ms ) forwards;
}

@keyframes kpre-divider-draw {
	0%   { stroke-dashoffset: 220; opacity: 0; }
	30%  { opacity: 1; }
	100% { stroke-dashoffset: 0;   opacity: 1; }
}

/* ---------- WORDMARK ---------- */

.kpre-word {
	opacity: 0;
	transform: translateY( 16px );
	animation-fill-mode: forwards;
	animation-duration: 700ms;
	animation-timing-function: cubic-bezier(0.22,0.61,0.36,1);
	transform-box: fill-box;
	transform-origin: left center;
	animation-name: kpre-word-in;
}

.kpre-word-1 { animation-delay: var( --kpre-word-1-delay, 800ms ); }
.kpre-word-2 { animation-delay: var( --kpre-word-2-delay, 980ms ); }

@keyframes kpre-word-in {
	0%   { opacity: 0; transform: translateY(16px); }
	100% { opacity: 1; transform: translateY(0); }
}

/* ---------- VERTICAL "ADVISORY LTD." ---------- */

.kpre-vertical {
	opacity: 0;
	animation: kpre-fade-up 700ms ease var( --kpre-vertical-delay, 1180ms ) forwards;
}

@keyframes kpre-fade-up {
	0%   { opacity: 0; transform: translateY(6px); }
	100% { opacity: 1; transform: translateY(0); }
}

/* ---------- TAGLINE (HTML below SVG) ---------- */

.kpre-tagline {
	color: var( --kpre-tagline );
	font-size: 13px;
	letter-spacing: 4px;
	font-weight: 500;
	text-align: center;
	opacity: 0;
	transform: translateY(8px);
	animation: kpre-fade-up 700ms ease var( --kpre-tagline-delay, 1300ms ) forwards;
	margin-top: -4px;
	max-width: 100%;
	word-wrap: break-word;
}

/* ---------- PROGRESS SHIMMER ---------- */

.kpre-progress {
	margin-top: 4px;
	opacity: 0;
	animation: kpre-fade-up 500ms ease var( --kpre-progress-delay, 1500ms ) forwards;
	width: 100%;
	max-width: 280px;
}

.kpre-progress-track {
	position: relative;
	width: 100%;
	height: 2px;
	background: rgba( 128, 128, 128, 0.15 );
	border-radius: 2px;
	overflow: hidden;
}

.kpre-progress-fill {
	position: absolute;
	left: -40%;
	top: 0;
	height: 100%;
	width: 40%;
	background: linear-gradient(
		90deg,
		transparent 0%,
		var( --kpre-progress ) 50%,
		transparent 100%
	);
	animation: kpre-progress-slide 1400ms cubic-bezier(0.4,0,0.2,1) infinite;
}

@keyframes kpre-progress-slide {
	0%   { left: -40%; }
	100% { left: 100%; }
}

/* ---------- CREDIT LINE ---------- */

.kpre-credit {
	position: absolute;
	bottom: 24px;
	left: 0;
	right: 0;
	text-align: center;
	font-size: 10px;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var( --kpre-credit );
	opacity: 0;
	animation: kpre-fade-up 800ms ease var( --kpre-credit-delay, 1700ms ) forwards;
	padding: 0 16px;
	box-sizing: border-box;
}

/* ---------- REDUCED MOTION ---------- */

@media ( prefers-reduced-motion: reduce ) {
	.kpre-bar,
	.kpre-word,
	.kpre-vertical,
	.kpre-tagline,
	.kpre-progress,
	.kpre-credit,
	.kpre-divider,
	.kpre-custom-logo,
	.kpre-stage,
	.kpre-pulse-on .kpre-bars {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
	.kpre-divider { stroke-dashoffset: 0 !important; }
	.kpre-bar { transform: scaleX(1) translateY(0) scale(1) !important; }
}

/* ---------- MOBILE / RESPONSIVE ---------- */

@media ( max-width: 768px ) {
	.kpre-stage {
		max-width: 92vw !important;
		gap: 18px;
	}
	.kpre-tagline {
		font-size: 11px;
		letter-spacing: 3px;
	}
	.kpre-credit {
		font-size: 9px;
		letter-spacing: 2px;
		bottom: 18px;
	}
}

@media ( max-width: 480px ) {
	.kpre-stage {
		max-width: 96vw !important;
		gap: 14px;
		padding: 0 8px;
	}
	.kpre-tagline {
		font-size: 10px;
		letter-spacing: 2px;
	}
	.kpre-progress {
		max-width: 220px;
	}
}

@media ( max-height: 600px ) {
	.kpre-stage { gap: 14px; }
	.kpre-credit { display: none; }
}