/* Standing Yasmina = whole-frame player (Ahmed 28 Oct: no cut-out arm, no pasted mouth).
   Full-figure pictures of one pose on one canvas (tools/avatar/make_frames.py -> ym/*.webp + ym/frames.json) are
   stacked; web/yasmina.js fades the next picture in on top, then hides the one underneath.
   Size and position of the dock (.ym, --ym-h) stay in styles.css. */
.ym-dock{display:flex;align-items:flex-end;gap:10px}
.ym-dock .ym-buttons{margin-bottom:6px}
.ym-fig{position:relative;display:block;height:var(--ym-h);aspect-ratio:488/1000;padding:0;border-radius:12px;cursor:pointer;flex:none;background:none}
.ym-fig:focus-visible{outline:3px solid var(--brand);outline-offset:4px}
.ym-hop,.ym-frames{position:absolute;inset:0;pointer-events:none}
.ym-frames{transform-origin:50% 100%;animation:ymbreath 4s ease-in-out infinite;isolation:isolate}
.ym-frame{position:absolute;left:0;top:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 0ms linear;
  user-select:none;-webkit-user-drag:none}
.ym-frame[data-f=idle]{opacity:1;z-index:1}
@keyframes ymbreath{0%,100%{transform:scale(1)}50%{transform:scale(1.006)}}
/* greeting without a wave picture: a small friendly hop (twice) */
.ym-hop.hopping{animation:ymhop .3s ease-in-out 2}
@keyframes ymhop{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
/* status glow under her feet: listening = green, speaking = navy, thinking / connecting = amber */
.ym-glow{position:absolute;left:-12%;right:-12%;bottom:-5%;height:12%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(29,39,51,.22),rgba(29,39,51,0));transition:background .25s}
.ym[data-s=listening] .ym-glow{background:radial-gradient(closest-side,rgba(37,116,82,.75),rgba(37,116,82,0));animation:ymglow 1.6s ease-in-out infinite}
.ym[data-s=speaking] .ym-glow{background:radial-gradient(closest-side,rgba(11,61,92,.8),rgba(11,61,92,0));animation:ymglow .7s ease-in-out infinite}
.ym[data-s=thinking] .ym-glow,.ym[data-s=connecting] .ym-glow{background:radial-gradient(closest-side,rgba(173,96,28,.75),rgba(173,96,28,0));animation:ymglow 1s ease-in-out infinite}
@keyframes ymglow{0%,100%{transform:scale(.85);opacity:.75}50%{transform:scale(1.1);opacity:1}}
@media (prefers-reduced-motion:reduce){.ym-frames,.ym-hop.hopping{animation:none}.ym-glow{animation:none!important}}