/* «Вдвоём» — анимированные стикеры (разметка: /js/stickers.js). */
.stk { width: 140px; height: 140px; display: inline-block; vertical-align: middle; line-height: 0;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.stk svg { width: 100%; height: 100%; overflow: visible; display: block; }
.stk.small { width: 72px; height: 72px; }

/* pivot = local origin of the animated group (its parent is translated to the pivot) */
.stk .a-wave, .stk .a-beat, .stk .a-rise, .stk .a-joyL, .stk .a-joyR, .stk .a-drop, .stk .a-zzz,
.stk .a-steam, .stk .a-pop, .stk .a-tw, .stk .a-tws, .stk .a-tw2, .stk .a-fsway, .stk .a-moon,
.stk .a-ember, .stk .a-recoil, .stk .a-conf, .stk .a-burst, .stk .a-wobble, .stk .a-spin, .stk .a-sunf,
.stk .a-drift, .stk .a-wave2, .stk .a-rsway, .stk .a-petal, .stk .a-floaty, .stk .a-gshadow, .stk .a-glow,
.stk .a-bounce { transform-box: view-box; transform-origin: 0 0; }
/* pivot = bottom centre of the group's own bounding box */
.stk .a-squash, .stk .a-sway, .stk .a-jiggle, .stk .a-breathe, .stk .a-huff,
.stk .a-fl1, .stk .a-fl2, .stk .a-fl3, .stk .a-flick { transform-box: fill-box; transform-origin: 50% 100%; }

/* ── Бобрик ── */
.stk .a-wave { --T: 2s; animation: stk-wave var(--T) ease-in-out infinite; }
.stk .a-beat { --T: 1.6s; animation: stk-beat var(--T) ease-in-out infinite; }
.stk .a-rise { --T: 2.4s; --sx: -20px; --sy: 30px; --ex: 16px; --ey: -30px; --s0: .3; animation: stk-path var(--T) ease-out infinite; }
.stk .a-squash { --T: 1.8s; animation: stk-squash var(--T) ease-in-out infinite; }
.stk .a-sway { --T: 2.8s; animation: stk-sway var(--T) ease-in-out infinite; }
.stk .a-jiggle { --T: 1.6s; animation: stk-jiggle var(--T) ease-in-out infinite; }
.stk .a-joyL { --T: 1.6s; --sx: 12px; --sy: -4px; --ex: -14px; --ey: 14px; --s0: .5; animation: stk-path var(--T) ease-out infinite; }
.stk .a-joyR { --T: 1.6s; --sx: -12px; --sy: -4px; --ex: 14px; --ey: 14px; --s0: .5; animation: stk-path var(--T) ease-out infinite; }
.stk .a-drop { --T: 2s; --sx: 0px; --sy: -12px; --ex: 0px; --ey: 42px; --s0: .4; animation: stk-path var(--T) ease-in infinite; }
.stk .a-zzz { --T: 3s; --sx: -14px; --sy: 16px; --ex: 10px; --ey: -16px; --s0: .5; --s1: 1.1; --r0: -14deg; --r1: 10deg; animation: stk-path var(--T) ease-in-out infinite; }
.stk .a-breathe { --T: 3s; animation: stk-breathe var(--T) ease-in-out infinite; }
.stk .a-steam { --T: 2.4s; --sx: 0px; --sy: 10px; --ex: 0px; --ey: -12px; --s0: .8; animation: stk-path var(--T) ease-in-out infinite; }
.stk .a-huff { --T: 2s; animation: stk-huff var(--T) ease-in-out infinite; }
.stk .a-pop { --T: 2s; animation: stk-pop var(--T) ease-in-out infinite; }
.stk .a-fsway { --T: 2.6s; animation: stk-sway6 var(--T) ease-in-out infinite; }
.stk .a-moon { --T: 3s; animation: stk-sway6 var(--T) ease-in-out infinite; }
.stk .a-tw { --T: 1.8s; animation: stk-tw var(--T) ease-in-out infinite; }
.stk .a-tws { --T: 2.2s; animation: stk-tws var(--T) ease-in-out infinite; }
.stk .a-fade { --T: 2s; animation: stk-fade var(--T) ease-in-out infinite; }

/* ── Живые эмодзи ── */
.stk .a-fl1 { --T: 1.6s; animation: stk-flick var(--T) ease-in-out infinite; }
.stk .a-fl2 { --T: 1.6s; animation: stk-flick2 var(--T) ease-in-out infinite; }
.stk .a-fl3 { --T: 1.6s; animation: stk-flick var(--T) ease-in-out infinite; }
.stk .a-ember { --T: 2s; --sx: -4px; --sy: 18px; --ex: 6px; --ey: -20px; --s0: 1; --s1: .3; animation: stk-path var(--T) ease-out infinite; }
.stk .a-recoil { --T: 2.2s; animation: stk-recoil var(--T) ease-out infinite; }
.stk .a-burst { --T: 2.2s; animation: stk-burst var(--T) ease-out infinite; }
.stk .a-conf { --T: 2.2s; animation: stk-conf var(--T) cubic-bezier(.2, .7, .3, 1) infinite; }
.stk .cf1 { --sx: 8px; --sy: 86px; --r: 200deg; }
.stk .cf2 { --sx: -26px; --sy: 80px; --r: -160deg; }
.stk .cf3 { --sx: -52px; --sy: 62px; --r: 240deg; }
.stk .cf4 { --sx: -70px; --sy: 34px; --r: -200deg; }
.stk .cf5 { --sx: -78px; --sy: 4px; --r: 180deg; }
.stk .cf6 { --sx: -14px; --sy: 52px; --r: 300deg; }
.stk .cf7 { --sx: -44px; --sy: 96px; --r: -240deg; }
.stk .cf8 { --sx: 34px; --sy: 64px; --r: 160deg; }
.stk .cf9 { --sx: -62px; --sy: -18px; --r: -220deg; }
.stk .cf10 { --sx: 26px; --sy: 100px; --r: 260deg; }
.stk .a-wobble { --T: 2.6s; animation: stk-wobble var(--T) ease-in-out infinite; }
.stk .a-wave2 { --T: 1.8s; animation: stk-wave2 var(--T) ease-in-out infinite; }
.stk .a-rsway { --T: 3s; animation: stk-sway4 var(--T) ease-in-out infinite; }
.stk .a-petal { --T: 3s; --sx: -14px; --sy: -30px; --ex: 16px; --ey: 44px; --s0: 1; --r0: -30deg; --r1: 140deg; animation: stk-path var(--T) ease-in-out infinite; }
.stk .a-glow { --T: 1.6s; animation: stk-glow var(--T) ease-in-out infinite; }
.stk .a-flick { --T: 1.6s; animation: stk-flick var(--T) ease-in-out infinite; }
.stk .a-spin { --T: 4s; animation: stk-spin var(--T) linear infinite; }
.stk .a-sunf { --T: 2.4s; animation: stk-sway4 var(--T) ease-in-out infinite; }
.stk .a-drift { --T: 6s; animation: stk-drift var(--T) ease-in-out infinite; }
.stk .a-bounce { --T: 1.8s; animation: stk-bounce var(--T) ease-in-out infinite; }
.stk .a-tw2 { --T: 2.4s; animation: stk-tw2 var(--T) ease-in-out infinite; }
.stk .a-floaty { --T: 2.6s; animation: stk-float var(--T) ease-in-out infinite; }
.stk .a-gshadow { --T: 2.6s; animation: stk-shadow var(--T) ease-in-out infinite; }

/* staggering, as a fraction of the loop (keep after the animation rules) */
.stk .d1 { animation-delay: calc(var(--T, 2s) * -.333); }
.stk .d2 { animation-delay: calc(var(--T, 2s) * -.667); }
.stk .d3 { animation-delay: calc(var(--T, 2s) * -.5); }
.stk .d5 { animation-delay: calc(var(--T, 2s) * -.833); }

/* a thing that travels from (sx,sy) to (ex,ey) around its resting place, fading in and out */
@keyframes stk-path {
  0% { transform: translate(var(--sx, 0px), var(--sy, 20px)) scale(var(--s0, .5)) rotate(var(--r0, 0deg)); opacity: 0; }
  20%, 70% { opacity: 1; }
  100% { transform: translate(var(--ex, 0px), var(--ey, -20px)) scale(var(--s1, 1)) rotate(var(--r1, 0deg)); opacity: 0; }
}
@keyframes stk-wave { 0%, 50%, 100% { transform: rotate(-10deg); } 25%, 75% { transform: rotate(14deg); } }
@keyframes stk-wave2 { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(12deg); } }
@keyframes stk-beat { 0%, 60%, 100% { transform: scale(1); } 14% { transform: scale(1.13); } 28% { transform: scale(.97); } 42% { transform: scale(1.08); } }
@keyframes stk-squash { 0%, 100% { transform: scale(1, 1); } 30% { transform: scale(1.05, .94); } 55% { transform: scale(.97, 1.05); } 75% { transform: scale(1.01, .99); } }
@keyframes stk-sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes stk-sway4 { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes stk-sway6 { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@keyframes stk-jiggle {
  0%, 56%, 100% { transform: rotate(0) translateY(0); }
  8% { transform: rotate(-3deg) translateY(-4px); } 16% { transform: rotate(3deg) translateY(0); }
  24% { transform: rotate(-3deg) translateY(-4px); } 32% { transform: rotate(3deg) translateY(0); }
  40% { transform: rotate(-2deg) translateY(-3px); } 48% { transform: rotate(1deg) translateY(0); }
}
@keyframes stk-breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.015, 1.035); } }
@keyframes stk-huff {
  0%, 100% { transform: scale(1) translateX(0); } 12% { transform: scale(1.05, 1.03); } 24% { transform: scale(1); }
  40% { transform: translateX(-2.5px); } 46% { transform: translateX(2.5px); } 52% { transform: translateX(-2px); }
  58% { transform: translateX(1.5px); } 64% { transform: translateX(0); }
}
@keyframes stk-pop { 0%, 100% { transform: scale(.85); } 15% { transform: scale(1.25); } 30% { transform: scale(1); } }
@keyframes stk-tw { 0%, 100% { transform: scale(.35) rotate(0); opacity: .35; } 50% { transform: scale(1) rotate(25deg); opacity: 1; } }
@keyframes stk-tws { 0%, 100% { transform: scale(.7); opacity: .55; } 50% { transform: scale(1.12); opacity: 1; } }
@keyframes stk-tw2 { 0%, 100% { transform: scale(.78) rotate(0); opacity: .8; } 50% { transform: scale(1.04) rotate(12deg); opacity: 1; } }
@keyframes stk-fade { 0%, 100% { opacity: 0; } 35%, 65% { opacity: 1; } }
@keyframes stk-flick {
  0%, 100% { transform: scale(1, 1) skewX(0); } 25% { transform: scale(.96, 1.05) skewX(-3deg); }
  50% { transform: scale(1.03, .96) skewX(0); } 75% { transform: scale(.98, 1.04) skewX(3deg); }
}
@keyframes stk-flick2 {
  0%, 100% { transform: scale(1, 1) skewX(0); } 25% { transform: scale(1.04, .95) skewX(4deg); }
  50% { transform: scale(.97, 1.06) skewX(0); } 75% { transform: scale(1.02, .97) skewX(-4deg); }
}
@keyframes stk-recoil { 0%, 30%, 100% { transform: scale(1); } 4% { transform: scale(.9); } 12% { transform: scale(1.07); } 20% { transform: scale(.98); } }
@keyframes stk-burst { 0%, 100% { opacity: 0; transform: scale(.5); } 5% { opacity: 1; } 20% { opacity: 0; transform: scale(1.3); } }
@keyframes stk-conf {
  0% { transform: translate(var(--sx), var(--sy)) rotate(0) scale(.3); opacity: 0; }
  8%, 80% { opacity: 1; }
  60% { transform: translate(0, 0) rotate(var(--r)) scale(1); }
  100% { transform: translate(0, 16px) rotate(calc(var(--r) * 1.4)) scale(1); opacity: 0; }
}
@keyframes stk-wobble { 0%, 100% { transform: rotate(-6deg) scale(1); } 50% { transform: rotate(6deg) scale(1.06); } }
@keyframes stk-glow { 0%, 100% { opacity: .55; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.1); } }
@keyframes stk-spin { to { transform: rotate(60deg); } }
@keyframes stk-drift { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(84px); } }
@keyframes stk-bounce {
  0%, 100% { transform: translateY(0) rotate(0) scale(1); } 30% { transform: translateY(-14px) rotate(-7deg); }
  52% { transform: translateY(0) rotate(0) scale(1.05, .95); } 64% { transform: scale(.98, 1.02); } 76% { transform: scale(1); }
}
@keyframes stk-float { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-12px) rotate(3deg); } }
@keyframes stk-shadow { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.75); opacity: .55; } }

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