/* Symo the mascot (avatar.js): idle bob plus per-state animation, shared by every page. */
.av-svg { width: 100%; height: 100%; overflow: visible; }
.av-svg * { transform-box: view-box; }
.av-body { animation: av-bob 3.2s ease-in-out infinite; }
.av-head { transform-origin: 98px 146px; transition: transform .3s ease; }
.av-arm { transform-origin: 74px 164px; animation: av-sway 3.2s ease-in-out infinite; }
.av-eyes { transform-origin: 98px 105px; transition: transform .25s ease; }
.blink .av-eyes { transform: scaleY(.1); }
.av-mouth { opacity: 0; transform-origin: 98px 122px; }
.av-bulb { transform-origin: 121px 42px; fill: #e8603a; transition: fill .4s ease; }
.av-arc { opacity: .5; transition: opacity .12s linear; }
.av-zzz { opacity: 0; }

/* listening: the signal arcs light up with the voice, head nods along */
[data-state="listening"] .av-arc { opacity: clamp(.18, calc(.3 + var(--alv) * 1.8 - var(--i) * .5), 1); }
[data-state="listening"] .av-head { transform: translateY(calc(var(--alv) * -3px)) rotate(calc(var(--alv) * -3deg)); transition: transform .08s linear; }
/* thinking: eyes up, head tilts, antenna blinks, arcs ripple outward */
[data-state="thinking"] .av-eyes { transform: translate(4px, -5px); }
[data-state="thinking"] .av-head { animation: av-tilt 2.4s ease-in-out infinite; }
[data-state="thinking"] .av-bulb { animation: av-think .5s ease-in-out infinite alternate; }
[data-state="thinking"] .av-arc { animation: av-ripple 1.2s ease-in-out infinite; animation-delay: calc(var(--i) * .2s); }
[data-state="thinking"] .av-arm { animation: none; transform: rotate(-6deg); transition: transform .4s ease; }
/* talking: waves the baton, mouth moves */
[data-state="talking"] .av-mouth { opacity: 1; animation: av-talk .2s ease-in-out infinite alternate; }
[data-state="talking"] .av-arm { animation: av-wave .5s ease-in-out infinite alternate; }
[data-state="talking"] .av-head { animation: av-nod .5s ease-in-out infinite alternate; }
[data-state="talking"] .av-arc { opacity: 1; }
/* sleeping */
[data-state="sleeping"] .av-eyes { transform: scaleY(.12); }
[data-state="sleeping"] .av-arm { animation: none; transform: rotate(-14deg); transition: transform .8s ease; }
[data-state="sleeping"] .av-head { transform: rotate(6deg) translateY(2px); }
[data-state="sleeping"] .av-bulb { fill: #8a4a3a; }
[data-state="sleeping"] .av-arc { opacity: .08; }
[data-state="sleeping"] .av-zzz { opacity: 1; }
[data-state="sleeping"] .av-zzz text { animation: av-z 2.4s ease-in-out infinite; }
[data-state="sleeping"] .av-zzz text:nth-child(2) { animation-delay: .4s; }
[data-state="sleeping"] .av-zzz text:nth-child(3) { animation-delay: .8s; }
[data-state="sleeping"] .av-body { animation-duration: 5s; }

@keyframes av-bob { 50% { transform: translateY(-2px); } }
@keyframes av-sway { 50% { transform: rotate(-5deg); } }
@keyframes av-wave { from { transform: rotate(-16deg); } to { transform: rotate(6deg); } }
@keyframes av-nod { from { transform: rotate(-1.5deg); } to { transform: rotate(1.5deg) translateY(-1px); } }
@keyframes av-tilt { 25% { transform: rotate(-4deg); } 75% { transform: rotate(3deg); } }
@keyframes av-talk { from { transform: scaleY(.3); } to { transform: scaleY(1.15); } }
@keyframes av-think { from { fill: #e8603a; transform: scale(.92); } to { fill: #ffd27a; transform: scale(1.15); } }
@keyframes av-ripple { 0%, 100% { opacity: .2; } 40% { opacity: 1; } }
@keyframes av-z { 0% { opacity: 0; transform: translate(0, 4px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translate(4px, -6px); } }
@media (prefers-reduced-motion: reduce) {
  .av-body, .av-arm, .av-head, .av-bulb, .av-arc, .av-zzz text { animation: none !important; }
}