/* Preloader — primera visita (decisión 17/09/2026) */
/* Mecanismo: relleno de agua sobre el logo + arch window con terrain batimétrico */

#pm-preloader {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: transparent; /* El SVG de terrain provee el fondo arena */
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

#pm-preloader.pm-fade-out {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

/* ── SVG máscara: fondo arena + terrain batimétrico + arch window ── */
.pm-intro-mask {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	z-index: 1;
	pointer-events: none;
}

/* ── Logo con efecto de relleno de agua ── */
.pm-brand {
	position: relative;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	transform: translateY(-30px);
	transition: opacity 0.4s ease, transform 0.4s ease;
}

.pm-brand.pm-brand-out {
	opacity: 0;
	transform: translateY(-50px);
}

.pm-logo-wrap {
	width: clamp(260px, 42vw, 480px);
	aspect-ratio: 318.8 / 51.6;
	position: relative;
}

.pm-logo-base,
.pm-logo-top {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.pm-logo-base {
	fill: #16304A;
	opacity: 0.25;
}

.pm-logo-top {
	fill: #16304A;
	clip-path: polygon(
		0% 100%, 10% 100%, 20% 100%, 30% 100%, 40% 100%,
		50% 100%, 60% 100%, 70% 100%, 80% 100%, 90% 100%,
		100% 100%, 100% 100%, 0% 100%
	);
	animation: pmWaterFill 2.8s cubic-bezier(0.45, 0, 0.4, 1) forwards;
	animation-delay: 0.3s;
}

@keyframes pmWaterFill {
	28% {
		clip-path: polygon(
			0% 84%, 10% 79%, 20% 86%, 30% 77%, 40% 84%,
			50% 76%, 60% 83%, 70% 78%, 80% 85%, 90% 79%,
			100% 84%, 100% 100%, 0% 100%
		);
	}
	62% {
		clip-path: polygon(
			0% 50%, 10% 45%, 20% 52%, 30% 43%, 40% 50%,
			50% 42%, 60% 49%, 70% 44%, 80% 51%, 90% 45%,
			100% 50%, 100% 100%, 0% 100%
		);
	}
	100% {
		clip-path: polygon(
			0% 0%, 10% 0%, 20% 0%, 30% 0%, 40% 0%,
			50% 0%, 60% 0%, 70% 0%, 80% 0%, 90% 0%,
			100% 0%, 100% 100%, 0% 100%
		);
	}
}

/* Tagline */
.pm-tagline {
	font-family: Consolas, ui-monospace, monospace;
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: #88734A;
	text-align: center;
	opacity: 0;
	animation: pmTagFade 0.5s ease forwards;
	animation-delay: 0.8s;
}

@keyframes pmTagFade {
	to { opacity: 1; }
}

/* Sin animaciones si el usuario las desactiva */
@media (prefers-reduced-motion: reduce) {
	#pm-preloader { display: none !important; }
}