/* Planning officer: sizes, mood poses, animation, speech bubble.
   Only transform and opacity animate. Loops run only under .is-live (set by motion.idleLoop). */

.officer {
  --officer-w: 96px;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  min-width: 0;
}
.officer--sm { --officer-w: 52px; }
.officer--md { --officer-w: 96px; }
.officer--lg { --officer-w: 160px; }

.officer-svg {
  flex: none;
  width: var(--officer-w);
  height: auto;
  overflow: visible;
  display: block;
}
.officer-svg g {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

/* ---- variants: an element shows only in the moods named by its v-* classes ---- */
.officer .v { display: none; }
.officer[data-mood="idle"] .v-idle,
.officer[data-mood="thinking"] .v-thinking,
.officer[data-mood="happy"] .v-happy,
.officer[data-mood="sad"] .v-sad,
.officer[data-mood="shocked"] .v-shocked,
.officer[data-mood="celebrate"] .v-celebrate { display: inline; }

.officer .o-tick, .officer .o-sparkles, .officer .o-think, .officer .o-sweat { opacity: 0; }
.officer[data-mood="happy"] .o-tick,
.officer[data-mood="celebrate"] .o-tick,
.officer[data-mood="celebrate"] .o-sparkles,
.officer[data-mood="thinking"] .o-think,
.officer[data-mood="sad"] .o-sweat { opacity: 1; }
.officer .o-sparkles { display: none; }
.officer[data-mood="celebrate"] .o-sparkles { display: inline; }

/* ---- static poses ---- */
.officer .o-torso { transform-origin: 50% 100%; }
.officer .o-head { transform-origin: 50% 100%; transition: transform .3s ease-out; }
.officer[data-mood="sad"] .o-head { transform: translateY(4px) rotate(4deg); }
.officer[data-mood="sad"] .o-torso { transform: scaleY(.96); }
.officer[data-mood="thinking"] .o-head { transform: rotate(-3deg); }
.officer[data-mood="thinking"] .e-look { transform: translate(1.8px, -3px); }
.officer .o-hat { transform-origin: 50% 100%; transition: transform .18s cubic-bezier(.3, 1.8, .5, 1); }
.officer[data-mood="shocked"] .o-hat { transform: translateY(-9px) rotate(-8deg); }
.officer .e-open { transform-origin: 50% 50%; }
.officer.is-blink .e-open { transform: scaleY(.1); }
.officer[data-mood="sad"] .e-open { transform: translateY(1px) scaleY(.85); }
.officer[data-mood="sad"].is-blink .e-open { transform: translateY(1px) scaleY(.1); }
.officer .o-arm-l-up { transform-origin: 100% 100%; }
.officer .o-arm-r-up { transform-origin: 0 100%; }

/* ---- one-shot reactions (run on mood change) ---- */
.officer[data-mood="happy"] .o-fig { animation: o-jump .75s ease-out 1; }
.officer[data-mood="happy"] .o-tick, .officer[data-mood="celebrate"] .o-tick { animation: o-tick .45s cubic-bezier(.3, 1.8, .5, 1) .15s 1 backwards; }
.officer[data-mood="shocked"] .o-fig { animation: o-start .3s ease-out 1; }
.officer[data-mood="sad"] .o-sweat { animation: o-sweat 1.6s ease-in 1 both; }

/* ---- loops (only while on screen) ---- */
.officer.is-live .o-torso { animation: o-breathe 4s ease-in-out infinite; }
.officer.is-live .o-head { animation: o-bob 4s ease-in-out infinite; }
.officer.is-live[data-mood="celebrate"] .o-fig { animation: o-cele .5s ease-in-out infinite alternate; }
.officer.is-live[data-mood="celebrate"] .o-arm-l-up { animation: o-wave-l .5s ease-in-out infinite alternate; }
.officer.is-live[data-mood="celebrate"] .o-arm-r-up { animation: o-wave-r .5s ease-in-out infinite alternate; }
.officer.is-live .o-dot { animation: o-dot 1.5s ease-in-out infinite; animation-delay: calc(var(--i) * .25s); }
.officer.is-live .o-spark { animation: o-spark 1.2s ease-in-out infinite; animation-delay: calc(var(--i) * .22s); }
.officer.is-live[data-mood="sad"] .o-sweat { animation: o-sweat-loop 2.4s ease-in infinite; }

@keyframes o-breathe { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.025); } }
@keyframes o-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-.8px); } }
@keyframes o-jump {
  0% { transform: translateY(0) scale(1, 1); }
  15% { transform: translateY(0) scale(1.04, .94); }
  45% { transform: translateY(-16px) scale(.97, 1.04); }
  75% { transform: translateY(0) scale(1.04, .95); }
  100% { transform: translateY(0) scale(1, 1); }
}
@keyframes o-cele { from { transform: translateY(0); } to { transform: translateY(-8px); } }
@keyframes o-wave-l { from { transform: rotate(-6deg); } to { transform: rotate(5deg); } }
@keyframes o-wave-r { from { transform: rotate(6deg); } to { transform: rotate(-5deg); } }
@keyframes o-start { from { transform: scale(1.07); } to { transform: scale(1); } }
@keyframes o-tick { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes o-dot { 0%, 15% { opacity: .15; } 35%, 100% { opacity: 1; } }
@keyframes o-spark { 0%, 100% { transform: scale(.2) rotate(0); opacity: 0; } 50% { transform: scale(1) rotate(45deg); opacity: 1; } }
@keyframes o-sweat { from { transform: translateY(-4px); opacity: 0; } 40% { opacity: 1; } to { transform: translateY(0); opacity: 1; } }
@keyframes o-sweat-loop { 0% { transform: translateY(-4px); opacity: 0; } 25% { transform: translateY(0); opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(9px); opacity: 0; } }

/* ---- speech bubble ---- */
.officer-bubble {
  position: relative;
  align-self: flex-start;
  margin: 8% 0 0 8px;
  padding: 0;
  max-width: 0;
  overflow: hidden;
  border: 0 solid var(--ink);
  border-radius: 12px;
  background: var(--sheet);
  color: var(--ink);
  font-family: var(--f-body);
  font-weight: 600;
  font-size: var(--t-16);
  line-height: 1.35;
  opacity: 0;
  transform: scale(.92);
  transform-origin: 0 70%;
  transition: opacity .18s ease-out, transform .18s ease-out;
  pointer-events: none;
}
.officer-bubble.is-on {
  max-width: min(24ch, calc(100vw - var(--officer-w) - 56px));
  padding: 8px 12px;
  border-width: 2px;
  overflow: visible;
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
/* tail: ink triangle with a sheet triangle on top, pointing at the officer */
.officer-bubble.is-on::before,
.officer-bubble.is-on::after {
  content: "";
  position: absolute;
  left: -11px;
  bottom: 12px;
  border: 8px solid transparent;
  border-left-width: 0;
  border-right-color: var(--ink);
}
.officer-bubble.is-on::after {
  left: -7px;
  border-right-color: var(--sheet);
}
.officer--sm .officer-bubble { font-size: var(--t-14); }
.officer--sm .officer-bubble.is-on { padding: 6px 10px; }
.officer--lg .officer-bubble { font-size: var(--t-20); }
.officer--lg .officer-bubble.is-on { padding: 10px 16px; max-width: min(26ch, calc(100vw - var(--officer-w) - 56px)); }

/* lighter effects mode: no loops */
.officer--light * { animation: none !important; }

@media (prefers-reduced-motion: reduce) {
  .officer *, .officer-bubble { animation: none !important; transition: none !important; }
  .officer .o-dot, .officer .o-spark { opacity: 1; }
}