/* ============================================================
   PRELOADER · "Baraja mental"
   Intro de entrada (solo Home, 1ª vez por sesión). El collage y el
   título corren con .is-playing; el telón sube con .is-revealing
   (lo dispara el JS cuando el hero ya cargó). Namespace .mg-preloader.
   ============================================================ */

/* Sin intro (visita repetida o reduced-motion): nunca se pinta. */
html.mg-intro-seen .mg-preloader { display: none !important; }
/* Bloqueo de scroll durante la intro. */
html.mg-intro-lock, html.mg-intro-lock body { overflow: hidden; }

.mg-preloader {
	position: fixed; inset: 0; z-index: 100000;
	background: var(--mg-bg);
	overflow: hidden;
	display: grid; place-items: center;
	will-change: transform;
}
.mg-preloader::before {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background:
		radial-gradient(120% 90% at 50% 30%, rgba(40,28,12,.55) 0%, rgba(13,11,13,0) 55%),
		radial-gradient(140% 120% at 50% 120%, rgba(0,0,0,.8) 0%, rgba(13,11,13,0) 60%);
}
.mg-preloader::after {
	content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .05; mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* chispa dorada */
.mg-preloader__spark {
	position: absolute; z-index: 2; color: var(--mg-yellow);
	font-size: 18px; opacity: 0; transform: scale(.4);
}
.mg-preloader.is-playing .mg-preloader__spark { animation: mgSpark 1.6s ease both; }
@keyframes mgSpark {
	0% { opacity: 0; transform: scale(.3); }
	14% { opacity: 1; transform: scale(1); }
	46% { opacity: .55; transform: scale(.85); }
	100% { opacity: 0; transform: scale(.6); }
}

/* collage */
.mg-preloader__collage {
	position: relative; z-index: 1;
	width: clamp(190px, 25vw, 290px);
	aspect-ratio: 3 / 4;
}
.mg-preloader__card {
	position: absolute; inset: 0;
	transform: rotate(var(--r,0deg)) translate(var(--x,0), var(--y,0));
}
.mg-preloader__card-inner {
	width: 100%; height: 100%;
	border-radius: 4px; overflow: hidden;
	box-shadow: 0 34px 70px rgba(0,0,0,.55), 0 2px 0 rgba(255,255,255,.04) inset;
	outline: 1px solid rgba(255,255,255,.08);
	opacity: 0; transform: translateY(-70px) scale(1.14);
}
.mg-preloader__card-inner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mg-preloader.is-playing .mg-preloader__card-inner {
	animation: mgCardIn .62s cubic-bezier(.22,1,.36,1) var(--d,0s) both;
}
@keyframes mgCardIn {
	0% { opacity: 0; transform: translateY(-70px) scale(1.14); filter: brightness(1.6); }
	60% { opacity: 1; }
	100% { opacity: 1; transform: translateY(0) scale(1); filter: brightness(1); }
}

/* título */
.mg-preloader__type {
	position: absolute; z-index: 3; left: 0; right: 0;
	display: flex; flex-direction: column; align-items: center; gap: 14px;
	text-align: center; pointer-events: none;
}
.mg-preloader__title {
	margin: 0; font-family: var(--mg-font-place);
	font-size: clamp(46px, 11.5vw, 168px); line-height: .9; letter-spacing: -2px;
	color: #fff; text-transform: uppercase; mix-blend-mode: difference;
	clip-path: inset(0 100% 0 0);
}
.mg-preloader.is-playing .mg-preloader__title { animation: mgWipe .82s cubic-bezier(.76,0,.24,1) 1.18s both; }
@keyframes mgWipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

.mg-preloader__eyebrow {
	font-family: var(--mg-font-stat); font-weight: 800;
	font-size: clamp(9px,1vw,12px); letter-spacing: 4px; color: var(--mg-yellow);
	text-transform: uppercase; opacity: 0;
}
.mg-preloader.is-playing .mg-preloader__eyebrow { animation: mgFadeUp .7s ease 1.46s both; }
@keyframes mgFadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: .9; transform: none; } }

/* telón (lo dispara el JS con .is-revealing) */
.mg-preloader.is-revealing { animation: mgCurtainUp .92s cubic-bezier(.76,0,.24,1) forwards; }
@keyframes mgCurtainUp { from { transform: translateY(0); } to { transform: translateY(-100%); } }
.mg-preloader.is-revealing .mg-preloader__collage,
.mg-preloader.is-revealing .mg-preloader__type {
	animation: mgLiftFade .92s cubic-bezier(.76,0,.24,1) .05s forwards;
}
@keyframes mgLiftFade {
	from { transform: translateY(0) scale(1); opacity: 1; }
	to { transform: translateY(46px) scale(.96); opacity: .4; }
}

@media (prefers-reduced-motion: reduce) {
	.mg-preloader { display: none !important; }
}