/* =====================================================================
   MUSY — reactions (styles). API and markup: header of citron-reactions.js.
   Everything is scoped under .ck; classes rx-, keyframes rx-, custom
   property --rx-size (icon height, default 32px).
   ===================================================================== */

/* Icon box: height from --rx-size; square for sticker, 3:2 for bulle. */
.ck .rx {
  display: inline-block;
  flex: none;
  width: var(--rx-size, 32px);
  height: var(--rx-size, 32px);
  line-height: 0;
  vertical-align: middle;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}
.ck .rx--bulle { width: auto; aspect-ratio: 3 / 2; }
.ck .rx > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ck .rx text { font-family: var(--ck-font); font-weight: 700; }

/* =====================================================================
   Optional floating burst: pop in, then three short hops up while it fades.
   Position the element with left / top (its centre lands there); --dx is
   the sideways drift. Each move is ≤ 260 ms ease-out; transform + opacity.
   ===================================================================== */
.ck .rx-float {
  position: absolute;
  z-index: 1;
  translate: -50% -50%;
  line-height: 0;
  pointer-events: none;
  animation: rx-float 1300ms both;
}
@keyframes rx-float {
  0% { opacity: 0; transform: translate(0, 10px) scale(.6); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); }
  17% { opacity: 1; transform: translate(0, 0) scale(1); }
  27% { opacity: 1; transform: translate(0, 0) scale(1); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); }
  47% { opacity: 1; transform: translate(calc(var(--dx, 0px) * .35), -18px) scale(1); }
  54% { opacity: 1; transform: translate(calc(var(--dx, 0px) * .35), -18px) scale(1); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); }
  74% { opacity: 1; transform: translate(calc(var(--dx, 0px) * .7), -36px) scale(1); }
  80% { opacity: 1; transform: translate(calc(var(--dx, 0px) * .7), -36px) scale(1); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); }
  100% { opacity: 0; transform: translate(var(--dx, 0px), -54px) scale(.92); }
}
@keyframes rx-fade {
  0% { opacity: 0; animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); }
  17% { opacity: 1; }
  80% { opacity: 1; animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ck .rx-float { animation-name: rx-fade; }
}