/* Meaning-matched animation.
   Each keyframe set depicts the meaning of one word. Nothing here is
   decorative: if a word has no honest enactment it gets no animation at all,
   because motion that does not carry meaning competes with the word for the
   same attention. */

.enacting {
  position: relative;
  display: inline-block;
  animation-duration: 0.9s;
  animation-timing-function: var(--ease-out);
  animation-iteration-count: var(--enact-repeat, 1);
  will-change: transform;
}

.enact-companion {
  position: absolute;
  top: -0.15em;
  right: -0.45em;
  font-size: 0.45em;
  animation: companion-in 0.4s var(--ease-bounce);
  pointer-events: none;
}
@keyframes companion-in {
  from { opacity: 0; transform: scale(0.4) translateY(6px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* --- Verbs -------------------------------------------------------------- */

.enact-jump  { animation-name: enact-jump; }
@keyframes enact-jump {
  0%, 100% { transform: translateY(0) scaleY(1); }
  20%      { transform: translateY(0) scaleY(0.8); }   /* crouch */
  55%      { transform: translateY(-38%) scaleY(1.12); }
  80%      { transform: translateY(0) scaleY(0.92); }
}

.enact-run { animation-name: enact-run; }
@keyframes enact-run {
  0%   { transform: translateX(-42%) scaleX(1); }
  100% { transform: translateX(42%) scaleX(1); }
}

.enact-walk { animation-name: enact-walk; animation-duration: 1.5s; }
@keyframes enact-walk {
  0%   { transform: translateX(-30%) rotate(-3deg); }
  25%  { transform: translateX(-15%) rotate(3deg); }
  50%  { transform: translateX(0) rotate(-3deg); }
  75%  { transform: translateX(15%) rotate(3deg); }
  100% { transform: translateX(30%) rotate(-3deg); }
}

.enact-dance { animation-name: enact-dance; }
@keyframes enact-dance {
  0%, 100% { transform: rotate(-14deg) translateY(0); }
  25%      { transform: rotate(0) translateY(-14%); }
  50%      { transform: rotate(14deg) translateY(0); }
  75%      { transform: rotate(0) translateY(-14%); }
}

/* Eyes close, body settles, 💤 floats up. */
.enact-sleep { animation-name: enact-sleep; animation-duration: 1.6s; }
@keyframes enact-sleep {
  0%   { transform: rotate(0) scale(1); }
  40%  { transform: rotate(-12deg) scale(0.95) translateY(6%); }
  100% { transform: rotate(-12deg) scale(0.92) translateY(8%); opacity: 0.75; }
}

/* The food travels up and vanishes — into the mouth. */
.enact-eat { animation-name: enact-eat; animation-duration: 1.1s; }
@keyframes enact-eat {
  0%   { transform: translateY(0) scale(1); opacity: 1; }
  60%  { transform: translateY(-28%) scale(0.72); opacity: 1; }
  100% { transform: translateY(-38%) scale(0.15); opacity: 0; }
}

.enact-drink { animation-name: enact-drink; animation-duration: 1.2s; }
@keyframes enact-drink {
  0%   { transform: rotate(0) translateY(0); }
  45%  { transform: rotate(-38deg) translateY(-14%); }
  85%  { transform: rotate(-38deg) translateY(-14%); }
  100% { transform: rotate(0) translateY(0); }
}

.enact-clap { animation-name: enact-clap; animation-duration: 0.45s; }
@keyframes enact-clap {
  0%, 100% { transform: scaleX(1); }
  50%      { transform: scaleX(0.62); }
}

.enact-swim { animation-name: enact-swim; animation-duration: 1.5s; }
@keyframes enact-swim {
  0%   { transform: translateX(-36%) translateY(0) rotate(-6deg); }
  50%  { transform: translateX(0) translateY(-10%) rotate(6deg); }
  100% { transform: translateX(36%) translateY(0) rotate(-6deg); }
}

.enact-sing { animation-name: enact-sing; }
@keyframes enact-sing {
  0%, 100% { transform: scale(1) rotate(0); }
  30%      { transform: scale(1.14) rotate(-6deg); }
  65%      { transform: scale(1.06) rotate(5deg); }
}

.enact-wash { animation-name: enact-wash; animation-duration: 1.1s; }
@keyframes enact-wash {
  0%, 100% { transform: rotate(0); }
  25%      { transform: rotate(-16deg) scale(1.05); }
  75%      { transform: rotate(16deg) scale(1.05); }
}

.enact-read { animation-name: enact-read; animation-duration: 1.4s; }
@keyframes enact-read {
  0%, 100% { transform: rotateY(0); }
  50%      { transform: rotateY(-32deg); }
}

/* --- Feelings ----------------------------------------------------------- */

.enact-bounce { animation-name: enact-bounce; }
@keyframes enact-bounce {
  0%, 100% { transform: translateY(0) scale(1); }
  40%      { transform: translateY(-26%) scale(1.08); }
  70%      { transform: translateY(0) scale(0.96); }
}

.enact-droop { animation-name: enact-droop; animation-duration: 1.3s; }
@keyframes enact-droop {
  0%   { transform: translateY(0) rotate(0) scale(1); }
  100% { transform: translateY(10%) rotate(-8deg) scale(0.93); }
}

.enact-shake { animation-name: enact-shake; animation-duration: 0.5s; }
@keyframes enact-shake {
  0%, 100% { transform: translateX(0) scale(1.06); }
  20%      { transform: translateX(-9%) scale(1.06); }
  50%      { transform: translateX(9%) scale(1.06); }
  80%      { transform: translateX(-5%) scale(1.06); }
}

.enact-beat { animation-name: enact-beat; animation-duration: 0.7s; }
@keyframes enact-beat {
  0%, 100% { transform: scale(1); }
  25%      { transform: scale(1.22); }
  45%      { transform: scale(1.02); }
  65%      { transform: scale(1.16); }
}

.enact-wobble { animation-name: enact-wobble; animation-duration: 0.7s; }
@keyframes enact-wobble {
  0%, 100% { transform: rotate(0) scale(1); }
  25%      { transform: rotate(-13deg) scale(1.08); }
  75%      { transform: rotate(13deg) scale(1.08); }
}

/* --- Nouns whose meaning is motion -------------------------------------- */

.enact-fall { animation-name: enact-fall; animation-duration: 1.4s; }
@keyframes enact-fall {
  0%   { transform: translateY(-45%); opacity: 0; }
  25%  { opacity: 1; }
  100% { transform: translateY(35%); opacity: 0.2; }
}

.enact-sway { animation-name: enact-sway; animation-duration: 1.6s; }
@keyframes enact-sway {
  0%, 100% { transform: translateX(0) rotate(-7deg); }
  50%      { transform: translateX(12%) rotate(7deg); }
}

.enact-twinkle { animation-name: enact-twinkle; animation-duration: 1.1s; }
@keyframes enact-twinkle {
  0%, 100% { transform: scale(1) rotate(0); filter: brightness(1); }
  50%      { transform: scale(1.22) rotate(18deg); filter: brightness(1.35); }
}

.enact-fly { animation-name: enact-fly; animation-duration: 1.6s; }
@keyframes enact-fly {
  0%   { transform: translate(-38%, 12%) rotate(-8deg); }
  50%  { transform: translate(0, -16%) rotate(0); }
  100% { transform: translate(38%, 12%) rotate(8deg); }
}

.enact-tick { animation-name: enact-tick; animation-duration: 1.2s; }
@keyframes enact-tick {
  0%, 100% { transform: rotate(-6deg); }
  50%      { transform: rotate(6deg); }
}

.enact-open { animation-name: enact-open; animation-duration: 1.2s; }
@keyframes enact-open {
  0%   { transform: perspective(320px) rotateY(0); }
  60%  { transform: perspective(320px) rotateY(-62deg); }
  100% { transform: perspective(320px) rotateY(-55deg); }
}

/* Reduced motion: base.css already flattens durations. The companion emoji
   still appears, so the meaning cue survives without the movement. */
@media (prefers-reduced-motion: reduce) {
  .enacting { animation: none !important; }
}