/* Jano auf luismarks.com · Figur und Verhalten zu jano-live.js
   Die Figur ist dieselbe wie in der Console (tools/console/ki/ki-figur.css), Farbe nur geerbt:
   --ki-farbe (Körper) und --ki-gegen (Augen), damit Kundenfarben von außen greifen.
   Anders als in der Console darf Jano hier immer leben: er schwebt, schaut umher, folgt dem
   Mauszeiger und blinzelt. Bei reduzierter Bewegung steht er still. */

.ki-figur {
  --ki-ease: cubic-bezier(.22,1,.36,1);
  display: inline-block; flex: none; line-height: 0; vertical-align: middle;
  -webkit-tap-highlight-color: transparent;
}
.ki-figur svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ki-figur .ki-flaeche { fill: var(--ki-farbe, #181c1e); transition: fill .3s var(--ki-ease); }
.ki-figur .ki-auge {
  fill: var(--ki-gegen, #ffffff); transform-box: fill-box; transform-origin: center;
  transition: transform .32s var(--ki-ease);
}
.ki-figur .ki-blick, .ki-figur .ki-koerper { transition: transform .42s var(--ki-ease); }
.ki-figur .ki-augen { transform-box: fill-box; transform-origin: center; }

/* denkt: der Blick wandert oben hin und her */
.ki-figur[data-zustand="denkt"] .ki-augen { animation: ki-blick 1.8s var(--ki-ease) infinite alternate; }
@keyframes ki-blick { from { transform: translateX(calc(var(--g) * -2px)); } to { transform: translateX(calc(var(--g) * 12px)); } }

/* Blinzeln, 0,24 s */
.ki-figur.blinzelt .ki-augen { animation: ki-blinzel .24s var(--ki-ease); }
@keyframes ki-blinzel { 0%, 100% { transform: none; } 50% { transform: scaleY(.1); } }

/* fertig: Fläche kurz Quittungsgrün, dann zurück */
.ki-figur[data-zustand="fertig"] .ki-flaeche { animation: ki-quittung 1.6s var(--ki-ease) forwards; }
@keyframes ki-quittung { 0% { fill: var(--ki-farbe, #181c1e); } 18%, 62% { fill: var(--ki-ok, #16a34a); } 100% { fill: var(--ki-farbe, #181c1e); } }

/* Lebt: schwebt sanft, kippt dabei ein wenig. Versatz je Figur über --jd */
.ki-figur.lebt { animation: jano-schwebt 4.2s ease-in-out var(--jd, 0s) infinite; }
@keyframes jano-schwebt {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  30%      { transform: translateY(-5%) rotate(-1.2deg); }
  65%      { transform: translateY(-2%) rotate(.8deg); }
}
.ki-figur.lebt { cursor: pointer; }
/* Flackern: die Augen springen schnell, statt zu gleiten */
.ki-figur.flackert .ki-blick { transition-duration: .13s; transition-timing-function: cubic-bezier(.3,.7,.4,1); }

/* Antippen: quetschen, dann kurz abschütteln (wie in der Console) */
.ki-figur.stups svg { animation: jano-stups .7s var(--ki-ease); transform-origin: 50% 70%; }
@keyframes jano-stups {
  0%   { transform: scale(1, 1); }
  18%  { transform: scale(.8); }
  34%  { transform: scale(1.04); }
  48%  { transform: scale(1) translateX(-6%) rotate(-4deg); }
  62%  { transform: translateX(5%) rotate(3deg); }
  76%  { transform: translateX(-3%) rotate(-2deg); }
  88%  { transform: translateX(1%) rotate(1deg); }
  100% { transform: none; }
}
/* Freudensprung, etwa nach einer Bestätigung */
.ki-figur.hops svg { animation: jano-hops .62s var(--ki-ease); transform-origin: 50% 90%; }
@keyframes jano-hops {
  0%   { transform: none; }
  22%  { transform: scale(1.06, .9); }
  48%  { transform: translateY(-16%) scale(.96, 1.06); }
  74%  { transform: translateY(0) scale(1.04, .94); }
  100% { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ki-figur, .ki-figur * { animation: none !important; transition-duration: .001s !important; }
}