/* REFERENCE
 * - ui/companion/kellari-conductor.js (the only thing that adds these classes)
 * - ui/overlay/mote-avatar.js (the rig: data-mote-slot="hat" / "pendant")
 * - ui/overlay/mote-avatar-pendant.js (the pendant SVG that pulses)
 * - ui/overlay/mote-tools.js (.mote-toolarm — the arm+tool pivot at 50px 55px,
 *   set inline, that the two strikes swing)
 * - ui/mote-animation/mote-anim-combat.css (house rules this file obeys)
 * - docs/MOTE-KELLARI-V3-2026-09.md (§4 — one item, one animation)
 * - docs/MOTE-KELLARI-V32-TOOLS-2026-09.md (§2 — sword slash 400 ms, club slam 500 ms)
 *
 * Sammalkellari item motion. Every cellar drop earns its OWN move, so the
 * loot is legible in the replay without a caption:
 *   hiirenkorvat  → .anim-hat-twitch    (500 ms, the player takes a hit)
 *   sammalkruunu  → .anim-hat-sway      (900 ms, start of a round)
 *   sammalriipus  → .anim-pendant-pulse (600 ms, a heal lands)
 * and every carved weapon its own strike, on the player's `phys` hits:
 *   puumiekka     → .anim-strike-slash  (400 ms, cut at 55 %)
 *   puunuija      → .anim-strike-slam   (500 ms, impact at 55 %, held — the
 *                                        conductor freezes the stage + shakes it there)
 * The axe has no arm move of its own: its body lunge is the boss-farm
 * attack, and its cleave flash lives on the VICTIM (mote-kellari-stage.css).
 *
 * HARD RULES (same as mote-anim-combat.css): transform and opacity only,
 * filter is banned, one class + one keyframe each. The hat/pendant classes
 * land on the SLOT groups, not on .mote-hat — the landing-settle physics own
 * that node and two animations on one element is how hats teleport. The
 * strikes land on .mote-toolarm, which nothing else animates on a fight seat.
 */

/* ── Hiirenkorvat: the ears flick back when something connects ───── */
[data-mote-slot="hat"].anim-hat-twitch {
  transform-box: view-box;
  transform-origin: 50px 30px;
  animation: mk-hat-twitch 500ms cubic-bezier(0.34, 1.56, 0.64, 1) 1;
}
@keyframes mk-hat-twitch {
  0%   { transform: rotate(0) scaleY(1); }
  18%  { transform: rotate(-7deg) scaleY(0.88); }
  42%  { transform: rotate(5deg) scaleY(1.07); }
  68%  { transform: rotate(-2.5deg) scaleY(0.97); }
  100% { transform: rotate(0) scaleY(1); }
}

/* ── Sammalkruunu: the crown sways as the mote squares up ────────── */
[data-mote-slot="hat"].anim-hat-sway {
  transform-box: view-box;
  transform-origin: 50px 30px;
  animation: mk-hat-sway 900ms ease-in-out 1;
}
@keyframes mk-hat-sway {
  0%   { transform: rotate(0) translateY(0); }
  25%  { transform: rotate(4deg) translateY(-0.6px); }
  55%  { transform: rotate(-3.2deg) translateY(0.4px); }
  80%  { transform: rotate(1.4deg) translateY(-0.2px); }
  100% { transform: rotate(0) translateY(0); }
}

/* ── Sammalriipus: the moss drop swells when it heals you ────────── */
[data-mote-slot="pendant"].anim-pendant-pulse {
  transform-box: view-box;
  transform-origin: 50px 58px;
  animation: mk-pendant-pulse 600ms ease-out 1;
}
@keyframes mk-pendant-pulse {
  0%   { transform: scale(1); opacity: 1; }
  30%  { transform: scale(1.45); opacity: 0.85; }
  60%  { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* ── Puumiekka: raise, cut down through the strike side, settle.
      Positive rotation is clockwise in SVG, so the +X arm swings DOWN
      toward the enemy — the cut lands at 55 %. ── */
.mote-toolarm.anim-strike-slash { animation: mk-strike-slash 400ms cubic-bezier(0.4, 0, 0.6, 1) 1; }
@keyframes mk-strike-slash {
  0%   { transform: rotate(0deg); }
  28%  { transform: rotate(-34deg); }
  55%  { transform: rotate(44deg); }
  74%  { transform: rotate(30deg); }
  100% { transform: rotate(0deg); }
}

/* ── Puunuija: a bigger raise, a heavier drop, and the head STAYS DOWN
      through 55–70 % (the hit-stop beat the conductor freezes on) before
      the arm comes back up. ── */
.mote-toolarm.anim-strike-slam { animation: mk-strike-slam 500ms ease-in-out 1; }
@keyframes mk-strike-slam {
  0%   { transform: rotate(0deg) translateY(0); }
  36%  { transform: rotate(-58deg) translateY(-2px); animation-timing-function: cubic-bezier(0.7, 0, 1, 0.6); }
  55%  { transform: rotate(40deg) translateY(1px); animation-timing-function: linear; }
  70%  { transform: rotate(38deg) translateY(1px); }
  100% { transform: rotate(0deg) translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  [data-mote-slot="hat"].anim-hat-twitch,
  [data-mote-slot="hat"].anim-hat-sway,
  [data-mote-slot="pendant"].anim-pendant-pulse,
  .mote-toolarm.anim-strike-slash,
  .mote-toolarm.anim-strike-slam { animation: none !important; }
}