/* voi stickers — built-in SVG sticker packs + text stickers (js/chat/stickers.js).
   Everything is namespaced .stk* / .tstk*. */

.stk, .tstk {
  display: inline-block; flex: none; line-height: 0; vertical-align: middle;
  transform-origin: 50% 90%; -webkit-user-select: none; user-select: none;
}
.stk > svg, .tstk > svg {
  display: block; width: 100%; height: 100%; overflow: visible;
  filter: drop-shadow(0 2px 3px rgba(91, 44, 63, .25));
}

/* the white "die-cut" border: the whole drawing again, underneath, fat white strokes */
.stk-cut, .stk-cut * {
  fill: #fff !important; stroke: #fff !important; stroke-width: 11px !important;
  stroke-dasharray: none !important; fill-opacity: 1 !important;
  stroke-linecap: round; stroke-linejoin: round;
}

.stk-font, .tstk-font {
  font-family: "Mochiy Pop One", "M PLUS Rounded 1c", ui-rounded, sans-serif;
  font-weight: 800; font-synthesis: none; paint-order: stroke fill;
  stroke-linejoin: round; letter-spacing: 0;
}

/* ---- whole-sticker motions (only when animate=true → .stk-anim) ---- */
.stk-m-bounce { animation: stk-bounce 1.8s cubic-bezier(.3, .7, .4, 1) infinite; }
.stk-m-wiggle { animation: stk-wiggle 1.6s ease-in-out infinite; }
.stk-m-pulse  { animation: stk-pulse 1.4s ease-in-out infinite; transform-origin: 50% 50%; }
.stk-m-float  { animation: stk-float 3s ease-in-out infinite; }
.stk-m-spin   { animation: stk-spin 6s linear infinite; transform-origin: 50% 50%; }

/* ---- little moving bits inside the art ---- */
.stk-anim .stk-blink, .stk-anim .stk-beat, .stk-anim .stk-rise, .stk-anim .stk-twinkle,
.stk-anim .stk-zz, .stk-anim .stk-wave, .stk-anim .stk-drip, .stk-anim .stk-steam, .stk-anim .stk-spin {
  transform-box: fill-box; transform-origin: 50% 50%;
}
.stk-anim .stk-blink   { animation: stk-blink 4.2s infinite; }
.stk-anim .stk-beat    { animation: stk-pulse 1.1s ease-in-out infinite; }
.stk-anim .stk-rise    { animation: stk-rise 2.6s ease-out infinite; }
.stk-anim .stk-twinkle { animation: stk-twinkle 1.8s ease-in-out infinite; }
.stk-anim .stk-zz      { animation: stk-zz 2.4s ease-out infinite; }
.stk-anim .stk-wave    { animation: stk-wave 1s ease-in-out infinite; transform-origin: 20% 100%; }
.stk-anim .stk-drip    { animation: stk-drip 1.8s ease-in infinite; }
.stk-anim .stk-steam   { animation: stk-steam 2.2s ease-out infinite; }
.stk-anim .stk-spin    { animation: stk-spin 9s linear infinite; }

@keyframes stk-bounce {
  0%, 60%, 100% { transform: translateY(0) scale(1, 1); }
  20% { transform: translateY(-7%) scale(.97, 1.03); }
  40% { transform: translateY(0) scale(1.05, .95); }
  50% { transform: translateY(-1.5%) scale(1, 1); }
}
@keyframes stk-wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-5deg); } 75% { transform: rotate(5deg); } }
@keyframes stk-pulse  { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes stk-float  { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5%); } }
@keyframes stk-spin   { to { transform: rotate(360deg); } }
@keyframes stk-blink  { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes stk-rise   { 0% { transform: translateY(4px) scale(.7); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(-12px) scale(1); opacity: 0; } }
@keyframes stk-twinkle { 0%, 100% { transform: scale(1) rotate(0); opacity: 1; } 50% { transform: scale(.6) rotate(20deg); opacity: .6; } }
@keyframes stk-zz     { 0% { transform: translate(0, 4px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(4px, -8px); opacity: 0; } }
@keyframes stk-wave   { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(14deg); } }
@keyframes stk-drip   { 0% { transform: translateY(-2px); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(9px); opacity: 0; } }
@keyframes stk-steam  { 0% { transform: translateY(3px); opacity: 0; } 40% { opacity: .9; } 100% { transform: translateY(-8px); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .stk, .stk *, .tstk, .tstk * { animation: none !important; }
}