/*
  character3d.css
  A CSS-only (no images, no libraries) cartoon-humanoid engineer: a handful
  of rounded cuboids (head/torso/arms/legs) each built from 3 visible faces
  (front/top/side) via nested divs with transform-style: preserve-3d, plus
  simple flat facial features (eyes/mouth/hair) and hands/feet so it reads
  as a person rather than a stack of blocks. Faces are flat-shaded via
  brightness() shifts (not smooth gradients/lighting) to stay in the same
  low-fi retro register as the rest of the UI.

  Replaces the v1 emoji sprite inside #character-sprite (see index.html).
  #character-sprite itself keeps its existing bob/shake/glow treatment from
  sprite.css — filters and 2D transforms on an ancestor compose fine with
  the 3D transforms on its descendants.
*/

.char3d-scene {
  width: 100%;
  height: 140px;
  perspective: 480px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}

/* Handles horizontal "walking across the scene" (vacation / resignation
   exit) as a plain 2D translate, kept separate from .char3d's fixed 3D
   view-angle rotation so the two transforms never clobber each other. */
.char3d-walker {
  position: relative;
  transition: transform 1.1s ease-in-out;
}

.char3d-walker--away {
  transform: translateX(150px);
}

[data-state="RESIGNED"] .char3d-walker {
  transform: translateX(150px);
  transition-duration: 1.6s;
}

.char3d {
  position: relative;
  width: 110px;
  height: 122px;
  transform-style: preserve-3d;
  transform: rotateX(6deg) rotateY(-18deg);
}

/* --- Generic 3-face cuboid system --------------------------------------- */
.char3d__part {
  position: absolute;
  transform-style: preserve-3d;
}

.char3d__face {
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid rgba(0, 0, 0, 0.3);
  background: var(--part-color, var(--color-accent-2));
  border-radius: var(--face-radius, 6px);
}

.char3d__face--front {
  width: var(--w);
  height: var(--h);
  transform: translateZ(calc(var(--d) / 2));
}

.char3d__face--top {
  width: var(--w);
  height: var(--d);
  transform-origin: top;
  transform: rotateX(90deg) translateY(calc(var(--d) / -2));
  filter: brightness(1.25);
}

.char3d__face--side {
  width: var(--d);
  height: var(--h);
  left: auto;
  right: 0;
  transform-origin: right;
  transform: rotateY(90deg) translateX(calc(var(--d) / 2));
  filter: brightness(0.65);
}

/* --- Head: rounded, with hair + a simple face --------------------------- */
.char3d__head {
  --w: 32px;
  --h: 32px;
  --d: 28px;
  --part-color: #e8b98a;
  --face-radius: 14px;
  width: var(--w);
  height: var(--h);
  top: 0;
  left: calc(50% - 16px);
  transform-origin: top center;
}

.char3d__hair {
  position: absolute;
  top: -3px;
  left: -1px;
  right: -1px;
  height: 15px;
  background: #3a2a1e;
  border-radius: 12px 12px 4px 4px;
}

.char3d__eye {
  position: absolute;
  top: 17px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #241a12;
  transition: height 0.2s ease, border-radius 0.2s ease;
}

.char3d__eye--left {
  left: 8px;
}

.char3d__eye--right {
  right: 8px;
}

.char3d__mouth {
  position: absolute;
  top: 22px;
  left: 50%;
  width: 12px;
  height: 5px;
  transform: translateX(-50%);
  border: 2px solid #241a12;
  border-top: none;
  border-left: none;
  border-right: none;
  border-radius: 0 0 8px 8px;
  transition: all 0.2s ease;
}

/* --- Torso: softened corners, "hoodie" tone ----------------------------- */
.char3d__torso {
  --w: 50px;
  --h: 48px;
  --d: 24px;
  --part-color: #3a4a7a;
  --face-radius: 10px;
  width: var(--w);
  height: var(--h);
  top: 30px;
  left: calc(50% - 25px);
}

/* --- Arms: capsule-ish, with a small hand at the end -------------------- */
.char3d__arm {
  --w: 11px;
  --h: 36px;
  --d: 11px;
  --part-color: #33406b;
  --face-radius: 6px;
  width: var(--w);
  height: var(--h);
  top: 34px;
  transform-origin: top center;
  transition: transform 0.4s ease-in-out;
}

.char3d__arm--left {
  left: calc(50% - 25px - 11px - 6px);
}

.char3d__arm--right {
  left: calc(50% + 25px + 6px);
}

.char3d__hand {
  position: absolute;
  bottom: -6px;
  left: 50%;
  width: 11px;
  height: 11px;
  transform: translateX(-50%) translateZ(4px);
  border-radius: 50%;
  background: #e8b98a;
  border: 1px solid rgba(0, 0, 0, 0.3);
}

/* --- Legs: rounded, with a small shoe at the end ------------------------ */
.char3d__leg {
  --w: 13px;
  --h: 32px;
  --d: 12px;
  --part-color: #232c4a;
  --face-radius: 5px;
  width: var(--w);
  height: var(--h);
  top: 74px;
  transform-origin: top center;
  transition: transform 0.4s ease-in-out;
}

.char3d__leg--left {
  left: calc(50% - 13px - 2px);
}

.char3d__leg--right {
  left: calc(50% + 2px);
}

.char3d__shoe {
  position: absolute;
  bottom: -5px;
  left: 50%;
  width: 18px;
  height: 8px;
  transform: translateX(-50%) translateZ(4px);
  border-radius: 5px;
  background: #17140f;
  border: 1px solid rgba(0, 0, 0, 0.3);
}

/* ==================================================================
   Idle / typing motion — subtle, always-on, speed varies by state
   ================================================================== */
@keyframes char3d-type-left {
  0%, 100% { transform: rotateX(-6deg); }
  50%      { transform: rotateX(10deg); }
}

@keyframes char3d-type-right {
  0%, 100% { transform: rotateX(10deg); }
  50%      { transform: rotateX(-6deg); }
}

.char3d__arm--left {
  animation: char3d-type-left 1.6s ease-in-out infinite;
}

.char3d__arm--right {
  animation: char3d-type-right 1.6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .char3d__arm--left,
  .char3d__arm--right,
  .char3d__leg--left,
  .char3d__leg--right {
    animation: none;
  }
}

/* ==================================================================
   Walking — legs/arms swing in a gait cycle. Driven for exactly the
   duration of a walk transition by ui/characterPose.js's setAwayPose
   (JS-timed class), and continuously while RESIGNED (permanent exit,
   nothing needs it to stop once the modal takes over).
   ================================================================== */
@keyframes char3d-walk-a {
  0%, 100% { transform: rotateX(-28deg); }
  50%      { transform: rotateX(28deg); }
}

@keyframes char3d-walk-b {
  0%, 100% { transform: rotateX(28deg); }
  50%      { transform: rotateX(-28deg); }
}

.char3d-walker--walking .char3d__leg--left,
[data-state="RESIGNED"] .char3d__leg--left {
  animation: char3d-walk-a 0.45s ease-in-out infinite;
}

.char3d-walker--walking .char3d__leg--right,
[data-state="RESIGNED"] .char3d__leg--right {
  animation: char3d-walk-b 0.45s ease-in-out infinite;
}

.char3d-walker--walking .char3d__arm--left {
  animation: char3d-walk-b 0.45s ease-in-out infinite;
}

.char3d-walker--walking .char3d__arm--right {
  animation: char3d-walk-a 0.45s ease-in-out infinite;
}

/* ==================================================================
   Per-state poses + facial expressions
   ================================================================== */

/* IN_THE_ZONE — faster, confident typing; bright happy eyes/smile */
[data-state="IN_THE_ZONE"] .char3d__arm--left {
  animation-name: char3d-type-left;
  animation-duration: 0.7s;
}
[data-state="IN_THE_ZONE"] .char3d__arm--right {
  animation-name: char3d-type-right;
  animation-duration: 0.7s;
}
[data-state="IN_THE_ZONE"] .char3d__mouth {
  width: 16px;
  height: 7px;
}

/* BURNOUT — head down, worried furrowed mouth, slower arms */
[data-state="BURNOUT"] .char3d__head {
  transform: rotateX(22deg);
}
[data-state="BURNOUT"] .char3d__arm--left,
[data-state="BURNOUT"] .char3d__arm--right {
  animation-duration: 2.6s;
}
[data-state="BURNOUT"] .char3d__mouth {
  border-radius: 8px 8px 0 0;
  border-top: 2px solid #241a12;
  border-bottom: none;
  height: 4px;
}
[data-state="BURNOUT"] .char3d__eye {
  height: 2px;
  border-radius: 2px;
}

/* LINKEDIN — head tilted down/aside as if looking at a phone, smirk */
[data-state="LINKEDIN"] .char3d__head {
  transform: rotateX(18deg) rotateZ(-8deg);
}
[data-state="LINKEDIN"] .char3d__arm--right {
  transform: rotateX(-38deg);
  animation: none;
}
[data-state="LINKEDIN"] .char3d__mouth {
  width: 8px;
  transform: translateX(-20%);
}

/* ZOMBIE — slumped head, slow limp arms, flat drowsy eyes/mouth */
[data-state="ZOMBIE"] .char3d__head {
  transform: rotateX(30deg);
}
[data-state="ZOMBIE"] .char3d__arm--left,
[data-state="ZOMBIE"] .char3d__arm--right {
  animation-duration: 3.4s;
}
[data-state="ZOMBIE"] .char3d {
  filter: saturate(0.4);
}
[data-state="ZOMBIE"] .char3d__eye {
  height: 1px;
}
[data-state="ZOMBIE"] .char3d__mouth {
  height: 7px;
  border-radius: 6px;
  border: 2px solid #241a12;
}

/* RESIGNED — walks off (see .char3d-walker rule above), flat sad mouth */
[data-state="RESIGNED"] .char3d__head {
  transform: rotateX(20deg);
}
[data-state="RESIGNED"] .char3d {
  filter: grayscale(1) brightness(0.7);
}
[data-state="RESIGNED"] .char3d__mouth {
  height: 2px;
  border-radius: 2px;
  border-top: 2px solid #241a12;
  border-bottom: none;
}

/* ==================================================================
   Transient action poses — toggled briefly by ui/characterPose.js in
   sync with the existing action-fx icon overlay (see actionFx.js).
   ================================================================== */
.char3d--pose-drink .char3d__arm--right {
  animation: none;
  transform: rotateX(-70deg);
}

.char3d--pose-eat .char3d__arm--left {
  animation: none;
  transform: rotateX(-55deg);
}

.char3d--pose-sleep .char3d__head {
  transform: rotateX(35deg);
}
.char3d--pose-sleep .char3d__arm--left,
.char3d--pose-sleep .char3d__arm--right {
  animation: none;
  transform: rotateX(0deg);
}
.char3d--pose-sleep .char3d__eye {
  height: 1px;
}

.char3d--pose-cheer .char3d__arm--left,
.char3d--pose-cheer .char3d__arm--right {
  animation: none;
  transform: rotateX(-100deg);
}
.char3d--pose-cheer .char3d__mouth {
  width: 16px;
  height: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .char3d-walker {
    transition: none;
  }
}