.cuy-widget {
  display: inline-block;
  position: relative;
  user-select: none;
  pointer-events: none;
}

/* Rebote suave del cuy */
.cuy-cuerpo {
  transform-origin: 110px 200px;
  animation: cuy-rebote 1s ease-in-out infinite;
  animation-play-state: paused;
}

@keyframes cuy-rebote {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-6px) rotate(-1.5deg); }
}

/* Boquita moviéndose como si cantara */
.cuy-boca {
  transform-origin: 110px 122px;
  animation: cuy-canta 0.5s ease-in-out infinite;
  animation-play-state: paused;
}

@keyframes cuy-canta {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(1.8); }
}

/* Notas musicales flotando — son <span> HTML (no <text> de svg) puestas
   ENCIMA del svg del cuy con position:absolute, para que su tamaño en pantalla
   sea real y no quede reescalado por el width/height pequeño del svg del cuy */
.nota {
  position: absolute;
  top: 50%;
  left: 60%;
  font-size: 34px;
  line-height: 1;
  font-weight: bold;
  font-family: Arial, sans-serif;
  color: #ffffff;
  -webkit-text-stroke: 1.5px #3a2415;
  paint-order: stroke fill;
  opacity: 0;
  pointer-events: none;
  backface-visibility: hidden;
  will-change: transform, opacity;
  animation: cuy-nota-flota 2.2s ease-in infinite;
  animation-play-state: paused;
}
.nota1 { animation-delay: 0s;   top: 55%; left: 62%; }
.nota2 { animation-delay: 0.7s; top: 35%; left: 68%; }
.nota3 { animation-delay: 1.4s; top: 62%; left: 55%; }

@keyframes cuy-nota-flota {
  0%   { opacity: 0; transform: translate(0, 0) translateZ(0) scale(0.5) rotate(-8deg); }
  15%  { opacity: 1; }
  75%  { opacity: 1; }
  100% { opacity: 0; transform: translate(24px, -46px) translateZ(0) scale(1.15) rotate(8deg); }
}

/* Cuando está "tocando" (melodía sonando), se activan las animaciones */
.cuy-widget.cuy-tocando .cuy-cuerpo,
.cuy-widget.cuy-tocando .cuy-boca,
.cuy-widget.cuy-tocando .nota {
  animation-play-state: running;
}

/* Modo oscuro: el fondo detrás de las notas cambia un poco para que se lean bien */
body.dark-mode .nota {
  color: #90cdf4;
}