/* AI Worker staff faces: resting gaze, slower varied blinks, calm look-around. */
@property --shift-x {
  syntax: '<length>';
  inherits: true;
  initial-value: 0px;
}

@property --shift-y {
  syntax: '<length>';
  inherits: true;
  initial-value: 0px;
}

@property --eyelid {
  syntax: '<number>';
  inherits: true;
  initial-value: 1;
}

/* Blink cycles ~4.5–7.5s; mostly one blink per cycle (Matthew keeps a light double). */
@keyframes staff-blink-matthew {
  0%, 78%, 100% { --eyelid: 1; }
  80%, 84% { --eyelid: 0.02; }
  86%, 90% { --eyelid: 0.02; }
}

@keyframes staff-blink-mark {
  0%, 74%, 100% { --eyelid: 1; }
  76%, 82% { --eyelid: 0.02; }
}

@keyframes staff-blink-luke {
  0%, 68%, 100% { --eyelid: 1; }
  70%, 76% { --eyelid: 0.02; }
}

@keyframes staff-blink-john {
  0%, 81%, 100% { --eyelid: 1; }
  83%, 89% { --eyelid: 0.02; }
}

@keyframes staff-blink-phoebe {
  0%, 71%, 100% { --eyelid: 1; }
  73%, 79% { --eyelid: 0.02; }
}

@keyframes staff-look-matthew {
  0%, 14%, 100% { --shift-x: 0px; --shift-y: 0px; }
  18%, 26% { --shift-x: 5px; --shift-y: -4px; }
  40%, 48% { --shift-x: -4px; --shift-y: 3px; }
  62%, 70% { --shift-x: 4px; --shift-y: 4px; }
  84%, 92% { --shift-x: -3px; --shift-y: -2px; }
}

@keyframes staff-look-mark {
  0%, 12%, 100% { --shift-x: 0px; --shift-y: 0px; }
  16%, 24% { --shift-x: -5px; --shift-y: 2px; }
  38%, 46% { --shift-x: 4px; --shift-y: -4px; }
  60%, 68% { --shift-x: -2px; --shift-y: 4px; }
  82%, 90% { --shift-x: 3px; --shift-y: -2px; }
}

@keyframes staff-look-luke {
  0%, 13%, 100% { --shift-x: 0px; --shift-y: 0px; }
  17%, 25% { --shift-x: 4px; --shift-y: -4px; }
  39%, 47% { --shift-x: 5px; --shift-y: 2px; }
  61%, 69% { --shift-x: -3px; --shift-y: 3px; }
  83%, 91% { --shift-x: 2px; --shift-y: -3px; }
}

@keyframes staff-look-john {
  0%, 15%, 100% { --shift-x: 0px; --shift-y: 0px; }
  19%, 27% { --shift-x: -5px; --shift-y: 1px; }
  41%, 49% { --shift-x: 3px; --shift-y: -4px; }
  63%, 71% { --shift-x: 5px; --shift-y: 3px; }
  85%, 93% { --shift-x: -3px; --shift-y: -2px; }
}

@keyframes staff-look-phoebe {
  0%, 11%, 100% { --shift-x: 0px; --shift-y: 0px; }
  15%, 23% { --shift-x: -4px; --shift-y: -3px; }
  37%, 45% { --shift-x: 3px; --shift-y: 3px; }
  59%, 67% { --shift-x: -2px; --shift-y: 2px; }
  81%, 89% { --shift-x: 4px; --shift-y: -3px; }
}

.staff-face svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.staff-face .staff-eye {
  transform: translate(calc(var(--gaze-x, 0px) + var(--shift-x)), calc(var(--gaze-y, 0px) + var(--shift-y))) scaleY(var(--eyelid));
  transform-box: fill-box;
  transform-origin: center;
  animation:
    var(--blink-name) var(--blink-dur, 6s) ease-in-out infinite,
    var(--look-name) var(--look-dur, 9s) ease-in-out infinite;
  animation-delay: var(--blink-delay, 0s), var(--look-delay, 0s);
}

.staff-face--matthew .staff-eye-l { --gaze-x: -5px; --gaze-y: 0px; }
.staff-face--matthew .staff-eye-r { --gaze-x: -5px; --gaze-y: 0px; }
.staff-face--matthew {
  --blink-name: staff-blink-matthew;
  --blink-dur: 6.4s;
  --blink-delay: 0.35s;
  --look-name: staff-look-matthew;
  --look-dur: 9.2s;
  --look-delay: 0.6s;
}

.staff-face--mark .staff-eye-l { --gaze-x: 3px; --gaze-y: -4px; }
.staff-face--mark .staff-eye-r { --gaze-x: 3px; --gaze-y: -4px; }
.staff-face--mark {
  --blink-name: staff-blink-mark;
  --blink-dur: 5.1s;
  --blink-delay: 1.65s;
  --look-name: staff-look-mark;
  --look-dur: 8.6s;
  --look-delay: 2.4s;
}

.staff-face--luke .staff-eye-l { --gaze-x: -3px; --gaze-y: 4px; }
.staff-face--luke .staff-eye-r { --gaze-x: -3px; --gaze-y: 4px; }
.staff-face--luke {
  --blink-name: staff-blink-luke;
  --blink-dur: 7.3s;
  --blink-delay: 3.1s;
  --look-name: staff-look-luke;
  --look-dur: 9.8s;
  --look-delay: 1.2s;
}

.staff-face--john .staff-eye-l { --gaze-x: 5px; --gaze-y: 1px; }
.staff-face--john .staff-eye-r { --gaze-x: 5px; --gaze-y: 1px; }
.staff-face--john {
  --blink-name: staff-blink-john;
  --blink-dur: 4.7s;
  --blink-delay: 0.85s;
  --look-name: staff-look-john;
  --look-dur: 8.9s;
  --look-delay: 3.5s;
}

.staff-face--phoebe .staff-eye-l { --gaze-x: 3px; --gaze-y: -3px; }
.staff-face--phoebe .staff-eye-r { --gaze-x: -2px; --gaze-y: 3px; }
.staff-face--phoebe {
  --blink-name: staff-blink-phoebe;
  --blink-dur: 6.9s;
  --blink-delay: 2.15s;
  --look-name: staff-look-phoebe;
  --look-dur: 10.2s;
  --look-delay: 4.1s;
}

@media (prefers-reduced-motion: reduce) {
  .staff-face .staff-eye {
    animation: none !important;
    --shift-x: 0px;
    --shift-y: 0px;
    --eyelid: 1;
    transform: translate(var(--gaze-x, 0px), var(--gaze-y, 0px)) scaleY(1);
  }
}