/**
 * Motionva Engine · estilos base
 * Estados iniciales anti-FOUC + chrome de preloader / overlay / marquee.
 * Las animaciones reales las maneja GSAP; aquí solo evitamos parpadeos.
 */

/* Anti-FOUC: oculta el estado inicial SOLO si JS está activo y sin reduced-motion. */
.js .motionva-text-reveal,
.js [data-motionva][data-motionva-pending] {
	visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.js .motionva-text-reveal,
	.js [data-motionva] {
		visibility: visible !important;
	}
}

/* Failsafe: si GSAP no carga, nunca dejes contenido oculto. */
.motionva-no-gsap .motionva-text-reveal,
.motionva-no-gsap [data-motionva] {
	visibility: visible !important;
}

/* Marquee */
.motionva-marquee {
	overflow: hidden;
	white-space: nowrap;
	width: 100%;
}
.motionva-marquee__track {
	display: inline-flex;
	will-change: transform;
}
.motionva-marquee__item {
	padding-inline: 1.5rem;
	font-size: clamp(1.5rem, 5vw, 4rem);
	font-weight: 700;
}

/* Magnetic button */
.motionva-magnetic {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	will-change: transform;
	text-decoration: none;
}

/* Preloader */
.motionva-preloader {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: grid;
	place-items: center;
	background: var(--mv-color-bg, #0a0a0a);
	/* Backstop: si TODO el JS falla, desaparece a los 6s y no bloquea el sitio. */
	animation: motionva-preloader-failsafe 0s linear 6s forwards;
}
@keyframes motionva-preloader-failsafe {
	to { opacity: 0; visibility: hidden; pointer-events: none; }
}
.motionva-preloader__bar {
	display: block;
	width: 0;
	height: 2px;
	background: var(--mv-color-accent, #fff);
	transition: width 0.2s ease;
}

/* Page transition overlay */
.motionva-transition-overlay {
	position: fixed;
	inset: 0;
	z-index: 9998;
	background: var(--mv-color-bg, #0a0a0a);
	transform: scaleY(0);
	transform-origin: bottom;
	pointer-events: none;
}

/* Horizontal Scroll */
.motionva-hscroll { overflow: hidden; }
.motionva-hscroll__track { display: flex; will-change: transform; }
.motionva-hscroll__panel {
	flex: 0 0 clamp(280px, 70vw, 640px);
	height: 100vh;
	display: grid;
	place-content: center;
	padding: 2rem;
}
.motionva-hscroll__panel img { width: 100%; height: 70vh; object-fit: cover; border-radius: var(--mv-radius, 14px); }

/* Sticky Storytelling */
.motionva-sticky { position: relative; }
.motionva-sticky__pin { height: 100vh; display: grid; place-content: center; text-align: center; }
.motionva-sticky__step { grid-area: 1 / 1; max-width: 40ch; will-change: transform, opacity; }

/* Advanced Parallax */
.motionva-parallax { position: relative; overflow: hidden; min-height: 60vh; }
.motionva-parallax__layer {
	position: absolute;
	inset: -20% 0;
	background-size: cover;
	background-position: center;
	will-change: transform;
}

/* ScrollSmoother requiere estos contenedores sin transform extra. */
#smooth-wrapper,
#smooth-content {
	will-change: transform;
}