/* ───────────────────────────────────────────────
   Komarko Loader – full-page intro animation
   ─────────────────────────────────────────────── */

.komarko-loader {
	position: fixed;
	inset: 0;
	z-index: 99999;
	overflow: hidden;
	color: #fbfbfb;
	pointer-events: auto;
}

.komarko-loader.done {
	display: none;
}

/* ── Split-curtain panels ────────────────────── */

.komarko-loader__panel {
	position: absolute;
	top: 0;
	height: 100%;
	width: 52%;
	background: #000;
	will-change: transform;
	transition: transform 1.08s cubic-bezier(0.76, 0, 0.24, 1);
}

.komarko-loader__panel--left {
	left: 0;
}

.komarko-loader__panel--right {
	right: 0;
}

.komarko-loader.revealing .komarko-loader__panel--left {
	transform: translateX(-100%);
}

.komarko-loader.revealing .komarko-loader__panel--right {
	transform: translateX(100%);
}

/* ── Content layer (text + progress) ─────────── */

.komarko-loader__content {
	position: relative;
	z-index: 10;
	height: 100%;
	width: 100%;
	padding: 0 12px;
}

@media (min-width: 640px) {
	.komarko-loader__content {
		padding: 0 32px;
	}
}

/* ── Centered text ───────────────────────────── */

.komarko-loader__text {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	white-space: nowrap;
	overflow: visible;
	text-align: center;
	font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: clamp(32px, 5vw, 72px);
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	transition:
		opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.komarko-loader.fading .komarko-loader__text {
	opacity: 0;
	transform: translate(-50%, -50%) translateY(-20px);
}

.komarko-loader__group {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
}

/* Logo — spins in */

.komarko-loader__lead {
	display: block;
	height: 1.4em;
	width: auto;
	opacity: 0;
	transform: rotate(-180deg) scale(0.5);
	will-change: transform, opacity;
	transition:
		transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.08s,
		opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.08s;
}

.komarko-loader.text-ready .komarko-loader__lead {
	opacity: 1;
	transform: rotate(0) scale(1);
}

/* Tail ("KOMARKO") — width expands, letters stagger in */

.komarko-loader__tail {
	display: inline-block;
	vertical-align: top;
	white-space: nowrap;
	overflow: hidden;
	overflow-y: clip;
	width: 0;
	will-change: width;
	transition: width 0.82s cubic-bezier(0.22, 1, 0.36, 1) 0.26s;
}

.komarko-loader.text-ready .komarko-loader__tail {
	width: var(--tail-width, 5.5em);
}

.komarko-loader__tail > span {
	display: inline-block;
	vertical-align: top;
	opacity: 0;
	transform: translateY(100%);
	will-change: opacity, transform;
	transition:
		opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: calc(0.3s + var(--i, 0) * 0.028s);
}

.komarko-loader.text-ready .komarko-loader__tail > span {
	opacity: 1;
	transform: translateY(0);
}

/* ── Progress counter (bottom-right) ─────────── */

.komarko-loader__progress {
	position: absolute;
	bottom: 32px;
	right: 32px;
	text-align: right;
	font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: clamp(10px, 1.2vw, 14px);
	line-height: 1;
	font-weight: 500;
	will-change: opacity, transform;
	transition:
		opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.komarko-loader.fading .komarko-loader__progress {
	opacity: 0;
	transform: translateY(-8px);
}