/* =========================================================================
   SOL-340 — Solomon animated avatar (stylized SVG 2.5D), app-wide component.
   Scoped to .solomon-av. JS (solomon-avatar.js) injects the SVG, drives a
   gentle idle look-around + blink, and sets data-state for reactions.
   Source of truth for the look: output/solomon-v3-animated.html.
   ========================================================================= */
.solomon-av{display:inline-block;position:relative;line-height:0;width:40px;height:40px}
.solomon-av .pose{width:100%;height:100%;transform-box:fill-box;transform-origin:50% 88%;animation:sol-breathe 5s ease-in-out infinite}
.solomon-av svg{width:100%;height:100%;overflow:visible;display:block}

/* circular chip framing (small avatars e.g. chat header): light disc behind +
   head-focused zoom so the face reads at small sizes. */
.solomon-av.av-chip{border-radius:50%;overflow:hidden;
  background:radial-gradient(circle at 50% 38%,#f0fbf2,#dcf2e1);
  box-shadow:0 0 0 2px rgba(255,255,255,.45),0 2px 6px rgba(0,0,0,.18)}
.solomon-av.av-chip svg{width:132%;height:132%;margin-left:-16%;margin-top:-2%}

/* depth parallax: layers shift by --dx/--dy (eased per-frame in JS) */
.solomon-av .lyr{transform-box:fill-box}
.solomon-av .d-back {translate:calc(var(--dx,0)*-3px) calc(var(--dy,0)*-2px)}
.solomon-av .d-coat {translate:calc(var(--dx,0)*1px)  calc(var(--dy,0)*1px)}
.solomon-av .d-face {translate:calc(var(--dx,0)*2px)  calc(var(--dy,0)*1.6px)}
.solomon-av .d-brows{translate:calc(var(--dx,0)*4px)  calc(var(--dy,0)*3px)}
.solomon-av .d-eyes {translate:calc(var(--dx,0)*5px)  calc(var(--dy,0)*3.4px)}
.solomon-av .d-front{translate:calc(var(--dx,0)*5.5px) calc(var(--dy,0)*3.8px)}

/* eyelids: scaleY from top; closed on .blink */
.solomon-av .lid{transform-box:fill-box;transform-origin:50% 0%;transform:scaleY(0);transition:transform .085s ease}
.solomon-av.blink .lid{transform:scaleY(1)}

/* expression variants hidden by default */
.solomon-av .eyes-open{opacity:1}.solomon-av .eyes-happy{opacity:0}
.solomon-av .m-neutral{opacity:1}
.solomon-av .m-smile,.solomon-av .m-talk,.solomon-av .m-frown{opacity:0}
.solomon-av .m-talk{transform-box:fill-box;transform-origin:50% 50%}
.solomon-av .spark,.solomon-av .tdot,.solomon-av .ear-waves{transform-box:fill-box;transform-origin:50% 50%}
.solomon-av .wave-arm,.solomon-av .thought,.solomon-av .sparkles,.solomon-av .sweat,.solomon-av .ear-waves{opacity:0}
.solomon-av .brow-l,.solomon-av .brow-r{transform-box:fill-box;transform-origin:50% 50%;transition:transform .25s ease}

/* ===== idle ===== */
@keyframes sol-breathe{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.012)}}

/* ===== listening ===== */
.solomon-av[data-state="listening"] .pose{animation:sol-listen 3.4s ease-in-out infinite}
.solomon-av[data-state="listening"] .ear-waves{opacity:1;animation:sol-ripple 1.7s ease-out infinite}
@keyframes sol-listen{0%,100%{transform:rotate(6deg)}50%{transform:rotate(3.5deg)}}
@keyframes sol-ripple{0%{opacity:0;transform:scale(.6)}40%{opacity:.85}100%{opacity:0;transform:scale(1.6)}}

/* ===== thinking ===== */
.solomon-av[data-state="thinking"] .pose{animation:sol-think 4.2s ease-in-out infinite}
.solomon-av[data-state="thinking"] .brow-l,.solomon-av[data-state="thinking"] .brow-r{transform:translateY(-2px)}
.solomon-av[data-state="thinking"] .thought{opacity:1}
.solomon-av[data-state="thinking"] .tdot{animation:sol-tdot 1.4s ease-in-out infinite}
.solomon-av[data-state="thinking"] .tdot2{animation-delay:.2s}.solomon-av[data-state="thinking"] .tdot3{animation-delay:.4s}
@keyframes sol-think{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(-2.5deg)}}
@keyframes sol-tdot{0%,80%,100%{transform:scale(.5);opacity:.4}40%{transform:scale(1);opacity:1}}

/* ===== talking ===== */
.solomon-av[data-state="talking"] .m-neutral{opacity:0}
.solomon-av[data-state="talking"] .m-talk{opacity:1;animation:sol-talk .46s ease-in-out infinite}
.solomon-av[data-state="talking"] .pose{animation:sol-talkbob 2.1s ease-in-out infinite}
@keyframes sol-talk{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1.2)}}
@keyframes sol-talkbob{0%,100%{transform:rotate(-1deg)}25%{transform:rotate(1deg)}50%{transform:rotate(-.6deg)}75%{transform:rotate(1.2deg)}}

/* ===== happy ===== */
.solomon-av[data-state="happy"] .eyes-open{opacity:0}.solomon-av[data-state="happy"] .eyes-happy{opacity:1}
.solomon-av[data-state="happy"] .m-neutral{opacity:0}.solomon-av[data-state="happy"] .m-smile{opacity:1}
.solomon-av[data-state="happy"] .pose{animation:sol-bounce 1.15s ease-in-out infinite}
.solomon-av[data-state="happy"] .sparkles{opacity:1}
.solomon-av[data-state="happy"] .spark{animation:sol-spark 1.6s ease-in-out infinite}
.solomon-av[data-state="happy"] .spark2{animation-delay:.5s}.solomon-av[data-state="happy"] .spark3{animation-delay:.9s}
@keyframes sol-bounce{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(-7px) rotate(-2deg)}60%{transform:translateY(0) rotate(2deg)}}
@keyframes sol-spark{0%,100%{transform:scale(0) rotate(0);opacity:0}50%{transform:scale(1) rotate(40deg);opacity:1}}

/* ===== wave ===== */
.solomon-av[data-state="wave"] .eyes-open{opacity:0}.solomon-av[data-state="wave"] .eyes-happy{opacity:1}
.solomon-av[data-state="wave"] .m-neutral{opacity:0}.solomon-av[data-state="wave"] .m-smile{opacity:1}
.solomon-av[data-state="wave"] .wave-arm{opacity:1;transform-box:fill-box;transform-origin:20% 90%;animation:sol-flap .68s ease-in-out infinite}
.solomon-av[data-state="wave"] .pose{animation:sol-wavetilt 1.4s ease-in-out infinite}
@keyframes sol-flap{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(20deg)}}
@keyframes sol-wavetilt{0%,100%{transform:rotate(3deg)}50%{transform:rotate(-2deg)}}

/* ===== concerned ===== */
.solomon-av[data-state="concerned"] .m-neutral{opacity:0}.solomon-av[data-state="concerned"] .m-frown{opacity:1}
.solomon-av[data-state="concerned"] .brow-l{transform:rotate(-12deg) translateY(-1px)}
.solomon-av[data-state="concerned"] .brow-r{transform:rotate(12deg) translateY(-1px)}
.solomon-av[data-state="concerned"] .pose{animation:sol-concern 5s ease-in-out infinite}
.solomon-av[data-state="concerned"] .sweat{opacity:1;animation:sol-sweat 3.2s ease-in infinite}
@keyframes sol-concern{0%,100%{transform:rotate(7deg)}50%{transform:rotate(5deg)}}
@keyframes sol-sweat{0%{opacity:0;transform:translateY(-4px)}30%{opacity:.85}100%{opacity:0;transform:translateY(10px)}}

/* ===== nod (reassure) ===== */
.solomon-av[data-state="nod"] .m-neutral{opacity:0}.solomon-av[data-state="nod"] .m-smile{opacity:1}
.solomon-av[data-state="nod"] .pose{animation:sol-nod 1.15s ease-in-out infinite}
@keyframes sol-nod{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(5px) rotate(2deg)}60%{transform:translateY(0)}}

@media (prefers-reduced-motion:reduce){
  .solomon-av .pose,.solomon-av .tdot,.solomon-av .spark,.solomon-av .wave-arm,
  .solomon-av .ear-waves,.solomon-av .sweat{animation:none!important}
}