/* Знаешь меня? — стикер-словарь движения. Подключать ПОСЛЕ style.css.
   Только transform/opacity → 60fps. Сниппеты: /assets/stickers-demo.html
   Правило: ОДИН оркестрованный момент на экран. Периоды циклов разные
   (2.2/2.4/2.8/3.4/3.6/4.8/5.6s) — ничего не бьётся в такт. */

/* -- фирменный стикер «сердце под цензурой» --
   SVG копируй из <template id="censor-heart-svg"> в демо.
   Масштаб — width контейнера. */
.stk-censor-heart { display: inline-block; width: 132px; line-height: 0; }
.stk-censor-heart svg { display: block; width: 100%; height: auto; overflow: visible; }

.stk-censor-heart .ch-breathe {
  transform-box: fill-box;
  transform-origin: 50% 78%;
  animation: ch-breathe 2.2s ease-in-out infinite;
}
@keyframes ch-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }

.stk-censor-heart .ch-eye {
  transform-box: fill-box;
  transform-origin: center;
  animation: ch-blink 4.8s linear infinite;
}
@keyframes ch-blink { 0%, 91.5%, 95.5%, 100% { transform: scaleY(1); } 93.5% { transform: scaleY(.08); } }

.stk-censor-heart .ch-bar {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transform: rotate(-4deg); /* базовый наклон — остаётся при reduced-motion */
  animation: ch-bar 3.6s ease-in-out infinite;
}
@keyframes ch-bar { 0%, 100% { transform: rotate(-3.1deg); } 50% { transform: rotate(-4.9deg); } }

/* -- сценки вокруг эмодзи: <span class="stk stk-...">🙈</span> --
   Размер — font-size на .stk, декор-<i> масштабируются в em.
   .stk-hearts/.stk-sparkle анимируют только <i> → совместимы
   с .stk-bob. Остальные — по одной сценке на элемент. */
.stk {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 44px;
}
.stk > i {
  position: absolute;
  left: 50%; top: 50%;
  font-style: normal;
  opacity: 0;
  pointer-events: none;
}

/* .stk-bob — мягкое покачивание на месте (дыхание, не качели) */
.stk-bob { animation: stk-bob 2.8s ease-in-out infinite; }
@keyframes stk-bob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-6%) rotate(3deg); } }

/* .stk-hearts — волна из 3 сердечек (3×<i>) всплывает, потом пауза ~4s */
.stk-hearts > i::before { content: '♥'; }
.stk-hearts > i { color: var(--lipstick); font-size: .38em; animation: stk-heart-float 5.6s ease-out infinite; }
.stk-hearts > i:nth-child(1) { left: 4%;  top: 26%; --dx: -7px; --fly: -22px; animation-delay: .2s; }
.stk-hearts > i:nth-child(2) { left: 78%; top: 10%; --dx: 6px;  --fly: -30px; animation-delay: .75s; }
.stk-hearts > i:nth-child(3) { left: 42%; top: -8%; --dx: 0px;  --fly: -26px; animation-delay: 1.3s; font-size: .3em; }
@keyframes stk-heart-float {
  0%   { opacity: 0; transform: translate(0, 4px) scale(.5); }
  6%   { opacity: .95; }
  26%  { opacity: 0; transform: translate(var(--dx, 0px), var(--fly, -26px)) scale(1.05) rotate(-10deg); }
  100% { opacity: 0; transform: translate(var(--dx, 0px), var(--fly, -26px)) scale(1.05); }
}

/* .stk-sparkle — 2–3 искры (3×<i>) мерцают по углам, по очереди */
.stk-sparkle > i::before { content: '✦'; }
.stk-sparkle > i { color: var(--gold); font-size: .3em; animation: stk-twinkle 3.4s ease-in-out infinite; }
.stk-sparkle > i:nth-child(1) { left: -12%; top: 4%;  --ra: -15deg; }
.stk-sparkle > i:nth-child(2) { left: 88%;  top: 56%; --ra: 20deg; animation-delay: 1.15s; }
.stk-sparkle > i:nth-child(3) { left: 30%;  top: -16%; --ra: 0deg; animation-delay: 2.3s; font-size: .2em; }
@keyframes stk-twinkle {
  0%, 26%, 100% { opacity: 0; transform: rotate(var(--ra, 0deg)) scale(.3); }
  8%            { opacity: 1; transform: rotate(var(--ra, 0deg)) scale(1); }
  18%           { opacity: 0; transform: rotate(var(--ra, 0deg)) scale(.4); }
}

/* .stk-crown — сияние топ-1: 5 лучей (5×<i>) + пульс. Не сочетать с .stk-bob */
.stk-crown { animation: stk-crown-pulse 2.4s ease-in-out infinite; }
@keyframes stk-crown-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
.stk-crown > i {
  width: 2px;
  height: .3em;
  margin: -.15em 0 0 -1px;
  border-radius: 2px;
  background: var(--gold);
  animation: stk-ray 2.4s ease-in-out infinite;
}
.stk-crown > i:nth-child(1) { --a: -56deg; animation-delay: .3s; }
.stk-crown > i:nth-child(2) { --a: -28deg; animation-delay: .15s; }
.stk-crown > i:nth-child(3) { --a: 0deg; }
.stk-crown > i:nth-child(4) { --a: 28deg;  animation-delay: .15s; }
.stk-crown > i:nth-child(5) { --a: 56deg;  animation-delay: .3s; }
@keyframes stk-ray {
  0%, 100% { opacity: .3; transform: rotate(var(--a, 0deg)) translateY(-.72em) scaleY(.65); }
  50%      { opacity: .9; transform: rotate(var(--a, 0deg)) translateY(-.82em) scaleY(1); }
}

/* .stk-shake — короткая дрожь «💀-реакция». Одноразовая: добавь класс .play.
   Повтор: el.classList.remove('play'); void el.offsetWidth; el.classList.add('play'); */
.stk-shake.play { animation: stk-shake .5s cubic-bezier(.36, .07, .19, .97) both; }
@keyframes stk-shake {
  10%, 90%      { transform: translateX(-1px) rotate(-1deg); }
  20%, 80%      { transform: translateX(2px) rotate(1.5deg); }
  30%, 50%, 70% { transform: translateX(-3px) rotate(-2.5deg); }
  40%, 60%      { transform: translateX(3px) rotate(2.5deg); }
}

/* .stk-pop — появление с overshoot (момент раскрытия результата).
   Каскад: добавь .d1/.d2/.d3 соседям, чтобы вылетали по очереди. */
.stk-pop { animation: stk-pop .55s cubic-bezier(0.16, 1, 0.3, 1) both; }
.stk-pop.d1 { animation-delay: .1s; }
.stk-pop.d2 { animation-delay: .22s; }
.stk-pop.d3 { animation-delay: .36s; }
@keyframes stk-pop {
  0%   { opacity: 0; transform: scale(.4) rotate(-6deg); }
  62%  { opacity: 1; transform: scale(1.07) rotate(2deg); }
  82%  { transform: scale(.97) rotate(0deg); }
  100% { opacity: 1; transform: scale(1); }
}

/* -- reduced motion: всё движение выключено (поверх сброса style.css):
   циклы гасим совсем, декор-<i> невидимы, .stk-pop виден, плашка
   держит базовый наклон -4deg. */
@media (prefers-reduced-motion: reduce) {
  .stk, .stk > i,
  .stk-censor-heart .ch-breathe,
  .stk-censor-heart .ch-eye,
  .stk-censor-heart .ch-bar { animation: none !important; }
}