/* ============================================================
   LENGUAJE DE MOVIMIENTO — NXTARA
   ------------------------------------------------------------
   Sistema único de aparición al hacer scroll para todo el sitio.

   Cada página tiene su propia paleta, sus propios fondos y sus
   propios efectos: eso es deliberado y no se toca. Lo que este
   archivo unifica es el RITMO — la misma curva, la misma
   distancia y el mismo escalonado en las diez páginas — para que
   la navegación se sienta de un solo sitio y no de diez.

   Cómo se marca desde un template:

     data-nx-reveal            el bloque sube 24px y aparece
     data-nx-reveal="tenue"    solo aparece, sin desplazamiento.
                               Obligatorio en tarjetas con hover
                               propio: el transform de la entrada
                               pisaría el del hover.
     data-nx-stagger           contenedor cuyos hijos directos
                               entran en cascada, uno tras otro.

   Mejora progresiva en dos niveles, los dos necesarios:

     1. Sin JavaScript, `html` nunca recibe `.nx-anim` y todo se
        ve de inmediato, exactamente como antes de existir este
        archivo. Nada del contenido depende del script.
     2. Con "reducir movimiento" activo, el estado oculto ni
        siquiera se declara: toda la hoja vive dentro de una
        media query `no-preference`. Esto NO es un detalle
        estético. El bloque global de styles.css neutraliza las
        transiciones con `!important`; si el estado inicial se
        declarara fuera de la media query, esos usuarios se
        quedarían con `opacity: 0` y la página en blanco.

   El escalonado se aplica con `--nx-i`, que asigna revelado.js.
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {

    /* --- Opacidad: común a las dos variantes --- */

    .nx-anim [data-nx-reveal],
    .nx-anim [data-nx-stagger] > * {
        opacity: 0;
        transition:
            opacity var(--nx-dur-entrada) var(--nx-ease) var(--nx-retardo, 0ms),
            transform var(--nx-dur-entrada) var(--nx-ease) var(--nx-retardo, 0ms);
    }

    .nx-anim [data-nx-reveal].nx-visible,
    .nx-anim [data-nx-stagger] > .nx-visible {
        opacity: 1;
    }

    /* --- Desplazamiento: SOLO la variante por defecto ---
       La variante "tenue" no declara `transform` ni en el estado
       oculto ni en el revelado, y esto es lo que la hace segura
       para las tarjetas: si el estado revelado pusiera
       `transform: none`, ganaría por especificidad (0,3,0) a
       cualquier `.tarjeta:hover { transform: translateY(-8px) }`
       (0,2,0) y el hover dejaría de levantar la tarjeta.

       Regla práctica: si el elemento —o el hijo directo de un
       contenedor escalonado— tiene un `:hover` con `transform`,
       va en "tenue". Sin excepciones. */

    .nx-anim [data-nx-reveal]:not([data-nx-reveal="tenue"]),
    .nx-anim [data-nx-stagger]:not([data-nx-stagger="tenue"]) > * {
        transform: translate3d(0, 24px, 0);
    }

    .nx-anim [data-nx-reveal]:not([data-nx-reveal="tenue"]).nx-visible,
    .nx-anim [data-nx-stagger]:not([data-nx-stagger="tenue"]) > .nx-visible {
        transform: none;
    }

    /* --- Escalonado ---
       revelado.js escribe `--nx-i` (0, 1, 2…) en cada hijo y aquí
       se convierte en retardo. */

    .nx-anim [data-nx-stagger] > * {
        --nx-retardo: calc(var(--nx-i, 0) * 70ms);
    }

    /* En pantallas pequeñas el recorrido es más corto y el
       escalonado más rápido: con una sola columna, una cascada
       larga deja de leerse como ritmo y se lee como espera. */
    @media (max-width: 768px) {
        .nx-anim [data-nx-reveal]:not([data-nx-reveal="tenue"]),
        .nx-anim [data-nx-stagger]:not([data-nx-stagger="tenue"]) > * {
            transform: translate3d(0, 16px, 0);
        }

        .nx-anim [data-nx-stagger] > * {
            --nx-retardo: calc(var(--nx-i, 0) * 45ms);
        }
    }
}