﻿/* ═══ La perrovaquita — REVENTÓN DE LA BURBUJA ═════════════════════════════
   Tocarla dormida revienta su burbujita y la despierta. La clase transitoria la
   pone y la quita interacciones.js; al terminar, el JS cambia la pose y esta hoja
   deja de aplicar sola.

   SE CARGA DESPUÉS de poses.css —donde vive la burbuja y su respiración— porque
   esta animación debe ganarle a aquella con la misma especificidad, y ANTES de
   interfaz.css, para que el bloque de menos movimiento también apague el estallido.

   La duración (.42s) está acompasada con MS_REVENTON de interacciones.js: si
   cambia una, cambia la otra. ═══════════════════════════════════════════════ */

/* Se hincha de golpe más allá de su tamaño y desaparece: los dos tiempos de un
   globo al estallar. forwards la deja invisible hasta que el JS retira la clase y
   cambia la pose, para que no reaparezca un fotograma entera. */
.edu-mascota--burbuja-pop .edu-mascota__burbuja {
    animation: edu-pv-burbuja-pop .42s ease-out 1 forwards;
}

@keyframes edu-pv-burbuja-pop {
    0% {
        opacity: .95;
        transform: scale(1);
    }

    55% {
        opacity: 1;
        transform: scale(1.3);
    }

    100% {
        opacity: 0;
        transform: scale(1.5);
    }
}
