/* Mascota de Helix Agent en la web: port literal de static/dashboard/css/helix-v5-agente.css §1 (rig, pose y
   vídeo), sin el prefijo html.hx-v5. El JS vive en js/helix-mascota.js. */
/* ═══ 1 · Mascota por capas ═══════════════════════════════════════════════════════════════ */
.hx5-rig { position: relative; display: inline-block; width: var(--s); height: var(--s); flex-shrink: 0; vertical-align: middle; }
.hx5-rig > svg { position: absolute; inset: -18%; width: 136%; height: 136%; overflow: visible;
  animation: hx5-rg-flota var(--fl, 3.6s) ease-in-out var(--fd, 0s) infinite alternate; }
.hx5-rig .hx5-mv { transform-box: view-box; transform-origin: 50% 60%; transition: transform .7s cubic-bezier(.34, 1.4, .5, 1);
  transform: translate(var(--mx, 0px), var(--my, 0px)) rotate(var(--mr, 0deg)) scale(var(--ms, 1)); }
.hx5-rig .hx5-rn, .hx5-rig .hx5-rb { filter: drop-shadow(0 2.5px 3px rgba(0, 0, 0, .35)); }
/* Mismo cuerpo en los dos temas: el oscuro con el tema oscuro, el blanco con el claro */
.hx5-rig .hx5-rb { display: none; }
[data-theme="light"] .hx5-rig .hx5-rn { display: none; }
[data-theme="light"] .hx5-rig .hx5-rb { display: inline; filter: drop-shadow(0 2.5px 3.5px rgba(40, 30, 60, .22)); }
/* aro: la mitad de arriba va detrás del cuerpo y la de abajo delante */
.hx5-rig .hx5-aro { transform-box: view-box; transform-origin: 50% 55%;
  transform: rotate(calc(var(--rot) + var(--ar, 0deg))) scaleY(var(--ay, 1)); transition: transform 1.2s cubic-bezier(.45, 0, .2, 1), opacity .6s; }
.hx5-rig .hx5-aro ellipse { fill: none; vector-effect: non-scaling-stroke; }
.hx5-rig .hx5-tubo { stroke: url(#hx5-rg-aro); stroke-width: calc(var(--s) * .028 + .6px); filter: url(#hx5-rg-neon); }
.hx5-rig .hx5-nucleo { stroke: #fff; stroke-width: calc(var(--s) * .008 + .3px); opacity: .75; }
.hx5-rig .hx5-destello { stroke: #fff; stroke-width: calc(var(--s) * .03 + .8px); stroke-linecap: round; stroke-dasharray: 7 93;
  filter: url(#hx5-rg-neon); animation: hx5-rg-orbita var(--velb, 3.6s) linear var(--od, 0s) infinite; }
[data-theme="light"] .hx5-rig .hx5-nucleo { opacity: .45; }
/* ojos: píldora, arco feliz, línea dormida y círculo de sorpresa */
.hx5-rig .hx5-ojo * { fill: #fff; stroke: #fff; transform-box: fill-box; transform-origin: center;
  transition: opacity .16s, transform .22s cubic-bezier(.34, 1.5, .5, 1); }
.hx5-rig .hx5-op, .hx5-rig .hx5-oc { stroke: none; }
.hx5-rig .hx5-oa, .hx5-rig .hx5-ol { fill: none; stroke-width: 2.4; stroke-linecap: round; }
.hx5-rig .hx5-oa, .hx5-rig .hx5-ol, .hx5-rig .hx5-oc { opacity: 0; transform: scale(.4); }
.hx5-rig .hx5-ojos { transform-box: view-box; transition: transform .45s cubic-bezier(.34, 1.3, .5, 1);
  transform: translate(var(--lx, 0px), var(--ly, 0px)); }
.hx5-rig .hx5-ci .hx5-op { transform: scaleY(.08); }
.hx5-rig[data-e="feliz"] .hx5-op, .hx5-rig .hx5-gu .hx5-op { opacity: 0; transform: scale(.4); }
.hx5-rig[data-e="feliz"] .hx5-oa, .hx5-rig .hx5-gu .hx5-oa { opacity: 1; transform: none; }
.hx5-rig[data-e="dormido"] .hx5-op { opacity: 0; transform: scale(.4); }
.hx5-rig[data-e="dormido"] .hx5-ol { opacity: .7; transform: none; }
.hx5-rig[data-e="sorpresa"] .hx5-op { opacity: 0; transform: scale(.4); }
.hx5-rig[data-e="sorpresa"] .hx5-oc { opacity: 1; transform: none; }
.hx5-rig[data-e="dormido"] .hx5-aro { opacity: .35; }
.hx5-rig[data-e="dormido"] .hx5-destello { animation-duration: 9s; }
/* reflejo que barre el visor */
.hx5-rig .hx5-barrido { fill: #fff; opacity: 0; transform-box: view-box; transform: skewX(-22deg); }
.hx5-rig.hx5-barre .hx5-barrido { animation: hx5-rg-barre 1.1s cubic-bezier(.45, 0, .2, 1); }
@keyframes hx5-rg-orbita { to { stroke-dashoffset: -100; } }
@keyframes hx5-rg-barre { 0% { opacity: 0; transform: skewX(-22deg) translateX(0); } 20% { opacity: .16; }
  100% { opacity: 0; transform: skewX(-22deg) translateX(130px); } }
@keyframes hx5-rg-flota { from { transform: translateY(calc(var(--s) * .025)); } to { transform: translateY(calc(var(--s) * -.035)); } }

/* Pose fija (tarjeta «Helix Agent propone»): mira al mensaje con cara de pregunta, flota e inclina la cabeza */
.hx5-mpose { position: relative; display: inline-block; width: var(--s); height: var(--s); flex-shrink: 0; }
.hx5-mpose .hx5-mp-in { position: absolute; inset: 0; transform-origin: 50% 75%; animation: hx5-mp-lee 7s ease-in-out infinite; will-change: transform; }
.hx5-mpose img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .35)); }
.hx5-mpose .hx5-pb { opacity: 0; }
[data-theme="light"] .hx5-mpose .hx5-po { opacity: 0; }
[data-theme="light"] .hx5-mpose .hx5-pb { opacity: 1; filter: drop-shadow(0 10px 14px rgba(40, 30, 60, .2)); }
.hx5-mpose .hx5-mp-brillo { position: absolute; inset: 0; border-radius: 50%; opacity: 0; mix-blend-mode: screen;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .55), transparent 70%);
  transform: translate(-28%, 18%) scale(.35); animation: hx5-mp-destello 7s ease-in-out infinite; }
@keyframes hx5-mp-lee { 0%, 100% { transform: translateY(0) rotate(0); } 30% { transform: translateY(-3px) rotate(2.5deg); }
  55% { transform: translateY(-4px) rotate(3.5deg); } 80% { transform: translateY(-1.5px) rotate(1deg); } }
@keyframes hx5-mp-destello { 0%, 50%, 100% { opacity: 0; transform: translate(-30%, 20%) scale(.3); } 62% { opacity: .45; }
  78% { opacity: 0; transform: translate(34%, 6%) scale(.3); } }

/* Vídeo con alfa: se funde con lo de detrás con una máscara radial; oscuro y blanco van en el mismo instante */
.hx5-mvid { position: relative; display: inline-block; width: var(--s); height: var(--s); flex-shrink: 0; }
.hx5-mvid video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
  -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent 100%); mask-image: radial-gradient(closest-side, #000 56%, transparent 100%); }
.hx5-mvid .hx5-vb { opacity: 0; }
[data-theme="light"] .hx5-mvid .hx5-vo { opacity: 0; }
[data-theme="light"] .hx5-mvid .hx5-vb { opacity: 1; }
/* Recién cambiado el tema, el vídeo del tema nuevo aún se descarga (helix-v5-mascota.js): se ven los dos y el
   nuevo, todavía sin imagen, no tapa al anterior. */
.hx5-mvid.hx5-espera video { opacity: 1; }

/* «Reducir movimiento»: la mascota se queda quieta (el motor tampoco lanza gestos). El !important es el
   patrón de la casa para apagar animaciones de golpe. */
@media (prefers-reduced-motion: reduce) {
  .hx5-rig *, .hx5-rig > svg, .hx5-mpose * { animation: none !important; transition: none !important; }
}