/* ==========================================================================
   WeUno page loader
   A single orchestrated moment: the logo wipes up through a mask, a hairline
   fills across, then the screen leaves as five columns lifting out of frame.
   ========================================================================== */

.weuno-loader {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

/* The five columns that make up the dark screen. */
.weuno-loader__curtain {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
}

.weuno-loader__col {
	background: #262626;
	transform: translateY(0);
	will-change: transform;
}

.weuno-loader__content {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5rem;
	will-change: transform, opacity;
}

/* The mask: the logo sits below the line and rises into view. */
.weuno-loader__mark {
	overflow: hidden;
	line-height: 0;
}

.weuno-loader__mark img {
	display: block;
	width: 10rem;
	height: auto;
	transform: translateY(110%);
	will-change: transform;
}

.weuno-loader__rule {
	position: relative;
	width: 10rem;
	height: 1px;
	background: rgba(255, 255, 255, 0.2);
	overflow: hidden;
}

.weuno-loader__rule span {
	position: absolute;
	inset: 0;
	background: #fff;
	transform: scaleX(0);
	transform-origin: left;
	will-change: transform;
}

/* No JS, or the script failed: never trap the page behind the overlay. */
.no-js .weuno-loader,
.weuno-loader.is-done {
	display: none;
}

.weuno-loader.is-done .weuno-loader__content {
	visibility: hidden;
	opacity: 0;
}

/* Lock scroll only while the loader is actually on screen. */
html.weuno-loading,
html.weuno-loading body {
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.weuno-loader {
		display: none;
	}
}