/* El ente — ahora la imagen real de Luisa (cuerpo-base.webp),
   recoloreada en vivo al color elegido por el usuario.
   Técnica: una capa "tinte" del color plano, mezclada con
   mix-blend-mode: color sobre la imagen base (toma el tono/saturación
   del tinte, conserva la luminosidad/sombreado de la imagen original),
   recortada a la silueta de la figura vía mask-image (usa el canal
   alfa del propio PNG como máscara).

   .entity-figure necesita una altura definida (heredada de quien lo
   use) más aspect-ratio para calcular el ancho — no estirar nunca. */

.entity-figure{
  position: relative;
  height: 100%;
  width: auto;
  aspect-ratio: 584 / 812;
  isolation: isolate; /* contiene la mezcla de color a esta figura, no al fondo detrás */
  animation: entity-breathe 4.6s ease-in-out infinite;
  transform-origin: 50% 100%;
}

.entity-figure__base,
.entity-figure__tint{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
}

.entity-figure__base{
  display: block;
  object-fit: contain;
}

.entity-figure__tint{
  mix-blend-mode: color;
  transition: background-color 0.6s ease;
  -webkit-mask-image: url('../../assets/images/entity/cuerpo-base.webp');
  mask-image: url('../../assets/images/entity/cuerpo-base.webp');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

@keyframes entity-breathe{
  0%, 100%{ transform: scale(1); }
  50%{ transform: scale(1.025); }
}

@media (prefers-reduced-motion: reduce){
  .entity-figure{ animation: none; }
}