/*
 * Mascota de Cúmulo (estilo «Mínimo»): la nube de la marca con dos ojos ovalados, sin boca.
 * Un solo archivo para toda la web: lo cargan las páginas de pagos y también el chat
 * (client/src/cumulo/Mascota.tsx; .dockerignore lo deja entrar al construir el chat).
 *
 * Dibujo (viewBox="0 -2 120 70"):
 *   <svg class="m" viewBox="0 -2 120 70" aria-hidden="true"><g class="todo">
 *     <path class="cuerpo" d="M28 64h66a20 20 0 0 0 3-39.8A28 28 0 0 0 44.5 17 22 22 0 0 0 8 40a12 12 0 0 0 20 24z"/>
 *     <g class="mirada"><g class="ojos"><ellipse cx="54" cy="42" rx="3.7" ry="5.6"/><ellipse cx="72" cy="42" rx="3.7" ry="5.6"/></g>
 *       <path class="feliz" d="M50.2 44q3.8-5 7.6 0M68.2 44q3.8-5 7.6 0"/></g>              (solo si se pone contenta)
 *     <g class="puntos"><circle cx="57.5" cy="54" r="1.8"/><circle cx="63" cy="54" r="1.8"/><circle cx="68.5" cy="54" r="1.8"/></g>  (solo si piensa)
 *   </g></svg>
 *
 * Estados (clase en el propio svg): sin clase, en reposo, parpadea de vez en cuando;
 * «m-pensando»: mira arriba, se hincha un poco y salen tres puntitos; «m-contenta»: ojos ^ ^ y un
 * saltito. Con «reducir movimiento» se queda quieta (los puntitos, fijos). Solo se anima
 * transform y opacity. Colores: azul de la marca y ojos blancos; de noche, azul claro y ojos del
 * color del cielo nocturno (la página puede cambiarlos con --m-c y --m-o).
 */
.m { --m-c: #3f6fe8; --m-o: #fff; overflow: visible; }
@media (prefers-color-scheme: dark) { html:not(.light) .m { --m-c: #7fa2ff; --m-o: #0c1428; } }
html.dark .m { --m-c: #7fa2ff; --m-o: #0c1428; }
.m .cuerpo { fill: var(--m-c); }
.m .ojos, .m .puntos { fill: var(--m-o); }
.m .feliz { fill: none; stroke: var(--m-o); stroke-width: 2.8; stroke-linecap: round; opacity: 0; transition: opacity .2s; }
.m .todo { transform-box: fill-box; transform-origin: 50% 100%; }
.m .ojos { transform-box: fill-box; transform-origin: 50% 50%; animation: m-parpadeo 7s infinite; transition: opacity .2s; }
.m .mirada { transition: transform .5s cubic-bezier(.3, .7, .3, 1); }
.m .puntos circle { opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; transition: opacity .2s; }
@keyframes m-parpadeo {
  0%, 12%, 16%, 74%, 77%, 80%, 83%, 100% { transform: scaleY(1); }
  14%, 75.5%, 81.5% { transform: scaleY(.08); }
}

.m.m-pensando .mirada { transform: translate(2.5px, -3.5px); }
.m.m-pensando .todo { animation: m-respira 2.6s ease-in-out infinite; }
.m.m-pensando .puntos circle { opacity: 1; animation: m-punto 1.2s ease-in-out infinite; }
.m.m-pensando .puntos circle:nth-child(2) { animation-delay: .16s; }
.m.m-pensando .puntos circle:nth-child(3) { animation-delay: .32s; }
@keyframes m-respira { 50% { transform: scale(1.03); } }
@keyframes m-punto {
  0%, 70%, 100% { opacity: .3; transform: translateY(0); }
  35% { opacity: 1; transform: translateY(-2px); }
}

.m.m-contenta .ojos { opacity: 0; }
.m.m-contenta .feliz { opacity: 1; }
.m.m-contenta .todo { animation: m-salto .8s cubic-bezier(.3, .7, .3, 1); }
@keyframes m-salto {
  35% { transform: translateY(-5px) scale(1.02); }
  65% { transform: translateY(0) scale(1.01, .98); }
}

@media (prefers-reduced-motion: reduce) {
  .m * { animation: none !important; transition: none !important; }
  .m.m-pensando .puntos circle { opacity: .8; }
}