/* ============================================================
   VERA ORB — piel y lenguaje de animación de la mascota
   Escrito para VERA — implementación propia del comportamiento de la
   mascota; no contiene código de terceros.

   CSS puro, dirigido por atributos en la raíz .vera-orb:
     [data-state]  ánimo actual (lo escribe js/vera-orb.js)
     [data-blink]  parpadeo puntual (lo escribe js/vera-orb.js)

   Regla de convivencia con el JS: el script escribe `transform` inline en
   .vo-face y .vo-body (la mirada). Por eso aquí NUNCA se anima transform
   sobre esos dos grupos; las animaciones van sobre sus hijos (.vo-squash,
   .vo-eye, .vo-mouth...) o sobre propiedades que el JS no toca.
   ============================================================ */

.vera-orb {
  position: relative;
  display: inline-block;
  line-height: 0;
  -webkit-tap-highlight-color: transparent;
}

.vera-orb svg {
  display: block;
  overflow: visible;
}

/* ============================================================
   REPOSO (idle) — el orbe respira
   ============================================================ */

/* La esfera se infla y desinfla despacio, como un pecho al respirar. */
.vo-squash {
  transform-box: fill-box;
  transform-origin: center;
  animation: vera-respiracion 4.2s ease-in-out infinite;
}

@keyframes vera-respiracion {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.028); }
}

/* El resplandor ambiental late al mismo ritmo que la respiración. */
.vo-glow {
  transform-box: fill-box;
  transform-origin: center;
  animation: vera-resplandor 4.2s ease-in-out infinite;
}

@keyframes vera-resplandor {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.05); }
}

/* El núcleo interno sube y baja de intensidad. */
.vo-core {
  animation: vera-nucleo 4.2s ease-in-out infinite;
}

@keyframes vera-nucleo {
  0%, 100% { opacity: 0.75; }
  50%      { opacity: 1; }
}

/* La sombra en el suelo acompaña: se ensancha cuando el cuerpo "exhala". */
.vo-shadow {
  transform-box: fill-box;
  transform-origin: center;
  animation: vera-sombra 4.2s ease-in-out infinite;
}

@keyframes vera-sombra {
  0%, 100% { transform: scaleX(1);    opacity: 0.22; }
  50%      { transform: scaleX(1.08); opacity: 0.3; }
}

/* ============================================================
   OJOS — parpadeo y ojos felices
   ============================================================ */

/* Transición corta: el parpadeo debe sentirse instantáneo, no animado. */
.vo-eyes-open {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.09s ease-in-out, opacity 0.18s ease;
}

/* El JS marca [data-blink] ~130 ms: los ojos se aplastan a una línea. */
.vera-orb[data-blink] .vo-eyes-open {
  transform: scaleY(0.08);
}

/* Ojos ^ ^: ocultos por defecto, aparecen con un rebote suave en happy. */
.vo-eyes-happy {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.6);
  transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.vera-orb[data-state='happy'] .vo-eyes-open {
  opacity: 0;
}

.vera-orb[data-state='happy'] .vo-eyes-happy {
  opacity: 1;
  transform: scale(1);
}

/* ============================================================
   ANILLO ORBITAL, CORONA Y DESTELLOS
   ============================================================ */

/* Las partículas recorren la elipse del anillo con offset-path; los
   desfases negativos reparten las tres lunas a lo largo de la órbita. */
.vo-moon {
  offset-path: path('M 26 108 a 74 26 0 1 0 148 0 a 74 26 0 1 0 -148 0');
  offset-rotate: 0deg;
  animation: vera-orbita 10s linear infinite;
}

.vo-moon-2 { animation-delay: -3.33s; }
.vo-moon-3 { animation-delay: -6.66s; }

@keyframes vera-orbita {
  to { offset-distance: 100%; }
}

/* La corona flota con un cabeceo leve, como llevada por una brisa. */
.vo-crown {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: vera-corona-flotante 3.6s ease-in-out infinite;
}

@keyframes vera-corona-flotante {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-3.5px) rotate(2.5deg); }
}

/* Destellos que titilan desacompasados gracias a los desfases. */
.vo-star {
  transform-box: fill-box;
  transform-origin: center;
  animation: vera-destello 3.4s ease-in-out infinite;
}

.vo-star-2 { animation-delay: -1.1s; }
.vo-star-3 { animation-delay: -2.2s; }

@keyframes vera-destello {
  0%, 100% { opacity: 0.15; transform: scale(0.7); }
  50%      { opacity: 1;    transform: scale(1.15); }
}

/* ============================================================
   ÁNIMO: listening — inclinada, atenta a ti
   ============================================================ */

/* Respiración más contenida y ojos un poco más abiertos: está escuchando. */
.vera-orb[data-state='listening'] .vo-squash {
  animation: vera-escucha 2.6s ease-in-out infinite;
}

@keyframes vera-escucha {
  0%, 100% { transform: scale(1.045); }
  50%      { transform: scale(1.065); }
}

.vera-orb[data-state='listening'] .vo-eyes-open {
  transform: scale(1.14);
}

/* El parpadeo debe combinar el agrandado de escucha con el cierre. */
.vera-orb[data-state='listening'][data-blink] .vo-eyes-open {
  transform: scale(1.14) scaleY(0.08);
}

.vera-orb[data-state='listening'] .vo-glow {
  animation-duration: 2.6s;
}

/* El anillo se vuelve más lento: atención plena, sin prisa. */
.vera-orb[data-state='listening'] .vo-moon {
  animation-duration: 14s;
}

/* ============================================================
   ÁNIMO: thinking — ojos arriba, anillo acelerado
   ============================================================ */

.vera-orb[data-state='thinking'] .vo-eye {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.25s ease;
  transform: translateY(-3.5px);
}

/* El anillo gira rápido: la cabeza está trabajando. */
.vera-orb[data-state='thinking'] .vo-moon {
  animation-duration: 2.6s;
}

/* Respiración más rápida y superficial. */
.vera-orb[data-state='thinking'] .vo-squash {
  animation: vera-respiracion 2.2s ease-in-out infinite;
}

.vera-orb[data-state='thinking'] .vo-crown {
  animation: vera-corona-flotante 1.8s ease-in-out infinite;
}

/* ============================================================
   ÁNIMO: speaking — squash & stretch y boca que habla
   ============================================================ */

.vera-orb[data-state='speaking'] .vo-squash {
  animation: vera-silaba 0.9s ease-in-out infinite;
}

@keyframes vera-silaba {
  0%, 100% { transform: scale(1, 1); }
  30%      { transform: scale(1.035, 0.97); }
  60%      { transform: scale(0.985, 1.02); }
}

.vera-orb[data-state='speaking'] .vo-mouth {
  transform-box: fill-box;
  transform-origin: center;
  animation: vera-boca-hablante 0.42s ease-in-out infinite;
  opacity: 0.85;
}

@keyframes vera-boca-hablante {
  0%, 100% { transform: scale(1, 0.5); }
  50%      { transform: scale(1.25, 1.9); }
}

.vera-orb[data-state='speaking'] .vo-glow {
  animation: vera-resplandor 0.9s ease-in-out infinite;
}

/* ============================================================
   ÁNIMO: happy — saltito, corona alborotada, fiesta de destellos
   ============================================================ */

.vera-orb[data-state='happy'] .vo-squash {
  animation: vera-brinco 1.15s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}

@keyframes vera-brinco {
  0%, 100% { transform: translateY(0) scale(1); }
  35%      { transform: translateY(-7px) scale(1.03); }
  60%      { transform: translateY(0) scale(0.98, 1.02); }
}

.vera-orb[data-state='happy'] .vo-crown {
  animation: vera-corona-fiesta 1.15s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}

@keyframes vera-corona-fiesta {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  35%      { transform: translateY(-11px) rotate(-7deg); }
  60%      { transform: translateY(-2px) rotate(4deg); }
}

.vera-orb[data-state='happy'] .vo-star {
  animation: vera-destello 0.9s ease-in-out infinite;
}

/* Sonrisa abierta: la boca crece y se redondea. */
.vera-orb[data-state='happy'] .vo-mouth {
  rx: 6px;
  opacity: 0.9;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(1.5, 1.6);
  transition: transform 0.2s ease;
}

.vera-orb[data-state='happy'] .vo-moon {
  animation-duration: 4s;
}

/* ============================================================
   ACCESIBILIDAD — movimiento reducido: todo quieto
   (el JS además desconecta mirada y parpadeo)
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .vera-orb *,
  .vera-orb *::before,
  .vera-orb *::after {
    animation: none !important;
    transition: none !important;
  }
}