/* The LeDream chibi (js/chibi.js), shared by the team page and the screen
   companions. --u is CSS px per model unit, set on each .fig by chibi.js;
   jumps and sways scale with it so small figures move in proportion. */
.fig, .squash, .move, .joint, .rot, .box {
  position: absolute; left: 0; top: 0; transform-style: preserve-3d;
}
.face {
  position: absolute; background-repeat: no-repeat;
  image-rendering: pixelated; backface-visibility: hidden;
}
/* Shading is baked into the textures (js/chibi.js prepare): no CSS filters on faces */

/* ---------- speech bubble ---------- */
.bubble {
  position: absolute; z-index: 2; left: 50%; top: 6px; max-width: calc(100% - 24px); width: max-content;
  padding: 6px 12px; border-radius: 14px;
  background: #fff; color: #12302d; border: 3px solid var(--teal-900);
  font-weight: 800; font-size: 14.5px; line-height: 1.3; text-align: center;
  transform: translateX(-50%) scale(0); transform-origin: 50% 120%; opacity: 0;
  transition: transform 0.18s ease-in, opacity 0.18s ease-in;
  pointer-events: none;
}
.bubble::after {
  content: ""; position: absolute; left: 50%; bottom: -11px; margin-left: -8px;
  border: 8px solid transparent; border-top-color: var(--teal-900); border-bottom: 0;
}
.bubble.show {
  transform: translateX(-50%) scale(1); opacity: 1;
  transition: transform 0.35s cubic-bezier(0.2, 1.7, 0.4, 1), opacity 0.1s;
}

/* ---------- slime bounce on click ---------- */
.boing .squash { animation: slime 0.9s ease-out; }
.boing .shadow { animation: slime-shadow 0.9s ease-out; }
@keyframes slime {
  0% { transform: none; }
  12% { transform: scale3d(1.32, 0.62, 1.32); }
  32% { transform: translateY(calc(var(--u, 8px) * -5.75)) scale3d(0.8, 1.3, 0.8); }
  50% { transform: translateY(0) scale3d(1.22, 0.74, 1.22); }
  64% { transform: scale3d(0.9, 1.12, 0.9); }
  78% { transform: scale3d(1.06, 0.94, 1.06); }
  90% { transform: scale3d(0.98, 1.02, 0.98); }
  100% { transform: none; }
}
@keyframes slime-shadow {
  0%, 100% { transform: none; }
  12% { transform: scaleX(1.3); }
  32% { transform: scale(0.6); opacity: 0.5; }
  50% { transform: scaleX(1.25); opacity: 1; }
}

/* ---------- idle animations ---------- */
/* !important: the shorthands below would otherwise reset the delay to 0 */
.fig .move, .fig .rot { animation-delay: var(--delay, 0s) !important; }

/* wave: right arm up, waving */
.anim-wave .armR { animation: wave-arm 1.4s ease-in-out infinite; }
.anim-wave .head { animation: tilt 2.8s ease-in-out infinite; }
@keyframes wave-arm { 0%, 100% { transform: rotateZ(165deg); } 50% { transform: rotateZ(125deg); } }
@keyframes tilt { 0%, 100% { transform: rotateZ(-6deg); } 50% { transform: rotateZ(6deg); } }

/* hop: little jumps on the spot */
.anim-hop .move { animation: hop 0.9s infinite; }
.anim-hop .armR { animation: flap-r 0.9s infinite; }
.anim-hop .armL { animation: flap-l 0.9s infinite; }
@keyframes hop {
  0%, 100% { transform: scale3d(1.08, 0.9, 1.08); animation-timing-function: ease-out; }
  15% { transform: none; animation-timing-function: ease-out; }
  50% { transform: translateY(calc(var(--u, 8px) * -2.5)); animation-timing-function: ease-in; }
  85% { transform: none; }
}
@keyframes flap-r { 0%, 100% { transform: rotateZ(15deg); } 50% { transform: rotateZ(55deg); } }
@keyframes flap-l { 0%, 100% { transform: rotateZ(-15deg); } 50% { transform: rotateZ(-55deg); } }

/* walk: right leg and left arm swing forward while the other pair swings back.
   Two mirrored keyframes: "reverse" on a symmetric swing plays the same motion,
   which moved both legs together. */
.anim-walk .legR, .anim-walk .armL { animation: swing-a 0.8s ease-in-out infinite; }
.anim-walk .legL, .anim-walk .armR { animation: swing-b 0.8s ease-in-out infinite; }
.anim-walk .move { animation: bob 0.4s ease-in-out infinite; }
@keyframes swing-a { 0%, 100% { transform: rotateX(32deg); } 50% { transform: rotateX(-32deg); } }
@keyframes swing-b { 0%, 100% { transform: rotateX(-32deg); } 50% { transform: rotateX(32deg); } }

/* sit: on the ground with legs stretched forward, like the server's player figures.
   Legs turn 90° at the hip; the body drops 5 units so they rest on the floor. */
.anim-sit .move { transform: translateY(calc(var(--u, 8px) * 5)); }
.anim-sit .legR { animation: kick-r 2.6s ease-in-out infinite; }
.anim-sit .legL { animation: kick-l 2.6s ease-in-out infinite; }
.anim-sit .armR { transform: rotateZ(10deg) rotateX(38deg); }
.anim-sit .armL { transform: rotateZ(-10deg) rotateX(38deg); }
.anim-sit .head { animation: sit-look 6s ease-in-out infinite; }
@keyframes kick-r {
  0%, 60%, 100% { transform: rotateY(-12deg) rotateX(90deg); }
  75% { transform: rotateY(-12deg) rotateX(76deg); }
}
@keyframes kick-l {
  0%, 20%, 50%, 100% { transform: rotateY(12deg) rotateX(90deg); }
  35% { transform: rotateY(12deg) rotateX(76deg); }
}
@keyframes sit-look {
  0%, 30%, 100% { transform: rotateX(-4deg); }
  45%, 70% { transform: rotateY(-20deg) rotateX(-6deg); }
}
@keyframes bob { 0%, 100% { transform: none; } 50% { transform: translateY(calc(var(--u, 8px) * -0.4)); } }

/* spin: slow turntable */
.anim-spin .move { animation: spin 6s linear infinite; }
.anim-spin .armR { transform: rotateZ(12deg); }
.anim-spin .armL { transform: rotateZ(-12deg); }
@keyframes spin { to { transform: rotateY(360deg); } }

/* nod: two nods, then a pause */
.anim-nod .head { animation: nod 2.4s ease-in-out infinite; }
.anim-nod .armR { animation: sway-r 2.4s ease-in-out infinite; }
.anim-nod .armL { animation: sway-l 2.4s ease-in-out infinite; }
@keyframes nod {
  0%, 45%, 100% { transform: none; }
  12%, 32% { transform: rotateX(-18deg); }
  22% { transform: rotateX(4deg); }
}
@keyframes sway-r { 0%, 100% { transform: rotateX(8deg); } 50% { transform: rotateX(-8deg); } }
@keyframes sway-l { 0%, 100% { transform: rotateX(-8deg); } 50% { transform: rotateX(8deg); } }

/* dance: side to side, arms taking turns */
.anim-dance .move { animation: groove 1.2s ease-in-out infinite; }
.anim-dance .armR { animation: dance-r 1.2s ease-in-out infinite; }
.anim-dance .armL { animation: dance-l 1.2s ease-in-out infinite; }
.anim-dance .head { animation: tilt 1.2s ease-in-out infinite; }
@keyframes groove {
  0%, 100% { transform: translateX(calc(var(--u, 8px) * -0.75)) rotateZ(-7deg); }
  50% { transform: translateX(calc(var(--u, 8px) * 0.75)) rotateZ(7deg); }
}
@keyframes dance-r { 0%, 100% { transform: rotateZ(150deg); } 50% { transform: rotateZ(20deg); } }
@keyframes dance-l { 0%, 100% { transform: rotateZ(-20deg); } 50% { transform: rotateZ(-150deg); } }

/* look: looking around */
.anim-look .head { animation: look 4s ease-in-out infinite; }
@keyframes look {
  0%, 15%, 100% { transform: none; }
  30%, 45% { transform: rotateY(-45deg); }
  65%, 80% { transform: rotateY(40deg) rotateX(-8deg); }
}

/* cheer: both arms pumping */
.anim-cheer .armR { animation: cheer-r 0.7s ease-in-out infinite; }
.anim-cheer .armL { animation: cheer-l 0.7s ease-in-out infinite; }
.anim-cheer .move { animation: bob 0.7s ease-in-out infinite; }
@keyframes cheer-r { 0%, 100% { transform: rotateZ(170deg); } 50% { transform: rotateZ(135deg); } }
@keyframes cheer-l { 0%, 100% { transform: rotateZ(-170deg); } 50% { transform: rotateZ(-135deg); } }

@media (prefers-reduced-motion: reduce) {
  .fig .move, .fig .rot { animation: none !important; }
  .boing .squash, .boing .shadow { animation-duration: 0.01s; }
}

/* Blockbench models (js/bbmodel.js): bones and cubes are positioned like chibi parts */
.fig .bbroot, .fig .bone, .fig .cube { position: absolute; left: 0; top: 0; transform-style: preserve-3d; }

/* struggle: picked up by the visitor (js/companions.js), kicking and flailing */
.anim-struggle .move { animation: wriggle 0.22s ease-in-out infinite; }
.anim-struggle .legR { animation: kick-fast-a 0.24s ease-in-out infinite; }
.anim-struggle .legL { animation: kick-fast-b 0.24s ease-in-out infinite; }
.anim-struggle .armR { animation: flail-r 0.3s ease-in-out infinite; }
.anim-struggle .armL { animation: flail-l 0.3s ease-in-out infinite; }
.anim-struggle .head { animation: shake 0.26s ease-in-out infinite; }
@keyframes wriggle { 0%, 100% { transform: rotateZ(-9deg); } 50% { transform: rotateZ(9deg); } }
@keyframes kick-fast-a { 0%, 100% { transform: rotateX(40deg); } 50% { transform: rotateX(-35deg); } }
@keyframes kick-fast-b { 0%, 100% { transform: rotateX(-35deg); } 50% { transform: rotateX(40deg); } }
@keyframes flail-r { 0%, 100% { transform: rotateZ(150deg); } 50% { transform: rotateZ(95deg); } }
@keyframes flail-l { 0%, 100% { transform: rotateZ(-95deg); } 50% { transform: rotateZ(-150deg); } }
@keyframes shake { 0%, 100% { transform: rotateY(-14deg); } 50% { transform: rotateY(14deg); } }