/* ================================================================
   PRELOADER — lightweight creative intro
   ================================================================ */
.preloader {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: grid;
	place-items: center;
	overflow: hidden;
	background: var(--color-bg-primary);
	/* Failsafe: reveal the site even if JS never runs. */
	animation: preloader-failsafe 0.6s ease 6s forwards;
}

.preloader--done {
	animation: none;
	pointer-events: none;
}

.preloader[hidden] {
	display: none;
}

html.is-loading,
html.is-loading body {
	overflow: hidden;
	max-height: 100vh;
}

/* Column curtain (exit wipe) */
.preloader__bars {
	position: absolute;
	inset: 0;
	display: flex;
	pointer-events: none;
}

.preloader__bar {
	flex: 1;
	height: 100%;
	background: var(--color-bg-primary);
	transform: translateY(0);
	transition: transform 0.7s cubic-bezier(0.76, 0, 0.24, 1);
}

.preloader__bar:not(:last-child) {
	border-right: 1px solid rgba(255, 255, 255, 0.02);
}

.preloader--done .preloader__bar {
	transform: translateY(-101%);
}

.preloader--done .preloader__bar:nth-child(1) { transition-delay: 0s; }
.preloader--done .preloader__bar:nth-child(2) { transition-delay: 0.06s; }
.preloader--done .preloader__bar:nth-child(3) { transition-delay: 0.12s; }
.preloader--done .preloader__bar:nth-child(4) { transition-delay: 0.18s; }
.preloader--done .preloader__bar:nth-child(5) { transition-delay: 0.24s; }
.preloader--done .preloader__bar:nth-child(6) { transition-delay: 0.3s; }

/* Ambient */
.preloader__glow {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 60vmin;
	height: 60vmin;
	transform: translate(-50%, -50%);
	background: radial-gradient(circle, var(--color-accent-glow) 0%, transparent 62%);
	filter: blur(40px);
	opacity: 0.5;
	pointer-events: none;
	animation: preloader-breathe 3s ease-in-out infinite;
}

@keyframes preloader-breathe {
	0%, 100% { opacity: 0.35; transform: translate(-50%, -50%) scale(0.9); }
	50% { opacity: 0.6; transform: translate(-50%, -50%) scale(1.05); }
}

.preloader__grid {
	position: absolute;
	inset: -2px;
	background-image:
		linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
	background-size: 48px 48px;
	mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 10%, transparent 70%);
	-webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 10%, transparent 70%);
	opacity: 0.6;
	pointer-events: none;
}

/* Content */
.preloader__content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5rem;
	padding: 2rem;
	transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.preloader--done .preloader__content {
	opacity: 0;
	transform: translateY(-14px);
	transition-delay: 0s;
}

/* Brand mark — pulsing rings + equalizer */
.preloader__mark {
	position: relative;
	display: grid;
	place-items: center;
	width: 84px;
	height: 84px;
}

.preloader__ring {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 1px solid rgba(214, 255, 47, 0.4);
	animation: preloader-ring 2.2s ease-out infinite;
}

.preloader__ring:nth-child(2) { animation-delay: 0.7s; }
.preloader__ring:nth-child(3) { animation-delay: 1.4s; }

@keyframes preloader-ring {
	0% { transform: scale(0.35); opacity: 0.9; }
	100% { transform: scale(1); opacity: 0; }
}

.preloader__eq {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	height: 40px;
}

.preloader__eq span {
	display: block;
	width: 4px;
	height: 30%;
	border-radius: 4px;
	background: linear-gradient(to top, var(--color-accent), rgba(214, 255, 47, 0.5));
	box-shadow: 0 0 10px rgba(214, 255, 47, 0.4);
	animation: preloader-eq 1s ease-in-out infinite;
}

.preloader__eq span:nth-child(1) { animation-delay: -0.9s; }
.preloader__eq span:nth-child(2) { animation-delay: -0.6s; }
.preloader__eq span:nth-child(3) { animation-delay: -0.3s; }
.preloader__eq span:nth-child(4) { animation-delay: -0.75s; }
.preloader__eq span:nth-child(5) { animation-delay: -0.45s; }

@keyframes preloader-eq {
	0%, 100% { height: 22%; }
	50% { height: 100%; }
}

/* Wordmark — always LTR (English brand) even when site is RTL */
.preloader__brand {
	display: flex;
	flex-direction: row;
	direction: ltr;
	unicode-bidi: isolate;
	gap: 0.14em;
	font-size: clamp(1.1rem, 4vw, 1.5rem);
	font-weight: 800;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--color-white);
	padding-inline-start: 0.32em;
	font-family: var(--font-en);
}

.preloader__brand span {
	display: inline-block;
	opacity: 0;
	transform: translateY(0.6em);
	animation: preloader-letter 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes preloader-letter {
	to { opacity: 1; transform: translateY(0); }
}

/* Progress */
.preloader__progress {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	width: min(240px, 62vw);
}

.preloader__track {
	position: relative;
	flex: 1;
	height: 2px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.1);
	overflow: hidden;
}

.preloader__fill {
	position: absolute;
	inset: 0;
	width: 0;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--color-accent), rgba(214, 255, 47, 0.5));
	box-shadow: 0 0 12px rgba(214, 255, 47, 0.5);
	transition: width 0.25s ease;
}

.preloader__percent {
	min-width: 3ch;
	font-size: 0.75rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.05em;
	color: var(--color-text-secondary);
}

@keyframes preloader-failsafe {
	to { opacity: 0; visibility: hidden; pointer-events: none; }
}

@media (prefers-reduced-motion: reduce) {
	.preloader__glow,
	.preloader__ring,
	.preloader__eq span,
	.preloader__brand span {
		animation: none;
	}

	.preloader__brand span {
		opacity: 1;
		transform: none;
	}

	.preloader__bar {
		transition-duration: 0.3s;
	}
}