/**
 * Aparicion al hacer scroll.
 *
 *   <section data-aparece="izquierda">...</section>
 *   <div data-aparece-grupo="abajo">  (los hijos entran uno tras otro)
 *
 * El estado inicial (invisible y desplazado) solo se aplica cuando el JS esta
 * vivo: aparecer.js le pone la clase .js-aparece al <html> antes de que se pinte
 * nada. Si el script no carga o falla, todo se ve normal desde el primer momento
 * — nunca queda contenido invisible.
 *
 * Solo se animan opacity y transform, que el navegador resuelve en la GPU sin
 * recalcular el layout.
 */

/*
 * Las secciones que entran desde un lado estan desplazadas 48px mientras esperan
 * su turno, y una seccion de ancho completo desplazada ensancha la pagina: aparece
 * una barra de scroll horizontal que no deberia estar. Se recorta ese sobrante.
 *
 * Va en el <html> y no en el <body>: con el html en overflow visible, el navegador
 * propaga el valor del body al viewport y el recorte no surte efecto (el scroll
 * horizontal seguia ahi). Y es `clip` y no `hidden` porque hidden convierte al
 * elemento en contenedor de scroll y rompe position:sticky de lo que tenga dentro.
 *
 * Solo con el JS vivo: sin animaciones la pagina se comporta como siempre.
 */
html.js-aparece { overflow-x: clip; }

@supports not (overflow-x: clip) {
    html.js-aparece { overflow-x: hidden; }
}

/*
 * Y el recorte de verdad va en la seccion que envuelve a cada bloque que entra de
 * lado: recortar en el <html> no siempre basta, pero un contenedor normal si
 * recorta a sus hijos sin discusion. aparecer.js le pone esta clase al padre de
 * cada elemento con direccion lateral.
 */
.aparece-recorta { overflow-x: clip; }

@supports not (overflow-x: clip) {
    .aparece-recorta { overflow-x: hidden; }
}

.js-aparece [data-aparece],
.js-aparece [data-aparece-grupo] > * {
    opacity: 0;
    transition:
        opacity   .65s cubic-bezier(.22, .61, .36, 1),
        transform .65s cubic-bezier(.22, .61, .36, 1);
    will-change: opacity, transform;
}

/* Direcciones */
.js-aparece [data-aparece="abajo"],
.js-aparece [data-aparece-grupo="abajo"] > *      { transform: translate3d(0, 34px, 0); }
/*
 * El desplazamiento lateral va en min(48px, 4vw) y no en 48px fijos: el contenedor
 * de las secciones deja un margen del 5% a cada lado, asi que en una ventana
 * angosta 48px no caben, el bloque sobresale y aparece scroll horizontal.
 */
.js-aparece [data-aparece="izquierda"],
.js-aparece [data-aparece-grupo="izquierda"] > *  { transform: translate3d(calc(-1 * min(48px, 4vw)), 0, 0); }
.js-aparece [data-aparece="derecha"],
.js-aparece [data-aparece-grupo="derecha"] > *    { transform: translate3d(min(48px, 4vw), 0, 0); }
.js-aparece [data-aparece="zoom"],
.js-aparece [data-aparece-grupo="zoom"] > *       { transform: scale(.94); }

/* Estado final: una sola clase para todas las direcciones */
.js-aparece [data-aparece].aparecido,
.js-aparece [data-aparece-grupo] > .aparecido {
    opacity: 1;
    transform: none;
}

/* Terminada la animacion se suelta la capa de composicion */
.js-aparece [data-aparece].aparecido,
.js-aparece [data-aparece-grupo] > .aparecido {
    will-change: auto;
}

/*
 * Quien pidio menos animacion en su sistema no ve ninguna: el contenido aparece
 * directamente en su sitio.
 */
@media (prefers-reduced-motion: reduce) {
    .js-aparece [data-aparece],
    .js-aparece [data-aparece-grupo] > * {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}