/* ============================================
   ORBE VIVO (idle + reactivo con --amp)
   Reemplaza tu bloque .animationListen + blobs
   ============================================ */

.animationListen{
  width: 240px;
  height: 240px;
  margin: 18px auto 10px auto;
  position: relative;
  display: grid;
  place-items: center;
  pointer-events: none;

  --amp: 0;              /* lo actualiza el JS */
  --idle: 0.12;          /* “vida” en reposo (0..1) */
  --mix: calc(var(--idle) + var(--amp) * 0.88);

  /* leve flotación del conjunto */
  animation: containerFloat 3.8s ease-in-out infinite;
}

/* Flotación del contenedor (vida idle) */
@keyframes containerFloat{
  0%,100% { translate: 0 0; }
  50%     { translate: 0 -7px; }
}

/* Halo suave azul claro */
.animationListen::before{
  content: "";
  position: absolute;
  width: 210px;
  height: 210px;
  border-radius: 999px;
  background: rgba(0,184,211,0.10); /* #00b8d3 */
  filter: blur(18px);

  /* Reacciona incluso idle por --mix */
  opacity: calc(0.34 + var(--mix) * 0.46);
  transform: scale(calc(0.96 + var(--mix) * 0.26));
  transition: opacity 90ms linear, transform 90ms linear;

  z-index: 0;
}

/* Contorno del halo (borde definido + shimmer sutil) */
.animationListen::after{
  content: "";
  position: absolute;
  width: 210px;
  height: 210px;
  border-radius: 999px;
  border: 1px solid rgba(0,184,211,0.28);

  /* late suave siempre */
  opacity: calc(0.32 + var(--mix) * 0.36);
  transform: scale(calc(1.00 + var(--mix) * 0.06));

  /* “vida” idle adicional */
  animation: haloBreathe 4.6s ease-in-out infinite, haloShimmer 7.2s ease-in-out infinite;
  z-index: 0;
}

@keyframes haloBreathe{
  0%,100% { scale: 1.00; opacity: 0.38; }
  50%     { scale: 1.04; opacity: 0.65; }
}

/* Shimmer: cambia muy ligeramente el borde (sin 3D) */
@keyframes haloShimmer{
  0%,100% { filter: saturate(1.05); }
  50%     { filter: saturate(1.25); }
}

/* ===== Blobs (rellenos) ===== */
.animationListen .blob{
  position: absolute;
  border-radius: 42% 58% 63% 37% / 48% 44% 56% 52%;
  will-change: border-radius, translate, rotate, opacity;
  z-index: 1;

  /* Escala reactiva (idle + amp) sin pisar translate/rotate */
  scale: calc(1.00 + var(--mix) * 0.28);
  transition: scale 90ms linear, opacity 220ms ease, background 220ms ease;

  /* Vida siempre: morph + drift + microWobble */
  animation-name: blobMorph, blobDrift, blobWobble;
  animation-timing-function: ease-in-out, ease-in-out, ease-in-out;
  animation-iteration-count: infinite, infinite, infinite;
}

/* Orbital drift: movimiento real (vida idle) */
@keyframes blobDrift{
  0%   { translate: 0px 0px; rotate: 0deg; }
  25%  { translate: 7px -5px; rotate: 2deg; }
  50%  { translate: -6px 6px; rotate: -2deg; }
  75%  { translate: 5px 7px; rotate: 1deg; }
  100% { translate: 0px 0px; rotate: 0deg; }
}

/* Micro wobble sutil (que se sienta “orgánico”) */
@keyframes blobWobble{
  0%,100% { filter: saturate(1.00); }
  50%     { filter: saturate(1.12); }
}

/* Morph amorfo */
@keyframes blobMorph{
  0%   { border-radius: 42% 58% 63% 37% / 48% 44% 56% 52%; }
  25%  { border-radius: 55% 45% 46% 54% / 55% 60% 40% 45%; }
  50%  { border-radius: 36% 64% 52% 48% / 42% 38% 62% 58%; }
  75%  { border-radius: 62% 38% 58% 42% / 50% 42% 58% 50%; }
  100% { border-radius: 42% 58% 63% 37% / 48% 44% 56% 52%; }
}

/* Paleta marca en capas (2D) */
.b1{
  width: 190px; height: 190px;
  background: rgba(0,56,101,0.18);
  opacity: 0.95;

  animation-duration: 10.4s, 7.8s, 6.2s;
  animation-delay:    -4.7s, -1.2s, -2.0s;
}
.b2{
  width: 168px; height: 168px;
  background: rgba(0,184,211,0.18);
  opacity: 0.85;

  animation-duration: 8.3s, 6.3s, 5.4s;
  animation-delay:    -2.2s, -2.7s, -3.4s;
}
.b3{
  width: 146px; height: 146px;
  background: rgba(0,56,101,0.26);
  opacity: 0.85;

  animation-duration: 6.7s, 5.1s, 4.6s;
  animation-delay:    -3.9s, -0.6s, -1.7s;
}
.b4{
  width: 120px; height: 120px;
  background: rgba(0,184,211,0.26);
  opacity: 0.90;

  animation-duration: 5.4s, 4.4s, 4.0s;
  animation-delay:    -1.6s, -3.1s, -2.6s;
}

/* Centro: núcleo con vida propia */
.b5{
  width: 88px; height: 88px;
  background: rgba(0,56,101,0.86);
  opacity: 0.95;
  z-index: 2;

  /* núcleo más reactivo */
  scale: calc(1.00 + var(--mix) * 0.42);
  box-shadow:
          0 0 0 10px rgba(0,56,101,0.10),
          0 0 30px rgba(0,56,101,0.24);

  animation-duration: 4.6s, 3.7s, 3.3s;
  animation-delay:    -2.8s, -1.9s, -1.1s;
}

/* Estado grabando: todo vira a turquesa y se vuelve más energético */
.animationListen.is-recording .blob{
  background: rgba(0,184,211,0.26);
  /* más reactivo al amp */
  scale: calc(1.02 + var(--mix) * 0.36);
}
.animationListen.is-recording .b5{
  background: rgba(0,184,211,0.92);
  box-shadow:
          0 0 0 10px rgba(0,184,211,0.14),
          0 0 34px rgba(0,184,211,0.28);
}
.animationListen.is-recording::after{
  border-color: rgba(0,184,211,0.38);
}

/* Procesando: ámbar (sin giro), “pensando” */
.animationListen.is-processing .blob{
  background: rgba(255,184,29,0.22);
  opacity: 0.92;
}
.animationListen.is-processing .b5{
  background: rgba(255,184,29,0.90);
  box-shadow:
          0 0 0 10px rgba(255,184,29,0.13),
          0 0 34px rgba(255,184,29,0.26);
}
.animationListen.is-processing::after{
  border-color: rgba(255,184,29,0.32);
}

/* Error */
.animationListen.is-error .blob{
  background: rgba(255,77,77,0.24);
}
.animationListen.is-error .b5{
  background: rgba(255,77,77,0.90);
  box-shadow:
          0 0 0 10px rgba(255,77,77,0.12),
          0 0 34px rgba(255,77,77,0.24);
}
.animationListen.is-error::after{
  border-color: rgba(255,77,77,0.32);
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .animationListen,
  .animationListen .blob,
  .animationListen::after{
    animation: none !important;
  }
  .animationListen::before{
    transition: none !important;
  }
}