/* ==========================================================================
   Custom Preloader — styles
   Colors come from CSS variables set inline on #custom-preloader:
     --cp-accent  accent / spinner color
     --cp-text    text color
     --cp-bg      background color
     --cp-speed   base animation speed
   ========================================================================== */

.custom-preloader {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--cp-bg, #ffffff);
	z-index: 999999;
	transition: opacity 0.45s ease, visibility 0.45s ease;
}
.custom-preloader.cp-hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.cp-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 20px;
	max-width: 95%;
	box-sizing: border-box;
}

.cp-logo img {
	max-height: 90px;
	width: auto;
	display: block;
}

.cp-text {
	color: var(--cp-text, #222);
	font-weight: 600;
	font-size: 28px;
	text-align: center;
}

/* -------------------------------------------------- Spinner */
.cp-spinner {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	border: 8px solid rgba(0, 0, 0, 0.08);
	border-top-color: var(--cp-accent, #3498db);
	animation: cp-spin 1s linear infinite;
}
@keyframes cp-spin { to { transform: rotate(360deg); } }

/* -------------------------------------------------- Dots */
.cp-dots { display: flex; gap: 8px; }
.cp-dots span {
	width: 14px; height: 14px; border-radius: 50%;
	background: var(--cp-accent, #3498db);
	animation: cp-dot 1s infinite ease-in-out;
}
.cp-dots span:nth-child(2) { animation-delay: 0.12s; }
.cp-dots span:nth-child(3) { animation-delay: 0.24s; }
@keyframes cp-dot {
	0%, 100% { transform: translateY(0); opacity: 0.4; }
	50%      { transform: translateY(-8px); opacity: 1; }
}

/* -------------------------------------------------- Bar */
.cp-bar {
	width: 180px; height: 8px; border-radius: 6px;
	background: rgba(0, 0, 0, 0.08); overflow: hidden;
}
.cp-bar div {
	width: 35%; height: 100%;
	background: var(--cp-accent, #3498db);
	transform: translateX(-120%);
	animation: cp-bar 1s infinite linear;
}
@keyframes cp-bar { to { transform: translateX(300%); } }

/* ==========================================================================
   Letter / text animations
   Shared markup: .cp-letter-wrap > (.cp-letter-spinner?) + .cp-letters > .cp-letter
   A modifier class on .cp-letters picks the animation:
     .cp-letters--wave    original rise-and-fall wave
     .cp-letters--blink   letters blink in sequence
     .cp-letters--bounce  letters bounce upward in sequence
     .cp-letters--type    letters appear one by one (typewriter)
     .cp-letters--flip    letters flip in (3D) in sequence
   Each letter carries --delay (stagger) and --i (index) inline.
   ========================================================================== */
.cp-letter-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.cp-letter-spinner {
	width: 50px; height: 50px; border-radius: 50%;
	border: 6px solid rgba(0, 0, 0, 0.08);
	border-top-color: var(--cp-accent, #3498db);
	animation: cp-spin 1s linear infinite;
}
.cp-letters {
	display: flex; gap: 4px; flex-wrap: wrap; justify-content: center;
	font-weight: 700; font-size: 28px; color: var(--cp-text, #222);
}
.cp-letter {
	display: inline-block;
	animation-delay: var(--delay, 0ms);
	animation-duration: var(--cp-speed, 900ms);
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
}

/* --- Wave (original): rise up, hold, fall away --- */
.cp-letters--wave .cp-letter {
	opacity: 0; transform: translateY(18px);
	animation-name: cp-letter-wave;
}
@keyframes cp-letter-wave {
	0%   { opacity: 0; transform: translateY(18px); }
	30%  { opacity: 1; transform: translateY(0); }
	70%  { opacity: 1; transform: translateY(0); }
	100% { opacity: 0; transform: translateY(-18px); }
}

/* --- Blink: letters flash in sequence --- */
.cp-letters--blink .cp-letter {
	opacity: 0.15;
	animation-name: cp-letter-blink;
	animation-timing-function: steps(1, end);
}
@keyframes cp-letter-blink {
	0%, 100% { opacity: 0.15; }
	40%, 60% { opacity: 1; color: var(--cp-accent, #3498db); }
}

/* --- Bounce: letters hop up one after another --- */
.cp-letters--bounce .cp-letter {
	animation-name: cp-letter-bounce;
}
@keyframes cp-letter-bounce {
	0%, 60%, 100% { transform: translateY(0); }
	30%           { transform: translateY(-16px); }
}

/* --- Typing: letters appear one by one and hold, then reset --- */
.cp-letters--type .cp-letter {
	opacity: 0; transform: translateX(-4px);
	animation-name: cp-letter-type;
	animation-timing-function: ease-out;
}
@keyframes cp-letter-type {
	0%          { opacity: 0; transform: translateX(-4px); }
	10%, 85%    { opacity: 1; transform: translateX(0); }
	100%        { opacity: 0; transform: translateX(-4px); }
}
/* Blinking caret at the end of the typing style. */
.cp-letters--type::after {
	content: ""; display: inline-block;
	width: 3px; height: 1em; margin-left: 4px; align-self: center;
	background: var(--cp-accent, #3498db);
	animation: cp-caret 0.8s steps(1, end) infinite;
}
@keyframes cp-caret { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }

/* --- Flip In: letters flip in on the X axis in sequence --- */
.cp-letters--flip { perspective: 600px; }
.cp-letters--flip .cp-letter {
	opacity: 0; transform-origin: center bottom;
	animation-name: cp-letter-flip;
}
@keyframes cp-letter-flip {
	0%   { opacity: 0; transform: rotateX(-90deg); }
	25%  { opacity: 1; transform: rotateX(0deg); }
	75%  { opacity: 1; transform: rotateX(0deg); }
	100% { opacity: 0; transform: rotateX(90deg); }
}

@media (max-width: 768px) { .cp-letters { font-size: 22px; } .cp-letter-spinner { width: 40px; height: 40px; } }
@media (max-width: 420px) { .cp-letters { font-size: 18px; } .cp-letter-spinner { width: 34px; height: 34px; } }

/* -------------------------------------------------- Wave */
.cp-wave { display: flex; gap: 6px; align-items: flex-end; }
.cp-wave span {
	width: 6px; height: 18px; display: inline-block;
	background: var(--cp-accent, #3498db);
	animation: cp-wave 1s infinite linear;
}
.cp-wave span:nth-child(2) { animation-delay: 0.08s; }
.cp-wave span:nth-child(3) { animation-delay: 0.16s; }
.cp-wave span:nth-child(4) { animation-delay: 0.24s; }
.cp-wave span:nth-child(5) { animation-delay: 0.32s; }
@keyframes cp-wave { 0%,100% { height: 10px; } 50% { height: 28px; } }

/* -------------------------------------------------- Bounce */
.cp-bounce span {
	width: 14px; height: 14px; border-radius: 50%; margin: 0 6px;
	display: inline-block; background: var(--cp-accent, #3498db);
	animation: cp-bounce 0.9s infinite;
}
.cp-bounce span:nth-child(2) { animation-delay: 0.12s; }
.cp-bounce span:nth-child(3) { animation-delay: 0.24s; }
@keyframes cp-bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* -------------------------------------------------- Fade */
.cp-fade div {
	width: 40px; height: 10px; border-radius: 6px;
	background: var(--cp-accent, #3498db);
	animation: cp-fade 1s infinite;
}
@keyframes cp-fade { 0%,100% { opacity: 0.2; } 50% { opacity: 1; } }

/* -------------------------------------------------- Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.custom-preloader .cp-spinner,
	.custom-preloader .cp-letter-spinner,
	.custom-preloader .cp-dots span,
	.custom-preloader .cp-bar div,
	.custom-preloader .cp-wave span,
	.custom-preloader .cp-bounce span,
	.custom-preloader .cp-fade div,
	.custom-preloader .cp-letters::after {
		animation: none !important;
		opacity: 0.9;
	}
	/* Keep letters fully readable and in place when motion is reduced. */
	.custom-preloader .cp-letter {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
}