/* La nube de pensamiento de El Peruanito.
 *
 * ---- Como aparece ----
 *
 * Como en el comic: primero la burbuja pequeña, luego la mediana y al final la
 * nube entera, que crece DESDE ellas. No es un adorno gratuito -- es lo que
 * cuenta que la idea sale del muñeco y no de la pantalla. Una nube que aparece
 * entera, de golpe, se lee como un cartel que alguien ha colgado ahi.
 *
 * El orden importa y va cronometrado: burbuja chica (0 ms), burbuja grande
 * (110 ms), la nube (220 ms) y el texto (360 ms). Medio segundo en total, que
 * es lo que se tarda en girar la cabeza hacia una esquina.
 *
 * ---- Que forma tiene ----
 *
 * Un ovalo liso con su linea alrededor, y dos circulos bajando hacia el muñeco.
 * Nada mas. Hubo una version con el borde lobulado --circulos asomando por los
 * cuatro lados, como una nube de dibujo-- y se descarto al verla: a este tamaño
 * los lobulos se leen como el festón de un mantel, y ademas se comen el sitio
 * del texto. Lo que dice que es un pensamiento son las dos burbujas, no el
 * contorno.
 *
 * ---- De que esta hecha ----
 *
 * Dos piezas, y cada una es un elemento de verdad y no un pseudo, precisamente
 * para poder animarlas por separado:
 *
 *   .nube-cuerpo     el ovalo
 *   .nube-burbujas   las dos que bajan hacia el muñeco
 *
 * y encima de las dos, el texto.
 */

.nube {
    position: relative;
    max-width: 12.5rem;

    /* Mas a los lados que arriba: el ovalo se estrecha en las puntas, y una
       linea que llegue hasta el borde se mete dentro de la curva. */
    padding: 0.7rem 1.15rem;

    font-family: var(--sans);
    font-size: var(--t-xs, 0.78rem);
    line-height: 1.35;
    color: var(--tinta, #241f1f);

    /* Alineada a la izquierda, dicho aqui y no en cada trozo.
     *
     * La bienvenida del asistente centra todo su texto, y eso se colaba dentro
     * de la nube: el dato salia alineado a la izquierda --tiene su regla-- y la
     * fuente, debajo, centrada. Se leia como dos cosas pegadas por error. */
    text-align: left;
}

.nube[hidden] { display: none; }

/* ---------- el cuerpo ---------- */

.nube-cuerpo {
    position: absolute;
    inset: 0;
    z-index: 0;
    box-sizing: border-box;

    background: var(--superficie, #fff);

    /* Un borde de verdad, no cuatro sombras.
     *
     * Las sombras hacian falta cuando el contorno era lobulado: `border` sigue
     * el rectangulo y habria dibujado una caja con pelotas pegadas. Con la
     * silueta lisa, el borde sale mas limpio y cuesta menos de pintar. */
    /* Linea fina, pero en tinta.
     *
     * El color hace el trabajo, no el grosor. Con var(--borde) --el gris de las
     * tarjetas-- la nube se perdia sobre el fondo claro del portal: se veia una
     * mancha blanca con letras. Con 2 px parecia dibujada con rotulador. Un
     * pixel en tinta la recorta y no pesa. */
    border: 1px solid var(--tinta, #241f1f);

    /* Muy redondeado: lo justo para leerse como un ovalo sin perder las
       esquinas donde vive el texto. Un ovalo de verdad --border-radius: 50%--
       recorta las lineas largas y obliga a un relleno enorme. */
    border-radius: 1.9rem;

    box-shadow: 0 12px 22px -10px rgba(0, 0, 0, 0.35);

    /* En reposo no esta: crece cuando le toca, desde la esquina de las
       burbujas, que es de donde tiene que parecer que sale. */
    transform: scale(0.1);
    transform-origin: 88% 100%;
    opacity: 0;
}

/* ---------- las dos burbujas ---------- */

/* Son las que dicen que es un pensamiento y no un bocadillo, y las que abren
   la escena. Van pegadas a la esquina que mira al muñeco, de mayor a menor,
   como salen en el comic. */
.nube-burbujas {
    position: absolute;

    /* DEBAJO del cuerpo, no dentro.
     *
     * Con `bottom` negativo la caja seguia empezando dentro de la nube y las
     * dos burbujas quedaban tapadas por el fondo: la escena se veia como si la
     * nube apareciera sola. `top: 100%` la arranca justo donde la nube acaba,
     * y de ahi bajan. */
    top: 100%;

    /* Un poco adentro, no en la punta.
     *
     * Pegada al borde derecho, la burbuja grande caia justo donde el ovalo ya
     * ha empezado a curvarse hacia arriba, y quedaba un hueco entre las dos:
     * el rastro se veia suelto en vez de salir de la nube. Aqui sale de la
     * parte recta del bajo, pero lo justo: cada milimetro que se mete hacia
     * dentro es un milimetro que el rastro se aleja de la cabeza.
     *
     * Y cada pantalla puede moverlo: en la esquina de la portada la nube esta
     * al LADO del muñeco y el rastro sale por su derecha; en el asistente esta
     * ENCIMA y sale por el centro. Es el mismo dibujo con el desague en otro
     * sitio, no dos componentes. */
    right: var(--nube-rastro, 0.55rem);
    z-index: 0;

    width: 1.4rem;
    height: 1.75rem;
    pointer-events: none;
}

.nube-burbujas::before,
.nube-burbujas::after {
    content: "";
    position: absolute;
    box-sizing: border-box;

    border-radius: 50%;
    background: var(--superficie, #fff);
    border: 1px solid var(--tinta, #241f1f);

    transform: scale(0);
    opacity: 0;
}

/* La grande, la que toca la nube. */
.nube-burbujas::before {
    right: 0.68rem;
    top: 0.16rem;
    width: 0.7rem;
    height: 0.7rem;
}

/* Y la chica, mas abajo y mas a la derecha: hacia el muñeco, que esta a ese
   lado. Es la primera que se ve, porque la idea viene de el. */
.nube-burbujas::after {
    right: 0.02rem;
    top: 1.02rem;
    width: 0.45rem;
    height: 0.45rem;
}

/* ---------- el texto ---------- */

.nube-texto {
    display: block;
    text-align: left;
}

/* Todo lo que se lee va por encima del cuerpo y llega al final.
 *
 * Va en el TEXTO y no en su envoltorio, que es un fallo que costo una pantalla
 * en blanco: en la esquina de la portada el texto viaja dentro de un enlace
 * --.nube-ir-- y en el asistente va suelto, porque ahi no lleva a ningun sitio.
 * Con la regla puesta solo en el envoltorio, en el asistente el texto se
 * quedaba en posicion estatica y lo tapaba el ovalo: la nube salia vacia. */
.nube-ir,
.nube-texto,
.nube-fuente {
    position: relative;
    z-index: 1;
}

.nube-texto,
.nube-fuente { opacity: 0; }

/* ---------- la escena ---------- */

@keyframes nube-burbuja {
    from { transform: scale(0);   opacity: 0; }
    60%  { transform: scale(1.2); opacity: 1; }
    to   { transform: scale(1);   opacity: 1; }
}

@keyframes nube-crece {
    from { transform: scale(0.1); opacity: 0; }
    70%  { transform: scale(1.04); opacity: 1; }
    to   { transform: scale(1);   opacity: 1; }
}

@keyframes nube-texto {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Primero la chica, luego la grande, despues la nube y al final lo que dice. */
.nube-visible .nube-burbujas::after  { animation: nube-burbuja 0.18s ease-out 0s    both; }
.nube-visible .nube-burbujas::before { animation: nube-burbuja 0.18s ease-out 0.11s both; }
.nube-visible .nube-cuerpo           { animation: nube-crece   0.26s ease-out 0.22s both; }
.nube-visible .nube-texto            { animation: nube-texto   0.2s  ease-out 0.36s both; }
.nube-visible .nube-fuente           { animation: nube-texto   0.2s  ease-out 0.36s both; }

/* Al irse no se deshace la escena al reves: se apaga entera.
 *
 * Deshacerla --guardar la nube, luego las burbujas-- son otros 500 ms en los
 * que ya no hay nada que leer, y la siguiente frase llega antes. Aparecer con
 * ceremonia y marcharse sin ella es lo que hacen los bocadillos del comic
 * cuando pasas de viñeta. */
.nube-yendose,
.nube-yendose .nube-cuerpo,
.nube-yendose .nube-burbujas,
.nube-yendose .nube-texto,
.nube-yendose .nube-fuente {
    animation: none !important;
    opacity: 0;
    transition: opacity 0.22s ease;
}

/* ---------- lo que dice, y de donde sale ---------- */

/* De donde sale el dato, en voz baja.
 *
 * Se lee si la buscas y no compite con el dato, que es lo que se ha venido a
 * contar. Pero esta siempre que haya un dato: es la diferencia entre una
 * curiosidad y una afirmacion de un portal del Estado.
 *
 * Y ahora se puede pulsar. Estuvo sin poder pulsarse todo este tiempo por una
 * razon concreta y no por olvido: la nube vivia DENTRO del enlace al asistente,
 * y el HTML no permite un enlace dentro de otro --el navegador lo saca fuera y
 * deshace la caja--. La direccion de cada fuente ya estaba guardada; lo que
 * faltaba era sacar la nube de ese enlace. */
.nube-fuente {
    display: block;
    margin-top: 0.35rem;

    font-size: 0.68rem;
    line-height: 1.25;
    color: var(--tinta-suave, #6b6360);

    /* Subrayado de texto y no borde inferior.
     *
     * Con `border-bottom` la raya cruzaba la nube de lado a lado --el elemento
     * es de bloque-- y parecia un separador, no un enlace. El subrayado sigue a
     * las palabras, que es lo que dice "esto se pulsa". */
    text-decoration: none;
}

a.nube-fuente {
    text-decoration: underline dotted;
    text-underline-offset: 2px;
    cursor: pointer;
}

a.nube-fuente:hover,
a.nube-fuente:focus-visible {
    color: var(--tinta, #241f1f);
    text-decoration-style: solid;
}

.nube-fuente[hidden] { display: none; }

/* Y el enlace del cuerpo, que es lo que lleva al asistente.
 *
 * Hermano de la fuente, no su padre: dos enlaces uno al lado del otro, que es
 * lo unico que el HTML permite y lo que hace que los dos funcionen. */
.nube-ir {
    display: block;
    color: inherit;
    text-decoration: none;
}

.nube-ir:focus-visible {
    outline: 2px solid var(--tinta, #241f1f);
    outline-offset: 3px;
    border-radius: 0.4rem;
}

/* ---------- quien no quiere movimiento ----------
 *
 * Aqui no hay excepcion como con el muñeco: la nube aparece puesta, entera y
 * sin escena. Lo que cuenta se lee igual. */

@media (prefers-reduced-motion: reduce) {
    .nube-visible .nube-burbujas::after,
    .nube-visible .nube-burbujas::before,
    .nube-visible .nube-cuerpo,
    .nube-visible .nube-texto,
    .nube-visible .nube-fuente {
        animation: none;
        transform: none;
        opacity: 1;
    }

    .nube-yendose,
    .nube-yendose .nube-cuerpo,
    .nube-yendose .nube-burbujas,
    .nube-yendose .nube-texto,
    .nube-yendose .nube-fuente {
        transition: none;
    }
}