/* Character rigs: floaty idle, blink, posture, mood faces. Transforms only. */

.rig {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: breathe var(--dur, 3.8s) var(--ease-float) var(--ph, 0s) infinite;
  translate: 0 calc(var(--slump) * 3.5px);
  rotate: calc(var(--slump) * -2deg);
  transition: translate var(--mood-dur) ease, rotate var(--mood-dur) ease;
}
.arms-rig { transform-origin: 50% 0%; }
/* posture: the whole rig sinks and tips, the head drops a little further */
.char .head { transform-box: fill-box; transform-origin: 50% 92%; rotate: calc(var(--slump) * -4deg); translate: 0 calc(var(--slump) * 1.5px); transition: rotate var(--mood-dur) ease, translate var(--mood-dur) ease; }
.char .rig { translate: 0 calc(var(--slump) * 4.5px); rotate: calc(var(--slump) * -2.5deg); }
.arms-root .rig { translate: 0 calc(var(--slump) * 2px); rotate: 0deg; }
@keyframes breathe {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  38%      { transform: translateY(-1.3px) rotate(.35deg); }
  62%      { transform: translateY(-1.05px) rotate(-.2deg); }
}

/* blink: the eye group squeezes; a timer per character picks random 2–7s gaps */
.blink { transform-box: fill-box; transform-origin: 50% 50%; transition: transform .07s ease-out; }
.blink.shut { transform: scaleY(.08); }

/* faces by mood: the world sets mood-* ; parts opt in */
.lids { opacity: 0; transition: opacity .5s ease; }
.m { opacity: 0; transition: opacity .35s ease; }
.m-a { opacity: 1; }
.mood-flat .m-a, .mood-draining .m-a, .mood-bleeding .m-a { opacity: 0; }
.mood-flat .m-f { opacity: 1; }
.mood-draining .m-d, .mood-bleeding .m-d { opacity: 1; }
.mood-draining .lids, .mood-bleeding .lids { opacity: 1; }
.mood-flat .lids { opacity: .55; }

/* reaction overrides set by the show for a beat */
.char.react-cheer .m { opacity: 0; } .char.react-cheer .m-o { opacity: 1; }
.char.react-cheer .lids { opacity: 0; }
.char.react-cheer .rig { animation-duration: 1.6s; }
.char.react-sigh .m { opacity: 0; } .char.react-sigh .m-d { opacity: 1; }
.char.react-sigh .lids { opacity: 1; }
.char.react-sigh .head { rotate: -7deg; translate: 0 2.5px; }

/* departed */
.char.gone { opacity: 0; transition: opacity .8s ease; }
[data-arms].gone { opacity: 0; transition: opacity .8s ease; }

/* ---- the departure variant: standing rig, box, gait ---- */
.walker { transform-box: view-box; transform-origin: 0 0; opacity: 0; }
.walker .lids { opacity: 1; }
.walker .m-a { opacity: 0; } .walker .m-d { opacity: 1; }
.walker .brows { transform-box: fill-box; transform-origin: 50% 50%; transform: rotate(0deg); }
.walker .box, .walker .box-arms { opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; transform: translateY(14px) scale(.55); transition: opacity .7s ease, transform .9s var(--ease-out); }
.walker.carrying .box, .walker.carrying .box-arms { opacity: 1; transform: none; }
.walker.carrying .arms-down { opacity: 0; transition: opacity .4s ease; }
.walker .leg { transform-box: fill-box; transform-origin: 50% 0%; }
.walker.walking .leg-r { animation: leg-swing .62s var(--ease-float) infinite; }
.walker.walking .leg-l { animation: leg-swing .62s var(--ease-float) -.31s infinite; }
.walker.walking .rig { animation: walk-bob .62s var(--ease-float) infinite; }
@keyframes leg-swing { 0%, 100% { transform: rotate(-14deg); } 50% { transform: rotate(14deg); } }
@keyframes walk-bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-1.6px) rotate(1deg); } }
.walker .head { transform-box: fill-box; transform-origin: 50% 70%; transition: transform .6s var(--ease-float); }
.walker.looking-back .head { transform: scaleX(-1) rotate(5deg); }
.walker.looking-back .rig { animation-play-state: paused; }
.walker.left { visibility: hidden; }

/* ---- joiners: the standing rig again, no box, happy, walking in from the door ---- */
.joiner { transform-box: view-box; transform-origin: 0 0; opacity: 0; }
.joiner .box, .joiner .box-arms { display: none; }
.joiner .lids { opacity: 0; }                      /* newcomers are fresh whatever the studio's mood */
.joiner .m { opacity: 0; } .joiner .m-a { opacity: 1; }
.joiner .leg { transform-box: fill-box; transform-origin: 50% 0%; }
.joiner.walking .leg-r { animation: leg-swing .62s var(--ease-float) infinite; }
.joiner.walking .leg-l { animation: leg-swing .62s var(--ease-float) -.31s infinite; }
.joiner.walking .rig { animation: walk-bob .62s var(--ease-float) infinite; }
.joiner.settled .rig { animation: breathe var(--dur, 3.8s) var(--ease-float) var(--ph, 0s) infinite; }

/* her chair keeps turning, her screen stays dark, her plant is in the box */
.unit .chair { transform-box: fill-box; transform-origin: 50% 50%; }
.unit.spinning .chair { animation: chair-spin 2.9s linear infinite; }
.unit.spinning .spin-dash { opacity: .75; transition: opacity 1s ease .8s; }
@keyframes chair-spin { 0% { transform: scaleX(1); } 50% { transform: scaleX(-1); } 100% { transform: scaleX(1); } }
.unit .screen-content { transition: opacity .6s ease; }
.unit.leaving .screen-content { opacity: 0; }
.unit.taken .desk-plant { opacity: 0; transition: opacity .3s ease; }

@media (prefers-reduced-motion: reduce) {
  .rig, .blink, .walker .leg, .joiner .leg, .unit.spinning .chair { animation: none; transition: none; }
  .walker .box, .walker .box-arms, .walker .head { transition: none; }
}