/* ============================================================
   BoletoGO Mascot — runtime CSS
   Tokens deben coincidir con MASCOT.md y mascot_kit.py
   Prefijo bg- (BoletoGo) para evitar colisiones con Tailwind.
   ============================================================ */
:root{
  --m-ink:#101010;
  --m-body:#E45C10;
  --m-glow:#FCBC3C;
  --m-cream:#FCFCEC;
  --m-scale:3;               /* 1px del sprite = 3px en pantalla */
}

.bg-mascot{ image-rendering:pixelated; image-rendering:crisp-edges; display:inline-block; }

/* ---------- A) LOOP con sprite sheet (idle + parpadeo) ----------
   16 frames de 32px = 512x32. Cero JS, pixel-perfect.            */
.bg-mascot--sprite{
  width:calc(32px * var(--m-scale));
  height:calc(32px * var(--m-scale));
  background:url('assets/mascot-sheet.png') 0 0 / calc(512px * var(--m-scale)) calc(32px * var(--m-scale)) no-repeat;
  animation:bg-mascot-play 1.5s steps(16) infinite;
}
@keyframes bg-mascot-play{
  from{ background-position-x:0; }
  to  { background-position-x:calc(-512px * var(--m-scale)); }
}

/* ---------- B) SVG por partes (interactivo, escalable) ----------
   Usa mascot-parts.svg inline. Estados por clase (Alpine/JS).     */
.bg-mascot--svg{ width:calc(32px * var(--m-scale)); height:calc(32px * var(--m-scale)); line-height:0; }
.bg-mascot--svg svg{ width:100%; height:100%; overflow:visible; }

/* rebote / flotar (transform, sin frames) */
.bg-mascot--bounce svg{ animation:bg-mascot-bounce 1.4s ease-in-out infinite; transform-origin:50% 100%; }
@keyframes bg-mascot-bounce{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8%)} }

/* parpadeo por CSS (cruce de opacidad entre ojos abiertos/cerrados) */
.bg-mascot--blink #m-eyes-closed{ display:block !important; }
.bg-mascot--blink #m-eyes-open  { animation:bg-eyes-open 4.2s steps(1,end) infinite; }
.bg-mascot--blink #m-eyes-closed{ animation:bg-eyes-closed 4.2s steps(1,end) infinite; }
@keyframes bg-eyes-open  { 0%,94%{opacity:1} 95%,99%{opacity:0} 100%{opacity:1} }
@keyframes bg-eyes-closed{ 0%,94%{opacity:0} 95%,99%{opacity:1} 100%{opacity:0} }

/* estados discretos (toggle con clase) */
.state-happy #m-mouth      { display:none  !important; }
.state-happy #m-mouth-open { display:block !important; }

/* Beto SIEMPRE muestra los DOS ojos: el guiño de un ojo se veía "tuerto".
   Guiño/hover quedan como SONRISA (boca abierta) con ambos ojos abiertos.
   El parpadeo (bg-mascot--blink) se mantiene: cierra AMBOS ojos a la vez (natural). */
.state-wink #m-mouth, .bg-mascot--hoverwink:hover #m-mouth{ display:none !important; }
.state-wink #m-mouth-open, .bg-mascot--hoverwink:hover #m-mouth-open{ display:block !important; }

/* accesibilidad: respeta usuarios que reducen movimiento */
@media (prefers-reduced-motion: reduce){
  .bg-mascot--sprite{ animation:none; background-position-x:0; }
  .bg-mascot--bounce svg{ animation:none; }
  .bg-mascot--blink #m-eyes-open{ animation:none; }
  .bg-mascot--blink #m-eyes-closed{ animation:none; display:none !important; }
}

/* ============================================================
   ESTADOS DE ASISTENTE DE CHAT (state-driven, SVG por partes)
   ============================================================ */

/* thinking: 3 puntitos que aparecen en secuencia */
.state-thinking #m-think{ display:block !important; }
.state-thinking #m-dot1{ animation:bg-dot 1.2s steps(1,end) infinite; }
.state-thinking #m-dot2{ animation:bg-dot 1.2s steps(1,end) .18s infinite; }
.state-thinking #m-dot3{ animation:bg-dot 1.2s steps(1,end) .36s infinite; }
@keyframes bg-dot{ 0%,100%{opacity:0} 25%,85%{opacity:1} }

/* typing / hablando: alterna boca cerrada <-> abierta */
.state-typing #m-mouth      { animation:bg-talk 0.42s steps(1,end) infinite; }
.state-typing #m-mouth-open { display:block !important; animation:bg-talk-open 0.42s steps(1,end) infinite; }
@keyframes bg-talk     { 0%,50%{opacity:1} 51%,100%{opacity:0} }
@keyframes bg-talk-open{ 0%,50%{opacity:0} 51%,100%{opacity:1} }

@media (prefers-reduced-motion: reduce){
  .state-thinking #m-dot1,.state-thinking #m-dot2,.state-thinking #m-dot3{ animation:none; opacity:1; }
  .state-typing #m-mouth{ animation:none; }
  .state-typing #m-mouth-open{ animation:none; display:none !important; }
}