/*!
 * Neo Motion — estilos base
 *
 * Sólo lo imprescindible para que los efectos funcionen. Nada de colores
 * de marca ni de tipografías: eso vive en el tema. Así esta carpeta se
 * puede copiar a cualquier proyecto sin arrastrar estética ajena.
 */

/* ---------- Estados de aparición ---------- */

.neo-hidden {
	opacity: 0;
	transform: translate3d(0, 30px, 0);
	transition: opacity .8s cubic-bezier(.22, .68, .28, 1), transform .8s cubic-bezier(.22, .68, .28, 1);
	will-change: opacity, transform;
}
.neo-hidden.is-visible { opacity: 1; transform: none; }

/* Sin JS el contenido se ve igual: nunca queda escondido esperando un script. */
.no-js .neo-hidden,
html:not(.neo-motion-ready) .neo-hidden { opacity: 1; transform: none; }

/* ---------- Split text ---------- */

.neo-split { overflow: visible; }
.neo-split .neo-line { overflow: hidden; display: block; padding-bottom: .08em; }

/* ---------- Smooth scroll ---------- */

html.neo-smooth { scroll-behavior: auto; }
html.neo-smooth body { overscroll-behavior: none; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }

/* ---------- Tilt ---------- */

.neo-tilt { transform-style: preserve-3d; }
.neo-tilt > * { transform-style: preserve-3d; }

/* ---------- Cursor personalizado ---------- */

.neo-cursor {
	position: fixed;
	top: 0; left: 0;
	z-index: 9999;
	pointer-events: none;
	transform: translate3d(-50%, -50%, 0);
	margin: -1px 0 0 -1px;
	mix-blend-mode: difference;
}
.neo-cursor__ring {
	display: block;
	width: 12px; height: 12px;
	border-radius: 50%;
	background: #fff;
	transform: translate(-50%, -50%);
	transition: width .32s cubic-bezier(.22, .68, .28, 1), height .32s cubic-bezier(.22, .68, .28, 1), opacity .3s;
}
.neo-cursor.is-active .neo-cursor__ring { width: 46px; height: 46px; opacity: .55; }
.neo-cursor__label {
	position: absolute; top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	font-size: .7rem; font-weight: 700;
	letter-spacing: .08em; text-transform: uppercase;
	color: #000; white-space: nowrap;
	opacity: 0; transition: opacity .25s;
}
.neo-cursor.has-label .neo-cursor__ring { width: 84px; height: 84px; opacity: 1; }
.neo-cursor.has-label .neo-cursor__label { opacity: 1; }

/* Al navegar con teclado el cursor deja de tener sentido. */
html.neo-keyboard .neo-cursor { opacity: 0; }

/* El cursor del sistema se mantiene: quitarlo perjudica a quien
   depende de él, y en campos de texto es imprescindible. */

/* ---------- Escena WebGL ---------- */

.neo-scene3d { position: relative; }
.neo-scene3d__canvas {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	pointer-events: none;
	opacity: 0;
	transition: opacity 1.2s ease;
	z-index: 0;
}
.neo-scene3d--on .neo-scene3d__canvas { opacity: 1; }

/* ---------- Scroll horizontal ---------- */

.neo-horizontal { position: relative; overflow: hidden; }
.neo-horizontal__track { display: flex; gap: var(--neo-gap, 1.5rem); will-change: transform; }
.neo-horizontal__track > * { flex: 0 0 min(84vw, 380px); }

/* Sin pinning (móvil o sin GSAP) se convierte en carrusel táctil normal. */
.neo-horizontal--scrollable { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.neo-horizontal--scrollable .neo-horizontal__track { transform: none !important; padding-bottom: .5rem; }
.neo-horizontal--scrollable .neo-horizontal__track > * { scroll-snap-align: start; }
.neo-horizontal--scrollable::-webkit-scrollbar { height: 4px; }
.neo-horizontal--scrollable::-webkit-scrollbar-thumb { background: rgba(128, 128, 128, .35); border-radius: 4px; }

/* ---------- Banda continua ---------- */

.neo-marquee { overflow: hidden; }
.neo-marquee__track { display: flex; width: max-content; will-change: transform; }
.neo-marquee--css .neo-marquee__track { animation: neo-marquee 30s linear infinite; }
@keyframes neo-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Escena sticky ---------- */

.neo-scene__media { position: relative; }
.neo-scene--active .neo-scene__media > * { position: absolute; inset: 0; }
.neo-scene--active .neo-scene__media > *:first-child { position: relative; }

/* ---------- Movimiento reducido ---------- */

@media (prefers-reduced-motion: reduce) {
	.neo-hidden { opacity: 1 !important; transform: none !important; transition: none !important; }
	.neo-cursor { display: none !important; }
	.neo-scene3d__canvas { display: none !important; }
	.neo-marquee--css .neo-marquee__track { animation: none; }
	.neo-horizontal { overflow-x: auto; }
	.neo-horizontal__track { transform: none !important; }
}

/* ---------- Mapa de efectos (sólo en depuración) ---------- */

.neo-effects-map {
	position: fixed;
	right: 1rem; bottom: 1rem;
	z-index: 10000;
	width: min(92vw, 400px);
	max-height: 70vh; overflow: auto;
	background: rgba(8, 14, 24, .95);
	color: #E8EEF7;
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 14px;
	padding: 1rem 1.1rem;
	font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
	backdrop-filter: blur(10px);
	box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .8);
}
.neo-effects-map h2 { margin: 0 0 .35rem; font-size: 13px; color: #fff; letter-spacing: .04em; text-transform: uppercase; }
.neo-effects-map__meta { color: #8FA3BC; margin: 0 0 .9rem; font-size: 12px; }
.neo-effects-map ul { list-style: none; margin: 0; padding: 0; }
.neo-effects-map li { padding: .55rem 0; border-top: 1px solid rgba(255, 255, 255, .1); }
.neo-effects-map b { color: #46E3BE; font-weight: 600; }
.neo-effects-map code { color: #7FC0FF; }
.neo-effects-map small { display: block; color: #93A6BE; }
.neo-effects-map__close {
	position: absolute; top: .55rem; right: .6rem;
	background: none; border: 0; color: #8FA3BC;
	font-size: 16px; cursor: pointer; line-height: 1;
}
.neo-effects-map__off { color: #8FA3BC; }