/* ============================================================
   UNJOBS — PIXEL CREW: Characters, Animations, Effects
   ============================================================ */
.section, .hero, .footer { position: relative; }

#pixWorld {
  position: absolute;
  inset: 0 0 auto 0;
  pointer-events: none;
  z-index: 39;
  overflow: hidden;
}
#pixWorld * { pointer-events: none; }

.pix {
  position: absolute;
  width: 54px;
  height: 72px;
  will-change: transform;
  top: 0; left: 0;
  transform: translate(0,0);
}
.pix svg {
  width: 100%; height: 100%;
  display: block;
  image-rendering: pixelated;
  shape-rendering: crispEdges;
  overflow: visible;
}

/* Character palettes */
.pix-hero  .c-skin{fill:#F2D7B5} .pix-hero  .c-hair{fill:#1A2A1F} .pix-hero  .c-shirt{fill:var(--accent)} .pix-hero  .c-pants{fill:#1F2D24} .pix-hero  .c-shoe{fill:#0D1310} .pix-hero  .c-eye{fill:#0D1310}
.pix-coder .c-skin{fill:#E8C9AB} .pix-coder .c-hair{fill:#3B2616} .pix-coder .c-shirt{fill:#D85C2A} .pix-coder .c-pants{fill:#2A2118} .pix-coder .c-shoe{fill:#0D1310} .pix-coder .c-eye{fill:#0D1310} .pix-coder .c-glass{fill:#0D1310}
.pix-suit  .c-skin{fill:#F2D7B5} .pix-suit  .c-hair{fill:#0D1310} .pix-suit  .c-shirt{fill:#1F2D24} .pix-suit  .c-pants{fill:#0D1310} .pix-suit  .c-shoe{fill:#0D1310} .pix-suit  .c-eye{fill:#0D1310} .pix-suit  .c-tie{fill:var(--accent)}
.pix-cat   .c-fur{fill:#2A1F18}  .pix-cat   .c-belly{fill:#E8C9AB} .pix-cat   .c-eye{fill:var(--accent)}

/* === SKELETON ANIMATIONS === */
.pix .body { transform-origin: 27px 54px; transform-box: fill-box; }
.pix .head { transform-origin: 27px 21px; transform-box: fill-box; }
.pix .arm-l { transform-origin: 21px 27px; transform-box: fill-box; }
.pix .arm-r { transform-origin: 33px 27px; transform-box: fill-box; }
.pix .leg-l { transform-origin: 22.5px 42px; transform-box: fill-box; }
.pix .leg-r { transform-origin: 31.5px 42px; transform-box: fill-box; }

/* IDLE */
@keyframes pix-breathe { 0%,100% { transform: translateY(0) scaleY(1);} 50% { transform: translateY(-0.5px) scaleY(1.02);} }
@keyframes pix-arm-idle { 0%,100% { transform: rotate(2deg);} 50% { transform: rotate(-3deg);} }
.s-idle .body { animation: pix-breathe 1.6s ease-in-out infinite; }
.s-idle .arm-l { animation: pix-arm-idle 2.2s ease-in-out infinite; }
.s-idle .arm-r { animation: pix-arm-idle 2.4s ease-in-out infinite reverse; }

/* WALK */
@keyframes pix-walk-leg-l { 0%,100% { transform: rotate(28deg);} 50% { transform: rotate(-28deg);} }
@keyframes pix-walk-leg-r { 0%,100% { transform: rotate(-28deg);} 50% { transform: rotate(28deg);} }
@keyframes pix-walk-arm-l { 0%,100% { transform: rotate(-22deg);} 50% { transform: rotate(22deg);} }
@keyframes pix-walk-arm-r { 0%,100% { transform: rotate(22deg);} 50% { transform: rotate(-22deg);} }
@keyframes pix-walk-bob { 0%,50%,100% { transform: translateY(0);} 25%,75% { transform: translateY(-1.5px);} }
.s-walk .body  { animation: pix-walk-bob 0.4s linear infinite; }
.s-walk .leg-l { animation: pix-walk-leg-l 0.4s linear infinite; }
.s-walk .leg-r { animation: pix-walk-leg-r 0.4s linear infinite; }
.s-walk .arm-l { animation: pix-walk-arm-l 0.4s linear infinite; }
.s-walk .arm-r { animation: pix-walk-arm-r 0.4s linear infinite; }

/* RUN */
.s-run .body  { animation: pix-walk-bob 0.22s linear infinite; transform: rotate(-6deg); }
.s-run .leg-l { animation: pix-walk-leg-l 0.22s linear infinite; }
.s-run .leg-r { animation: pix-walk-leg-r 0.22s linear infinite; }
.s-run .arm-l { animation: pix-walk-arm-l 0.22s linear infinite; }
.s-run .arm-r { animation: pix-walk-arm-r 0.22s linear infinite; }

/* JUMP */
.s-jump .leg-l { transform: rotate(-32deg); }
.s-jump .leg-r { transform: rotate(22deg); }
.s-jump .arm-l { transform: rotate(-150deg); }
.s-jump .arm-r { transform: rotate(160deg); }
.s-jump .body  { transform: translateY(-1px) scaleY(1.05); }

/* FALL */
@keyframes pix-windmill-l { 0% { transform: rotate(-90deg);} 100% { transform: rotate(270deg);} }
@keyframes pix-windmill-r { 0% { transform: rotate(90deg);} 100% { transform: rotate(450deg);} }
.s-fall .arm-l { animation: pix-windmill-l 0.5s linear infinite; }
.s-fall .arm-r { animation: pix-windmill-r 0.5s linear infinite; }
.s-fall .leg-l { transform: rotate(-4deg); }
.s-fall .leg-r { transform: rotate(4deg); }

/* CROUCH */
.s-crouch .body  { transform: translateY(2px) scaleY(0.85); }
.s-crouch .leg-l { transform: rotate(-12deg) translateY(2px); }
.s-crouch .leg-r { transform: rotate(12deg) translateY(2px); }
.s-crouch .arm-l { transform: rotate(-30deg); }
.s-crouch .arm-r { transform: rotate(30deg); }

/* LAND */
@keyframes pix-squash { 0% { transform: scaleY(0.7) scaleX(1.15) translateY(4px);} 60% { transform: scaleY(1.05) scaleX(0.95) translateY(-1px);} 100% { transform: scaleY(1) scaleX(1) translateY(0);} }
.s-land .body { animation: pix-squash 0.32s ease-out; }

/* WAVE */
@keyframes pix-wave { 0%,100% { transform: rotate(-130deg);} 50% { transform: rotate(-160deg);} }
.s-wave .arm-r { animation: pix-wave 0.4s ease-in-out infinite; }
.s-wave .body  { animation: pix-breathe 1.2s ease-in-out infinite; }

/* CHEER */
@keyframes pix-cheer-bounce { 0%,100% { transform: translateY(0);} 50% { transform: translateY(-5px);} }
.s-cheer .body  { animation: pix-cheer-bounce 0.34s ease-in-out infinite; }
.s-cheer .arm-l { transform: rotate(-150deg); }
.s-cheer .arm-r { transform: rotate(150deg); }

/* POINT */
.s-point .arm-r { transform: rotate(95deg); }
.s-point .arm-l { transform: rotate(-8deg); }
.s-point .body  { animation: pix-breathe 1.4s ease-in-out infinite; }

/* SIT */
.s-sit .leg-l { transform: rotate(-72deg); }
.s-sit .leg-r { transform: rotate(72deg); }
.s-sit .body  { transform: translateY(8px); }
.s-sit .arm-l { transform: rotate(-15deg); }
.s-sit .arm-r { transform: rotate(15deg); }
.s-sit .head  { transform: rotate(8deg); }

/* LOOK UP */
.s-look .head  { transform: rotate(-22deg); }
.s-look .arm-l { transform: rotate(-15deg); }
.s-look .body  { animation: pix-breathe 2s ease-in-out infinite; }

/* HANGING */
.s-hang .arm-l { transform: rotate(-150deg); }
.s-hang .arm-r { transform: rotate(150deg); }
.s-hang .leg-l { transform: rotate(-8deg); }
.s-hang .leg-r { transform: rotate(8deg); }
.s-hang .body  { animation: pix-breathe 0.8s ease-in-out infinite; }

/* SLIDE */
.s-slide .body  { transform: rotate(-25deg) translateY(2px); }
.s-slide .leg-l { transform: rotate(-30deg); }
.s-slide .leg-r { transform: rotate(-20deg); }
.s-slide .arm-l { transform: rotate(-120deg); }
.s-slide .arm-r { transform: rotate(20deg); }

/* SPIN */
@keyframes pix-spin { 0% { transform: rotate(0);} 100% { transform: rotate(360deg);} }
.s-spin { animation: pix-spin 0.5s linear; }

/* SHAKE */
@keyframes pix-shake-arm { 0%,100% { transform: rotate(70deg);} 50% { transform: rotate(85deg);} }
.s-shake .arm-r { animation: pix-shake-arm 0.2s ease-in-out infinite; }
.s-shake .arm-l { transform: rotate(-10deg); }
.s-shake .body  { animation: pix-breathe 0.8s ease-in-out infinite; }

/* TYPE */
@keyframes pix-type-l { 0%,100% { transform: rotate(-100deg) translateY(0);} 50% { transform: rotate(-100deg) translateY(2px);} }
@keyframes pix-type-r { 0%,100% { transform: rotate(100deg) translateY(0);} 33% { transform: rotate(100deg) translateY(2px);} }
.s-type .arm-l { animation: pix-type-l 0.18s ease-in-out infinite; }
.s-type .arm-r { animation: pix-type-r 0.22s ease-in-out infinite; }
.s-type .head  { transform: rotate(8deg); }
.s-type .body  { transform: translateY(1px); }

/* THINK */
.s-think .arm-r { transform: rotate(-110deg); }
.s-think .head  { animation: pix-think-head 2s ease-in-out infinite; }
@keyframes pix-think-head { 0%,100% { transform: rotate(-6deg);} 50% { transform: rotate(6deg);} }

/* DANCE */
@keyframes pix-dance-body { 0%,100% { transform: translateY(0) rotate(-4deg);} 50% { transform: translateY(-3px) rotate(4deg);} }
@keyframes pix-dance-arm-l { 0%,100% { transform: rotate(-120deg);} 50% { transform: rotate(-60deg);} }
@keyframes pix-dance-arm-r { 0%,100% { transform: rotate(60deg);} 50% { transform: rotate(120deg);} }
.s-dance .body  { animation: pix-dance-body 0.4s ease-in-out infinite; }
.s-dance .arm-l { animation: pix-dance-arm-l 0.4s ease-in-out infinite; }
.s-dance .arm-r { animation: pix-dance-arm-r 0.4s ease-in-out infinite; }

/* Facing */
.pix.face-l > svg { transform: scaleX(-1); }

/* Eye blink */
@keyframes pix-blink { 0%,92%,100% { transform: scaleY(1);} 94%,98% { transform: scaleY(0.1);} }
.pix .eyes { animation: pix-blink 4s steps(1) infinite; transform-origin: 27px 18px; transform-box: fill-box; }

/* Shadow under feet */
.pix .shadow { fill: rgba(13,19,16,0.18); }
.s-jump .shadow, .s-fall .shadow { opacity: 0.3; transform: scale(0.6); transform-origin: 27px 69px; transform-box: fill-box; }

/* Speech bubble */
.pix-bubble {
  position: absolute;
  bottom: 100%;
  left: 60%;
  transform: translateY(-2px);
  background: var(--ink);
  color: var(--paper);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 10px;
  white-space: nowrap;
  font-weight: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms, transform 180ms;
  border: 2px solid var(--ink);
  border-radius: 3px;
}
.pix-bubble::after {
  content: "";
  position: absolute;
  left: 8px; top: 100%;
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--ink);
}
.pix-bubble.show { opacity: 1; transform: translateY(-6px); }
.pix-bubble.thought {
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink);
}
.pix-bubble.thought::after {
  border-top-color: var(--paper);
  filter: drop-shadow(0 -1px 0 var(--ink));
}

/* Effect particles */
.pix-fx {
  position: absolute;
  pointer-events: none;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-deep);
}
@keyframes fx-float-up {
  0%   { transform: translate(-50%, 0) scale(0.6); opacity: 0; }
  20%  { opacity: 1; transform: translate(-50%, -8px) scale(1.1); }
  100% { transform: translate(-50%, -32px) scale(0.9); opacity: 0; }
}
.pix-fx { animation: fx-float-up 1s ease-out forwards; }

.pix-dust {
  position: absolute;
  width: 4px; height: 4px;
  background: var(--accent-deep);
  opacity: 0.5;
  border-radius: 1px;
  pointer-events: none;
}
@keyframes dust-poof {
  0%   { transform: translate(0,0) scale(1);   opacity: 0.7; }
  100% { transform: translate(var(--dx,-12px), var(--dy,-6px)) scale(0); opacity: 0; }
}
.pix-dust { animation: dust-poof 0.55s ease-out forwards; }

/* Heart particle */
.pix-heart {
  position: absolute;
  width: 8px; height: 7px;
  pointer-events: none;
  opacity: 0;
}
@keyframes heart-rise {
  0% { opacity: 0; transform: translate(0,0) scale(0.5);}
  20% { opacity: 1; transform: translate(2px,-8px) scale(1);}
  100% { opacity: 0; transform: translate(-4px,-32px) scale(0.7);}
}
.pix-heart { animation: heart-rise 1.4s ease-out forwards; }

/* Lightbulb */
.pix-bulb {
  position: absolute;
  width: 10px; height: 12px;
  pointer-events: none;
  opacity: 0;
}
@keyframes bulb-pop {
  0% { opacity: 0; transform: translate(-50%,4px) scale(0.4);}
  20% { opacity: 1; transform: translate(-50%,-6px) scale(1.2);}
  60% { transform: translate(-50%,-12px) scale(1);}
  100% { opacity: 0; transform: translate(-50%,-22px) scale(0.9);}
}
.pix-bulb { animation: bulb-pop 1.4s ease-out forwards; }