/* ================================================================
   IGNIS — companion. Sprite playback is background-position + steps().
   ================================================================ */
#companion{
  position:fixed;left:0;bottom:0;z-index:var(--z-companion);
  width:0;height:0;pointer-events:none;
}

#ign{
  position:absolute;bottom:8px;left:0;
  image-rendering:pixelated;pointer-events:auto;cursor:grab;
  background-repeat:no-repeat;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.55));
  transition:transform 120ms var(--ease-slide);
  touch-action:none;
}
#ign.flip{transform:scaleX(-1)}
/* subtle breathing so a held single frame still reads alive */
#ign.breathe{animation:ignBreathe 3.2s var(--ease-slide) infinite}
@keyframes ignBreathe{50%{translate:0 -3px}}
#ign.grabbing{cursor:grabbing;transition:none}
#ign.play{animation:ignPlay var(--dur,700ms) steps(var(--frames,6)) infinite}
#ign.once{animation:ignPlay var(--dur,700ms) steps(var(--frames,6)) 1 forwards}
@keyframes ignPlay{to{background-position-x:var(--end)}}

/* ground shadow puddle so it doesn't float */
#ign::after{
  content:"";position:absolute;left:50%;bottom:-6px;translate:-50% 0;
  width:62%;height:9px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(53,224,255,.28),transparent 70%);
}

/* ---- speech bubble ---- */
#ign-say{
  position:absolute;bottom:100%;left:50%;translate:-50% -14px;
  min-width:120px;max-width:min(320px,60vw);padding:11px 14px;
  background:rgba(6,9,18,.95);border:1px solid var(--line);
  font-size:13px;line-height:1.5;color:var(--ink);
  pointer-events:none;opacity:0;transform-origin:bottom center;
}
/* parent flips to face left — undo it here or the text mirrors */
#ign.flip #ign-say{scale:-1 1}
#ign-say.on{opacity:1;animation:sayIn 260ms var(--ease-pop)}
@keyframes sayIn{from{opacity:0;transform:translateY(10px) scale(.9)}to{opacity:1;transform:none}}
/* corner brackets, matching the site motif */
#ign-say::before,#ign-say::after{content:"";position:absolute;width:9px;height:9px}
#ign-say::before{top:-1px;left:-1px;border-top:2px solid var(--sys-cyan);border-left:2px solid var(--sys-cyan)}
#ign-say::after{bottom:-1px;right:-1px;border-bottom:2px solid var(--sys-cyan);border-right:2px solid var(--sys-cyan)}
#ign-say .tail{
  position:absolute;top:100%;left:50%;translate:-50% 0;
  border:7px solid transparent;border-top-color:var(--line);
}
#ign-say .cur{display:inline-block;width:7px;height:13px;vertical-align:-2px;
  background:var(--sys-cyan);animation:sayBlink 1s steps(1) infinite}
@keyframes sayBlink{50%{opacity:0}}

/* Phones: smaller, and he stays put — a walking sprite fights thumb-scrolling */
@media(max-width:640px){
  #ign-say{max-width:66vw;font-size:12px;padding:9px 11px}
  #ign{height:112px!important;width:auto!important}
  #ign::after{display:none}
}

/* reduced motion / small screens: park it, no walking */
@media(prefers-reduced-motion:reduce){
  #ign.play,#ign.once{animation:none}
  #ign{transition:none}
}