/* =====================================================================
   Bayan: the witty robot
   Palette from the character sheet: deep teal, mint-white, mint, steel gray, tan.
   Pivot points are in SVG viewBox coordinates (0 0 240 300).

   Motion rules (keep these and nothing snaps):
   - Idle loops live on the outer layer of each part; actions on inner layers.
   - One-off keyframes start AND end at `transform: none`.
   - Held poses (sad, giggle arms, cheering) use transitions, not animations.
   - Limbs only rotate around their joints; never translate them away.
   ===================================================================== */

.bayan {
  --b-shell: #3A5857;
  --b-shell-2: #2B4544;
  --b-screen: #E8F7F2;
  --b-mint: #9ED3B6;
  --b-mint-2: #74BF98;
  --b-metal: #8AA3A2;
  --b-suit: #2C4544;
  --b-lapel: #3D5C5A;
  --b-ink: #152826;
  --b-tan: #D8B48E;
  --b-spring: cubic-bezier(.34, 1.56, .64, 1);
  --b-smooth: cubic-bezier(.45, 0, .25, 1);
  --lx: 0px;
  --ly: 0px;
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

/* ---------------------------------------------------------------- paint */

.b-shadow { fill: var(--b-tan); opacity: .45; }
.b-shell { fill: var(--b-shell); stroke: var(--b-ink); stroke-width: 3.5; }
.b-shine { fill: none; stroke: #fff; stroke-opacity: .28; stroke-width: 4; stroke-linecap: round; }
.b-ear { fill: var(--b-shell-2); stroke: var(--b-ink); stroke-width: 3; }
.b-ear-ring { fill: var(--b-mint); }
.b-screen { fill: var(--b-screen); stroke: var(--b-ink); stroke-width: 3; }
.b-box { fill: none; stroke: #6E9A93; stroke-width: 4; }
.b-check { fill: none; stroke: var(--b-mint-2); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.b-dots circle { fill: #6E9A93; opacity: 0; }

.b-brow, .b-lid, .b-lash, .b-mouth { fill: none; stroke: var(--b-ink); stroke-linecap: round; stroke-linejoin: round; }
.b-brow { stroke-width: 5; }
.b-lid { stroke-width: 4; }
.b-lash { stroke-width: 2.6; }
.b-mouth { stroke-width: 3.6; }
.b-mouth-fill { fill: var(--b-ink); stroke-width: 2.5; }
.b-pupil { fill: var(--b-ink); }
.b-glint { fill: #fff; }
.b-eyewhite { fill: #fff; stroke: var(--b-ink); stroke-width: 3; }
.b-tongue { fill: var(--b-mint); stroke: var(--b-ink); stroke-width: 2.4; stroke-linejoin: round; }
.b-blush { fill: var(--b-tan); opacity: .6; }
.b-talk { fill: var(--b-ink); opacity: 0; }

.b-limb-o { fill: none; stroke: var(--b-ink); stroke-width: 17; stroke-linecap: round; stroke-linejoin: round; }
.b-limb { fill: none; stroke: var(--b-metal); stroke-width: 11; stroke-linecap: round; stroke-linejoin: round; }
.b-joint { fill: var(--b-shell-2); stroke: var(--b-ink); stroke-width: 2.5; }
.b-hand { fill: var(--b-shell-2); stroke: var(--b-ink); stroke-width: 3; }
.b-claw { fill: none; stroke: var(--b-ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.b-boot { fill: var(--b-shell-2); stroke: var(--b-ink); stroke-width: 3.5; stroke-linejoin: round; }
.b-suit { fill: var(--b-suit); stroke: var(--b-ink); stroke-width: 3.5; stroke-linejoin: round; }
.b-lapel { fill: var(--b-lapel); stroke: var(--b-ink); stroke-width: 2; stroke-linejoin: round; }
.b-scarf { fill: var(--b-mint); stroke: var(--b-ink); stroke-width: 2.2; stroke-linejoin: round; }
.b-button { fill: var(--b-lapel); stroke: var(--b-ink); stroke-width: 1.5; }
.b-pocket { stroke: var(--b-mint); stroke-width: 4; stroke-linecap: round; }
.b-shoulder { fill: var(--b-suit); stroke: var(--b-ink); stroke-width: 2.5; }
.b-metal { fill: var(--b-metal); stroke: var(--b-ink); stroke-width: 2.5; }
.b-stalk-o { fill: none; stroke: var(--b-ink); stroke-width: 8; stroke-linecap: round; }
.b-stalk { fill: none; stroke: var(--b-shell-2); stroke-width: 4; stroke-linecap: round; }
.b-ball { fill: var(--b-mint); stroke: var(--b-ink); stroke-width: 3; }
.b-ball-shine { fill: #fff; opacity: .75; }
.b-bow path, .b-bow circle { fill: var(--b-mint); stroke: var(--b-ink); stroke-width: 2.6; stroke-linejoin: round; }
.b-sweat path { fill: #BFE6F2; stroke: var(--b-ink); stroke-width: 2; }
.b-lines path { fill: none; stroke: var(--b-mint-2); stroke-width: 4; stroke-linecap: round; }
.b-zzz text { font: 800 20px 'Baloo 2', system-ui, sans-serif; fill: var(--b-ink); }
.b-cord { fill: none; stroke: var(--b-ink); stroke-width: 3.5; stroke-linecap: round; }
.b-plug rect { fill: var(--b-shell-2); stroke: var(--b-ink); stroke-width: 2; }
.b-plug path { stroke: var(--b-ink); stroke-width: 2.5; stroke-linecap: round; }
.b-scan, .b-flash { fill: #fff; opacity: 0; pointer-events: none; }
.b-sweat, .b-lines, .b-zzz { opacity: 0; transition: opacity .25s; }
.b-cable { opacity: 0; transform: translateX(90px); }

/* ---------------------------------------------------------- expressions */
/* Faces swap instantly (a crossfade shows two faces at once). */

.b-face { opacity: 0; transform: translate(var(--lx), var(--ly)); transition: transform .3s ease-out; }
.bayan[data-face="neutral"] .f-neutral,
.bayan[data-face="sarcastic"] .f-sarcastic,
.bayan[data-face="funny"] .f-funny,
.bayan[data-face="silly"] .f-silly,
.bayan[data-face="oops"] .f-oops,
.bayan[data-face="really"] .f-really,
.bayan[data-face="friendly"] .f-friendly,
.bayan[data-face="sad"] .f-sad,
.bayan[data-face="think"] .f-think,
.bayan[data-face="sleepy"] .f-sleepy { opacity: 1; }

/* -------------------------------------------------------------- pivots */

.b-rig, .b-jump { transform-origin: 120px 292px; }
.b-tilt { transform-origin: 120px 290px; }
.b-head, .b-head-talk, .b-head-act { transform-origin: 120px 166px; }
.b-antenna, .b-antenna-act { transform-origin: 120px 64px; }
.b-arm-l, .b-arm-l-pose { transform-origin: 91px 184px; }
.b-arm-r, .b-arm-r-pose { transform-origin: 149px 184px; }
.b-fore-l { transform-origin: 70px 208px; }
.b-fore-r { transform-origin: 172px 200px; }
.b-leg-l { transform-origin: 106px 228px; }
.b-leg-r { transform-origin: 134px 228px; }
.b-screen-content { transform-origin: 120px 114px; }
.b-eye, .b-brow, .b-dots circle, .b-ball, .b-zzz text { transform-box: fill-box; transform-origin: center; }

/* held poses glide in and out */
.b-arm-l-pose, .b-arm-r-pose, .b-head-act, .b-antenna-act { transition: transform .5s var(--b-spring); }

/* ---------------------------------------------------------------- idle */

.b-rig { animation: b-bob 3.4s ease-in-out infinite; }
.b-shadow { transform-origin: 120px 293px; animation: b-shadow 3.4s ease-in-out infinite; }
.b-head { animation: b-sway 6s ease-in-out infinite; }
.b-antenna { animation: b-wobble 2.8s ease-in-out infinite; }
.b-eye { animation: b-blink 4.8s infinite; }
.b-scan { animation: b-scan 5.5s linear infinite; }

/* boot: the screen powers on like an old TV, then the checkmark draws */
.is-booting .b-screen-content { animation: b-crt 1.1s ease-out both; }
.is-booting .b-flash { animation: b-flash 1.1s ease-out; }
.is-booting .b-check { animation: b-draw .55s .75s ease-out both; }
.is-booting .b-antenna-act { animation: b-boing .9s .2s ease-out; }

/* wave: three waves with a happy back-kick */
.is-waving .b-fore-r { animation: b-wave 1.6s var(--b-smooth); }
.is-waving .b-leg-l { animation: b-backkick 1.6s var(--b-smooth); }
.is-waving .b-tilt { animation: b-lean 1.6s var(--b-smooth); }
.is-waving .b-antenna-act { animation: b-boing 1.2s .1s ease-out; }
.is-waving .b-lines { opacity: 1; }

/* talking: mouth chatters, head nods (own layer, so actions still play) */
.is-talking .b-face .b-mouth, .is-talking .b-tongue { opacity: 0; }
.is-talking .b-talk { animation: b-chatter .28s linear infinite; }
.is-talking .b-head-talk { animation: b-nod .56s ease-in-out infinite; }

/* thinking: loading dots in the checkbox, glowing antenna */
.is-thinking .b-check { opacity: 0; }
.is-thinking .b-dots circle { animation: b-dot 1s ease-in-out infinite; }
.is-thinking .b-dots circle:nth-child(2) { animation-delay: .15s; }
.is-thinking .b-dots circle:nth-child(3) { animation-delay: .3s; }
.is-thinking .b-ball { animation: b-glow .7s ease-in-out infinite alternate; }
.is-thinking .b-head-act { transform: rotate(-3deg); }

/* oops: trips over her own charging cable */
.is-oops .b-cable { animation: b-cable 2.3s ease-in-out; }
.is-oops .b-tilt { animation: b-trip 2.3s var(--b-smooth); }
.is-oops .b-leg-r { animation: b-snag 2.3s var(--b-smooth); }
.is-oops .b-arm-r { animation: b-flail-r 2.3s var(--b-smooth); }
.is-oops .b-arm-l { animation: b-flail-l 2.3s var(--b-smooth); }
.is-oops .b-antenna-act { animation: b-boing 1.4s .4s ease-out; }
.is-oops .b-screen-content { animation: b-glitch 2.3s linear; }
.is-oops .b-sweat { animation: b-sweat 2.3s ease-in; }

/* happy: squash, hop, stretch, settle + checkmark redraw */
.is-happy .b-jump { animation: b-hop 1s var(--b-smooth); }
.is-happy .b-antenna-act { animation: b-boing 1s .25s ease-out; }
.is-happy .b-check { animation: b-draw .5s .1s ease-out both; }
.is-happy .b-lines { opacity: 1; }

/* giggle: shoulders shake, arms pull in */
.is-giggle .b-tilt { animation: b-giggle 1.5s ease-in-out; }
.is-giggle .b-arm-r-pose { transform: rotate(70deg); }
.is-giggle .b-arm-l-pose { transform: rotate(-20deg); }
.is-giggle .b-head-act { transform: rotate(6deg); }

/* sarcastic: head tilt, eyebrow twitch */
.is-sarcastic .b-head-act { transform: rotate(-7deg); }
.is-sarcastic .b-brow { animation: b-brow 1.1s .2s ease-in-out; }
.is-sarcastic .b-arm-r-pose { transform: rotate(25deg); }

/* really?: slow eye roll + tilt the other way */
.is-really .b-look { animation: b-roll 1.3s ease-in-out; }
.is-really .b-head-act { transform: rotate(5deg); }

/* silly: head wiggle, tongue out, little kick */
.is-silly .b-head-act { animation: b-wiggle 1.5s ease-in-out; }
.is-silly .b-leg-r { animation: b-sidekick 1.5s var(--b-smooth); }

/* sad: everything droops (held pose, glides in/out) */
.is-sad .b-antenna-act { transform: rotate(-32deg); }
.is-sad .b-head-act { transform: rotate(-5deg); }
.is-sad .b-arm-r-pose { transform: rotate(70deg); }

/* sleeping: head droops, z's float up */
.is-sleeping .b-head-act { transform: rotate(-8deg); }
.is-sleeping .b-antenna-act { transform: rotate(-20deg); }
.is-sleeping .b-arm-r-pose { transform: rotate(70deg); }
.is-sleeping .b-zzz { opacity: 1; }
.is-sleeping .b-zzz text { animation: b-zzz 2.4s ease-out infinite; }
.is-sleeping .b-zzz text:nth-child(2) { animation-delay: .8s; }
.is-sleeping .b-zzz text:nth-child(3) { animation-delay: 1.6s; }

/* walking: alternating legs, swinging arms, bouncy steps */
.is-walking .b-leg-l { animation: b-step .7s ease-in-out infinite; }
.is-walking .b-leg-r { animation: b-step .7s -.35s ease-in-out infinite; }
.is-walking .b-arm-r-pose { transform: rotate(60deg); }
.is-walking .b-arm-r { animation: b-swing .7s ease-in-out infinite; }
.is-walking .b-arm-l { animation: b-swing .7s -.35s ease-in-out infinite; }
.is-walking .b-jump { animation: b-stride .35s ease-in-out infinite; }

/* celebrate: dance party (arms up via poses, motion via inner layers) */
.is-celebrate .b-jump { animation: b-hop .8s var(--b-smooth) infinite; }
.is-celebrate .b-arm-l-pose { transform: rotate(55deg); }
.is-celebrate .b-fore-l { animation: b-pump-l .8s ease-in-out infinite; }
.is-celebrate .b-fore-r { animation: b-wave 1.6s ease-in-out infinite; }
.is-celebrate .b-head-act { animation: b-wiggle 1.6s ease-in-out infinite; }
.is-celebrate .b-ball { animation: b-glow .4s ease-in-out infinite alternate; }
.is-celebrate .b-lines { opacity: 1; }

/* ------------------------------------------------------------ keyframes */

@keyframes b-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes b-shadow { 0%, 100% { transform: scaleX(1); opacity: .45; } 50% { transform: scaleX(.9); opacity: .3; } }
@keyframes b-sway { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-2deg); } 70% { transform: rotate(1.5deg); } }
@keyframes b-wobble { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(8deg); } }
@keyframes b-blink { 0%, 92%, 100% { transform: scaleY(1); } 94% { transform: scaleY(.1); } 96% { transform: scaleY(1); } }
@keyframes b-scan { 0%, 70% { transform: translateY(0); opacity: 0; } 75% { opacity: .35; } 100% { transform: translateY(72px); opacity: 0; } }

@keyframes b-crt {
  0% { transform: scale(.02, .02); opacity: 0; }
  12% { transform: scale(1, .02); opacity: 1; }
  30% { transform: scale(1, 1.12); }
  45% { transform: scale(1, .94); }
  60%, 100% { transform: scale(1, 1); }
}
@keyframes b-flash { 0% { opacity: 0; } 12% { opacity: .95; } 45%, 100% { opacity: 0; } }
@keyframes b-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes b-glow { from { transform: scale(1); fill: var(--b-mint); } to { transform: scale(1.18); fill: #D6F5E4; } }
/* antenna follow-through: springy overshoot that settles */
@keyframes b-boing { 0%, 100% { transform: none; } 20% { transform: rotate(-16deg); } 45% { transform: rotate(11deg); } 65% { transform: rotate(-5deg); } 82% { transform: rotate(2deg); } }

@keyframes b-wave {
  0%, 100% { transform: none; }
  12% { transform: rotate(-22deg); }
  26% { transform: rotate(18deg); }
  40% { transform: rotate(-22deg); }
  54% { transform: rotate(18deg); }
  68% { transform: rotate(-16deg); }
  84% { transform: rotate(5deg); }
}
@keyframes b-backkick { 0%, 100% { transform: none; } 22%, 72% { transform: rotate(34deg); } 85% { transform: rotate(-4deg); } }
@keyframes b-lean { 0%, 100% { transform: none; } 22%, 72% { transform: rotate(-3deg); } }

@keyframes b-chatter { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes b-nod { 0%, 100% { transform: none; } 50% { transform: rotate(-1.6deg); } }
@keyframes b-dot { 0%, 100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-4px); } }

@keyframes b-cable {
  0% { opacity: 0; transform: translateX(90px); }
  12%, 82% { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(110px); }
}
@keyframes b-trip {
  0%, 12% { transform: none; }
  22% { transform: translateX(10px) rotate(14deg); }
  34% { transform: translateX(-6px) rotate(-9deg); }
  46% { transform: translateX(3px) rotate(5deg); }
  60% { transform: rotate(-2deg); }
  74%, 100% { transform: none; }
}
@keyframes b-snag { 0%, 12% { transform: none; } 20% { transform: rotate(-34deg); } 32% { transform: rotate(12deg); } 48% { transform: rotate(-3deg); } 60%, 100% { transform: none; } }
@keyframes b-flail-r { 0%, 14% { transform: none; } 24% { transform: rotate(40deg); } 34% { transform: rotate(-12deg); } 46% { transform: rotate(25deg); } 60% { transform: rotate(6deg); } 72%, 100% { transform: none; } }
@keyframes b-flail-l { 0%, 14% { transform: none; } 24% { transform: rotate(70deg); } 34% { transform: rotate(15deg); } 46% { transform: rotate(45deg); } 60% { transform: rotate(-5deg); } 72%, 100% { transform: none; } }
@keyframes b-glitch {
  0%, 20% { transform: none; opacity: 1; }
  21% { transform: translateX(-4px) skewX(8deg); opacity: .6; }
  24% { transform: translateX(4px) skewX(-6deg); opacity: 1; }
  27% { transform: translateY(-2px); opacity: .7; }
  30%, 100% { transform: none; opacity: 1; }
}
@keyframes b-sweat { 0%, 15% { opacity: 0; transform: translateY(-4px); } 25%, 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(12px); } }

/* anticipation squash → leap → landing squash → settle */
@keyframes b-hop {
  0%, 100% { transform: none; }
  15% { transform: translateY(3px) scale(1.06, .93); }
  40% { transform: translateY(-26px) scale(.95, 1.06); }
  62% { transform: translateY(0) scale(1.07, .92); }
  80% { transform: translateY(-3px) scale(.98, 1.02); }
}
@keyframes b-giggle {
  0%, 100% { transform: none; }
  10% { transform: rotate(-2.5deg); } 20% { transform: rotate(2.5deg) translateY(-2px); }
  30% { transform: rotate(-2.5deg); } 40% { transform: rotate(2.5deg) translateY(-2px); }
  50% { transform: rotate(-2deg); } 60% { transform: rotate(2deg) translateY(-1px); }
  70% { transform: rotate(-1.5deg); } 80% { transform: rotate(1deg); } 90% { transform: rotate(-.5deg); }
}
@keyframes b-brow { 0%, 100% { transform: none; } 15%, 35% { transform: translateY(-4px) rotate(-4deg); } 25% { transform: translateY(-1px); } 55% { transform: translateY(-4px) rotate(-4deg); } 70% { transform: none; } }
@keyframes b-roll {
  0%, 100% { transform: none; }
  25% { transform: translate(4px, -5px); }
  50% { transform: translate(-1px, -7px); }
  75% { transform: translate(-5px, -4px); }
}
@keyframes b-wiggle {
  0%, 100% { transform: none; }
  12% { transform: rotate(-7deg); } 30% { transform: rotate(7deg); } 48% { transform: rotate(-6deg); }
  66% { transform: rotate(5deg); } 84% { transform: rotate(-2deg); }
}
@keyframes b-sidekick { 0%, 100% { transform: none; } 25%, 65% { transform: rotate(-28deg); } 80% { transform: rotate(4deg); } }
@keyframes b-zzz { 0% { opacity: 0; transform: translate(0, 6px) scale(.6); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(8px, -14px) scale(1.15); } }
@keyframes b-step { 0%, 100% { transform: none; } 25% { transform: rotate(16deg); } 75% { transform: rotate(-16deg); } }
@keyframes b-swing { 0%, 100% { transform: none; } 25% { transform: rotate(-14deg); } 75% { transform: rotate(14deg); } }
@keyframes b-stride { 0%, 100% { transform: none; } 50% { transform: translateY(-4px); } }
@keyframes b-pump-l { 0%, 100% { transform: none; } 50% { transform: rotate(35deg); } }

@media (prefers-reduced-motion: reduce) {
  .bayan, .bayan * { animation: none !important; transition: none !important; }
}