/*
 * Estados de la capa de movimiento.
 *
 * Regla de oro: el contenido NUNCA se oculta desde aquí. Los estados iniciales
 * los fija GSAP con gsap.set() una vez confirmado que cargó; si el script no
 * llega, todo queda visible. Este archivo solo aporta lo que el motor necesita
 * (contexto de apilamiento, perspectiva, recortes) y los efectos de cursor.
 */

/* Deja al navegador optimizar solo lo que de verdad se va a mover. */
[data-parallax],
[data-anim],
.web-orbe,
.web-flotante { will-change: transform; }

/* Contenedor con perspectiva para la inclinación de las tarjetas. */
[data-inclinar] {
    transform-style: preserve-3d;
    will-change: transform;
}

/* ── Imagen con barrido ──────────────────────────────────────────────────── */
.web-img { display: block; overflow: hidden; }
.web-img img { display: block; width: 100%; height: auto; }
[data-barrido] { overflow: hidden; }

/* ── Recorrido fijado del proceso ────────────────────────────────────────── */
.proceso-pista {
    display: flex;
    gap: var(--sp-5);
    will-change: transform;
}
.proceso-pista > * { flex: 0 0 clamp(15rem, 26vw, 20rem); }

/* En pantallas pequeñas no se fija nada: el recorrido pasa a scroll lateral. */
@media (max-width: 61.99rem) {
    .proceso-pista {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-bottom: var(--sp-3);
        -webkit-overflow-scrolling: touch;
    }
    .proceso-pista > * { scroll-snap-align: start; }
}

/* ── Botón magnético ─────────────────────────────────────────────────────── */
[data-magnetico] { will-change: transform; }
[data-magnetico] > span { display: inline-block; will-change: transform; }

/* ── Titular partido en palabras ─────────────────────────────────────────── */
.palabra { display: inline-block; will-change: transform; }
.linea-split { overflow: hidden; display: block; }

/*
 * Si el usuario pide menos movimiento, o el administrador lo apaga, se anula
 * todo: GSAP tampoco registra animaciones en ese caso.
 */
@media (prefers-reduced-motion: reduce) {
    [data-parallax],
    [data-anim],
    [data-inclinar],
    [data-magnetico],
    .palabra {
        transform: none !important;
        opacity: 1 !important;
        will-change: auto;
    }
}

html[data-movimiento="apagado"] [data-parallax],
html[data-movimiento="apagado"] [data-anim],
html[data-movimiento="apagado"] .palabra {
    transform: none !important;
    opacity: 1 !important;
}