/* Vivi (2026-10-11): mascota-copiloto junto al chat.
 * Levita de arriba abajo y parpadea cada 4 s (dos imágenes apiladas: la de
 * ojos cerrados aparece ~140 ms al final de cada ciclo).
 * Poses: .vivi--normal (por defecto, volando) y .vivi--mano (presenta resultados).
 * Vuelo: alas normal → medias → juntas → medias → normal → adelantadas, con
 * fundido entre fotogramas; el cuerpo va encima y opaco para que no se
 * transparente durante el fundido. Marcado en views/include/vivi_mascota.php.
 * Plano: la sombra es una elipse sólida, sin desenfoque. */

.vivi {
  --vivi-w: 200px;
  position: relative;
  width: var(--vivi-w);
  aspect-ratio: 1222 / 1056;
  padding-bottom: calc(var(--vivi-w) * .16);
  box-sizing: content-box;
  user-select: none;
  -webkit-user-select: none;
}
.vivi__cuerpo {
  position: absolute;
  inset: 0 0 auto 0;
  aspect-ratio: 1222 / 1056;
  animation: vivi-levita 3.2s ease-in-out infinite;
  will-change: transform;
}
.vivi__cuerpo img,
.vivi__vuelo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
/* Solo se ve la pose activa (el contenedor de vuelo ya lleva sus capas dentro). */
.vivi__pose { display: none; }
.vivi--normal .vivi__pose--normal,
.vivi--mano .vivi__pose--mano { display: block; }

.vivi__parpadeo {
  opacity: 0;
  animation: vivi-parpadea 4s linear infinite;
}

.vivi__sombra {
  position: absolute;
  left: 30%;
  right: 30%;
  bottom: 0;
  height: calc(var(--vivi-w) * .06);
  border-radius: 50%;
  background: #1A3151;
  opacity: .10;
  animation: vivi-sombra 3.2s ease-in-out infinite;
}

.vivi__ala { opacity: 0; animation: 1.4s linear infinite; }
.vivi__ala--normal      { opacity: 1; animation-name: vivi-ala-normal; }
.vivi__ala--medias      { animation-name: vivi-ala-medias; }
.vivi__ala--juntas      { animation-name: vivi-ala-juntas; }
.vivi__ala--adelantadas { animation-name: vivi-ala-adelantadas; }

/* Seis tramos de 1/6: N M J M N A (y vuelta a N). Cada pose se MANTIENE
 * su tramo y solo hay un fundido corto (4 % ≈ 55 ms) en cada cambio: si el
 * fundido ocupa todo el tramo, siempre hay dos alas a medias y el aleteo
 * parece un parpadeo en vez de movimiento (Juan, 2026-10-11). */
@keyframes vivi-ala-normal {
  0%, 14.667% { opacity: 1; }
  18.667%, 64.667% { opacity: 0; }
  68.667%, 81.333% { opacity: 1; }
  85.333%, 96% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes vivi-ala-medias {
  0%, 14.667% { opacity: 0; }
  18.667%, 31.333% { opacity: 1; }
  35.333%, 48% { opacity: 0; }
  52%, 64.667% { opacity: 1; }
  68.667%, 100% { opacity: 0; }
}
@keyframes vivi-ala-juntas {
  0%, 31.333% { opacity: 0; }
  35.333%, 48% { opacity: 1; }
  52%, 100% { opacity: 0; }
}
@keyframes vivi-ala-adelantadas {
  0%, 81.333% { opacity: 0; }
  85.333%, 96% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes vivi-levita {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(calc(var(--vivi-w) * -.07)); }
}
@keyframes vivi-sombra {
  0%, 100% { transform: scaleX(1);   opacity: .12; }
  50%      { transform: scaleX(.78); opacity: .07; }
}
@keyframes vivi-parpadea {
  0%, 96%      { opacity: 0; }
  96.1%, 99.4% { opacity: 1; }
  99.5%, 100%  { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .vivi__cuerpo, .vivi__sombra, .vivi__ala { animation: none; }
  .vivi__ala { opacity: 0; }
  .vivi__ala--normal { opacity: 1; }
}

/* 2026-10-11 (Juan: «usa un fotograma ahora de momento»): alas quietas en el
 * fotograma normal; se mantienen la levitación y el parpadeo. Para volver al
 * aleteo, borrar este bloque. */
.vivi__ala { animation: none !important; opacity: 0 !important; }
.vivi__ala--normal { opacity: 1 !important; }