/* animaciones.css - Estilos y efectos neón interactivos */

#dodecaedro-svg {
  width: 100%;
  height: 100%;
  display: block;
  cursor: pointer;
  filter: drop-shadow(0px 15px 25px rgba(0, 0, 0, 0.6));
  transition: transform 0.4s ease;
}
#dodecaedro-svg:hover {
  transform: scale(1.03);
}

/* Animación de leve flotación 3D */
#dodecaedro-container {
  transform-origin: center;
  animation: floatDodecahedron 5s ease-in-out infinite;
}
@keyframes floatDodecahedron {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-12px) rotate(1deg);
  }
}

/* Respiración/Pulsación del Neón Frontal */
.pulse-neon {
  animation: pulseGlow 2s ease-in-out infinite alternate;
}
@keyframes pulseGlow {
  from {
    stroke-opacity: 0.7;
    stroke-width: 10px;
  }
  to {
    stroke-opacity: 1;
    stroke-width: 14px;
  }
}

/* Estado Activo cuando la IA está Procesando/Escuchando
   (posición actualizada a la posición actual del mic: 452.4, 475.3) */
.ia-listening #icon-mic {
  animation: micPulse 1s ease-in-out infinite alternate;
}
@keyframes micPulse {
  from {
    transform: translate(452.4px, 475.3px) scale(0.95);
  }
  to {
    transform: translate(452.4px, 475.3px) scale(1.08);
  }
}

/* Sistema de "caras"/estados del dodecaedro: solo se ve la que tiene .active */
#state-mic, #state-brain, #state-check, #state-error, #state-voz, #state-search {
  display: none;
}
#state-mic.active, #state-brain.active, #state-check.active,
#state-error.active, #state-voz.active, #state-search.active {
  display: block;
}

/* Animación de "giro" al cambiar de cara: se achica en X, JS cambia
   la cara activa en el punto más angosto, y vuelve a expandirse */
#dodecaedro-flip {
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  transform-box: fill-box;
  transform-origin: center;
}
#dodecaedro-flip.flip-out {
  transform: scaleX(0.02);
}

/* Fondo cósmico para el botón del dodecaedro: cielo profundo con
   estrellas chicas y un par de manchas suaves tipo galaxias lejanas */
.cosmic-bg {
  background-color: #05070f;
  background-image:
    radial-gradient(2px 2px at 18px 24px, #ffffff, transparent),
    radial-gradient(1.5px 1.5px at 52px 66px, #ffffff, transparent),
    radial-gradient(1px 1px at 84px 34px, #c7d2fe, transparent),
    radial-gradient(1.5px 1.5px at 120px 78px, #ffffff, transparent),
    radial-gradient(2px 2px at 150px 16px, #ffffff, transparent),
    radial-gradient(1px 1px at 36px 104px, #c7d2fe, transparent),
    radial-gradient(1.5px 1.5px at 104px 124px, #ffffff, transparent),
    radial-gradient(1px 1px at 168px 96px, #ffffff, transparent),
    radial-gradient(circle 10px at 140px 100px, rgba(147, 112, 219, 0.45), transparent 70%),
    radial-gradient(circle 8px at 26px 132px, rgba(96, 165, 250, 0.4), transparent 70%);
  background-repeat: repeat;
  background-size: 180px 180px;
  transition: filter 0.3s ease;
}
.cosmic-bg:hover {
  filter: brightness(1.25);
}