/*
 * Именные микро-анимации статусов меценатов (Sprint 9). Подключается после styles.css: база значка (размер,
 * посадка, свечение пика ::before, общие частицы .badge-fx) — там, здесь — сцены отдельных статусов.
 *
 * Правила для всех сцен:
 *   * ровно 4 цикла при появлении и покой в нейтральном кадре: animation-iteration-count: 4 +
 *     animation-fill-mode: forwards (последний кадр каждой анимации = исходное состояние);
 *   * тап по значку снимает и возвращает класс анимации (statusBadges.replayBadgeAnimation) — ещё 4 цикла.
 *     Поэтому всё — и части иконки, и частицы — анимируется ТОЛЬКО под классом .status-badge--anim-<сцена>:
 *     без класса анимация сбрасывается, с ним — начинается сначала;
 *   * частицы и надписи («дзынь!», «hmm?», «strong», «rich») — position: absolute, pointer-events: none, только
 *     НАД значком или СПРАВА от него (имя — слева), вне пика — opacity: 0;
 *   * значок анимирует transform / opacity / filter — раскладка строки имени не пересчитывается;
 *   * «Просто человек» — статичен; prefers-reduced-motion — без анимации и частиц.
 */

/* ---------------------------------------------------------------------- */
/* Общее: 4 цикла, покой, сброс без класса анимации                         */
/* ---------------------------------------------------------------------- */

.status-badge[class*="status-badge--anim-"] .badge-icon,
.status-badge[class*="status-badge--anim-"] .badge-icon__blade,
.status-badge[class*="status-badge--anim-"] .badge-icon__needle,
.status-badge[class*="status-badge--anim-"] .badge-icon__trend,
.status-badge[class*="status-badge--anim-"] .badge-icon__arrowhead,
.status-badge[class*="status-badge--anim-"] .badge-icon__orb,
.status-badge[class*="status-badge--anim-"] .badge-fx__leaf,
.status-badge[class*="status-badge--anim-"] .badge-fx__beam,
.status-badge[class*="status-badge--anim-"] .badge-fx__bubble,
.status-badge[class*="status-badge--anim-"] .badge-fx--ring,
.status-badge[class*="status-badge--anim-"] .badge-fx--burst {
  animation-iteration-count: 4;
  animation-fill-mode: forwards;
}

.status-badge:not([class*="status-badge--anim-"]) .badge-icon__blade,
.status-badge:not([class*="status-badge--anim-"]) .badge-icon__needle,
.status-badge:not([class*="status-badge--anim-"]) .badge-icon__trend,
.status-badge:not([class*="status-badge--anim-"]) .badge-icon__arrowhead,
.status-badge:not([class*="status-badge--anim-"]) .badge-icon__orb,
.status-badge:not([class*="status-badge--anim-"]) .badge-fx__leaf,
.status-badge:not([class*="status-badge--anim-"]) .badge-fx__beam,
.status-badge:not([class*="status-badge--anim-"]) .badge-fx__bubble,
.status-badge:not([class*="status-badge--anim-"]) .badge-fx--ring,
.status-badge:not([class*="status-badge--anim-"]) .badge-fx--burst {
  animation: none;
}

/* Надписи-всплески: компактная «пилюля» цвета значка у правого верхнего угла (над значком — «hmm?»). */
.badge-fx--burst {
  left: 78%;
  bottom: 74%;
  padding: 0.05em 0.35em;
  border-radius: 999px;
  background: rgba(var(--badge-rgb, var(--gold-rgb)), 0.22);
  color: var(--badge-color, var(--gold));
  font-family: var(--font-name);
  font-size: 0.62em;
  font-style: italic;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0;
  transform-origin: 0% 100%;
}

/* ---------------------------------------------------------------------- */
/* 1. «Трогаю траву» — grass_sway: порыв ветра, три листика по дуге         */
/* ---------------------------------------------------------------------- */

.status-badge--anim-grass_sway {
  animation: grassGust 3.2s ease-in-out 4 forwards;
}

.status-badge--anim-grass_sway .badge-icon__blade {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: grassSway 3.2s cubic-bezier(0.34, 1.56, 0.64, 1) 4 forwards;
}

.status-badge--anim-grass_sway .badge-icon__blade:nth-child(3) { animation-delay: 0.08s; }
.status-badge--anim-grass_sway .badge-icon__blade:nth-child(4) { animation-delay: 0.16s; }

@keyframes grassGust {
  0%, 60%, 100% { transform: rotate(0deg) scale(1); }
  16% { transform: rotate(-4deg) scale(1.08); }
  32% { transform: rotate(2deg) scale(1.02); }
}

/* Упругий откат: наклон по ветру, перехлёст назад и затухающие колебания. */
@keyframes grassSway {
  0%, 66%, 100% { transform: rotate(0deg); }
  16% { transform: rotate(-14deg); }
  28% { transform: rotate(9deg); }
  38% { transform: rotate(-5deg); }
  48% { transform: rotate(3deg); }
  58% { transform: rotate(-1deg); }
}

.badge-fx--leaves {
  left: 72%;
  bottom: 30%;
  width: 1.5em;
  height: 1.2em;
  opacity: 1;
}

.badge-fx__leaf {
  fill: currentColor;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

.status-badge--anim-grass_sway .badge-fx__leaf {
  animation: leafDrift 3.2s ease-out 4 forwards;
}

.status-badge--anim-grass_sway g:nth-child(2) .badge-fx__leaf { animation-delay: 0.15s; }
.status-badge--anim-grass_sway g:nth-child(3) .badge-fx__leaf { animation-delay: 0.3s; }

/* Изогнутая траектория ветра: вправо и вверх, с подхватом и вращением. */
@keyframes leafDrift {
  0%, 18% { opacity: 0; transform: translate(0, 0) rotate(0deg); }
  28% { opacity: 0.95; transform: translate(3px, -1px) rotate(25deg); }
  44% { opacity: 0.85; transform: translate(8px, -5px) rotate(70deg); }
  58% { opacity: 0.5; transform: translate(12px, -6px) rotate(110deg); }
  70%, 100% { opacity: 0; transform: translate(15px, -8px) rotate(140deg); }
}

/* ---------------------------------------------------------------------- */
/* 2. «8 секунд» — chrono_sweep: стрелка 360°, кольцо-импульс, «дзынь!»     */
/* ---------------------------------------------------------------------- */

.status-badge--anim-chrono_sweep {
  animation: chronoChime 2.4s ease-out 4 forwards;
}

.status-badge--anim-chrono_sweep .badge-icon__needle {
  transform-box: view-box;
  transform-origin: 12px 13.5px; /* центр циферблата (badgeIcons: circle cx=12 cy=13.5) */
  animation: needleSweep 2.4s cubic-bezier(0.45, 0, 0.25, 1) 4 forwards;
}

/* Оборот по часовой за 70% цикла; 360° = исходное положение (покой без скачка). */
@keyframes needleSweep {
  0% { transform: rotate(0deg); }
  70%, 100% { transform: rotate(360deg); }
}

@keyframes chronoChime {
  0%, 68%, 100% { transform: scale(1); }
  74% { transform: scale(1.12); }
  84% { transform: scale(1); }
}

/* Кольцо — по контуру значка; гаснет к левому краю (маска), чтобы не задеть имя. */
.badge-fx--ring {
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  opacity: 0;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 35%, #000 60%);
  mask-image: linear-gradient(to right, transparent 0%, transparent 35%, #000 60%);
}

.status-badge--anim-chrono_sweep .badge-fx--ring {
  animation: ringPulse 2.4s ease-out 4 forwards;
}

@keyframes ringPulse {
  0%, 68% { opacity: 0; transform: scale(1); }
  72% { opacity: 0.9; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.55); }
}

.status-badge--anim-chrono_sweep .badge-fx--ding {
  animation: dingPop 2.4s ease-out 4 forwards;
}

/* «дзынь!» — в конце оборота: всплывает на 8px и тает. */
@keyframes dingPop {
  0%, 68% { opacity: 0; transform: translateY(2px) scale(0.7); }
  76% { opacity: 1; transform: translateY(-2px) scale(1.1); }
  86% { opacity: 1; transform: translateY(-5px) scale(1); }
  100% { opacity: 0; transform: translateY(-8px) scale(0.95); }
}

/* ---------------------------------------------------------------------- */
/* 3. «В прайме» (молния) — lightning_strike: наклон 35° ×1.2, вспышка      */
/* ---------------------------------------------------------------------- */

.status-badge--anim-lightning_strike {
  animation: lightningStrike 2.4s cubic-bezier(0.2, 0.9, 0.25, 1) 4 forwards;
}

.status-badge--anim-lightning_strike::before {
  animation: lightningFlash 2.4s linear 4 forwards;
}

/* Резкий наклон по часовой и рост; на пике — короткая контрастная вспышка (мигание); щелчок назад в 0°. */
@keyframes lightningStrike {
  0%, 34%, 100% { transform: rotate(0deg) scale(1); filter: brightness(1); }
  10% { transform: rotate(35deg) scale(1.2); filter: brightness(1.2); }
  14% { transform: rotate(35deg) scale(1.2); filter: brightness(2.6) contrast(1.35); }
  18% { transform: rotate(35deg) scale(1.2); filter: brightness(1.1); }
  22% { transform: rotate(35deg) scale(1.2); filter: brightness(2.2) contrast(1.25); }
  28% { transform: rotate(-3deg) scale(1.02); filter: brightness(1); }
}

@keyframes lightningFlash {
  0%, 10%, 30%, 100% { opacity: 0; transform: scale(0.6); }
  14%, 22% { opacity: 1; transform: scale(1.05); }
  18% { opacity: 0.35; transform: scale(0.9); }
}

/* ---------------------------------------------------------------------- */
/* 4. «Философ» — ponder: облачко «hmm?» над значком                        */
/* ---------------------------------------------------------------------- */

.status-badge--anim-ponder {
  animation: ponderTilt 3.6s ease-in-out 4 forwards;
}

@keyframes ponderTilt {
  0%, 26%, 80%, 100% { transform: rotate(0deg); }
  38%, 62% { transform: rotate(-6deg); }
}

/* Над значком, от его середины вправо — по высоте выше строки имени, слева её не касается. */
.badge-fx--hmm {
  left: 50%;
  bottom: 96%;
  border-radius: 0.8em 0.8em 0.8em 0.2em;
}

.status-badge--anim-ponder .badge-fx--hmm {
  animation: hmmFloat 3.6s ease-in-out 4 forwards;
}

@keyframes hmmFloat {
  0%, 30% { opacity: 0; transform: translateY(2px) scale(0.8); }
  42% { opacity: 1; transform: translateY(-2px) scale(1); }
  70% { opacity: 1; transform: translateY(-6px) scale(1); }
  84%, 100% { opacity: 0; transform: translateY(-8px) scale(0.96); }
}

/* ---------------------------------------------------------------------- */
/* 5. «Менталист» — orb_pulse: шар светится, лучи расходятся из центра      */
/* ---------------------------------------------------------------------- */

.status-badge--anim-orb_pulse {
  animation: orbFloat 3s ease-in-out 4 forwards;
}

.status-badge--anim-orb_pulse .badge-icon__orb {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: orbPulse 3s ease-in-out 4 forwards;
}

@keyframes orbFloat {
  0%, 70%, 100% { transform: scale(1); }
  45% { transform: scale(1.06); }
}

@keyframes orbPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  22% { opacity: 0.45; transform: scale(0.94); }
  45% { opacity: 1; transform: scale(1.08); }
  62% { opacity: 0.7; transform: scale(1); }
}

/* Лучи — в полосе от центра значка вправо (левый край = центр значка, по высоте ±110%): только вверх и вправо,
   сама область частиц не заходит левее центра значка — к имени. */
.badge-fx--beams {
  left: 50%;
  top: -60%;
  width: 110%;
  height: 220%;
  opacity: 1;
}

.badge-fx__beam {
  stroke: currentColor;
  stroke-width: 0.9;
  stroke-linecap: round;
  opacity: 0;
  transform-box: view-box;
  transform-origin: 0px 0px; /* центр значка: viewBox 0 -12 12 24 (x=0 — центр значка) */
}

.status-badge--anim-orb_pulse .badge-fx__beam {
  animation: beamFan 3s ease-out 4 forwards;
}

.status-badge--anim-orb_pulse .badge-fx__beam:nth-child(2) { animation-delay: 0.05s; }
.status-badge--anim-orb_pulse .badge-fx__beam:nth-child(3) { animation-delay: 0.1s; }
.status-badge--anim-orb_pulse .badge-fx__beam:nth-child(4) { animation-delay: 0.15s; }
.status-badge--anim-orb_pulse .badge-fx__beam:nth-child(5) { animation-delay: 0.2s; }

@keyframes beamFan {
  0%, 38% { opacity: 0; transform: scale(0.55); }
  50% { opacity: 0.9; transform: scale(1); }
  72%, 100% { opacity: 0; transform: scale(1.18); }
}

/* ---------------------------------------------------------------------- */
/* 6. «Инвестор» — bull_trend: линия из начала координат вверх к пику       */
/* ---------------------------------------------------------------------- */

.status-badge--anim-bull_trend {
  animation: bullPop 3s ease-out 4 forwards;
}

.status-badge--anim-bull_trend .badge-icon__trend {
  stroke-dasharray: 1; /* pathLength="1": длина линии = 1 */
  animation: trendDraw 3s cubic-bezier(0.3, 0, 0.2, 1) 4 forwards;
}

/* Наконечник едет из (4; 20) — начала координат графика — к пику (19.2; 8.2) вместе с линией. */
.status-badge--anim-bull_trend .badge-icon__arrowhead {
  transform-box: view-box;
  animation: trendHead 3s cubic-bezier(0.3, 0, 0.2, 1) 4 forwards;
}

@keyframes bullPop {
  0%, 40%, 100% { transform: scale(1); }
  48% { transform: scale(1.1); }
  58% { transform: scale(1); }
}

@keyframes trendDraw {
  0%, 6% { stroke-dashoffset: 1; }
  44%, 100% { stroke-dashoffset: 0; }
}

@keyframes trendHead {
  0%, 6% { opacity: 0; transform: translate(-15.2px, 11.8px); }
  14% { opacity: 1; }
  44%, 100% { opacity: 1; transform: translate(0, 0); }
}

/* ---------------------------------------------------------------------- */
/* 7. «Я рыба-ёж» — bubble_rise: пузырьки поднимаются с покачиванием        */
/* ---------------------------------------------------------------------- */

.status-badge--anim-bubble_rise {
  animation: fishBob 3.2s ease-in-out 4 forwards;
}

@keyframes fishBob {
  0%, 70%, 100% { transform: translateY(0) rotate(0deg); }
  24% { transform: translateY(-1px) rotate(-4deg); }
  46% { transform: translateY(0.5px) rotate(2deg); }
}

/* Над значком: стартуют у верхней кромки и уходят вверх — к имени (слева) не смещаются. */
.badge-fx--bubbles {
  left: 18%;
  bottom: 78%;
  width: 52%;
  height: 70%;
  opacity: 1;
}

.badge-fx__bubble {
  fill: none;
  stroke: currentColor;
  stroke-width: 0.6;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

.status-badge--anim-bubble_rise .badge-fx__bubble {
  animation: bubbleRise 3.2s ease-out 4 forwards;
}

.status-badge--anim-bubble_rise .badge-fx__bubble:nth-child(2) { animation-delay: 0.2s; }
.status-badge--anim-bubble_rise .badge-fx__bubble:nth-child(3) { animation-delay: 0.4s; }
.status-badge--anim-bubble_rise .badge-fx__bubble:nth-child(4) { animation-delay: 0.6s; }

/* Покачивание влево-вправо по дуге вверх и «пф» — пузырёк раздувается и исчезает. */
@keyframes bubbleRise {
  0%, 18% { opacity: 0; transform: translate(0, 0) scale(0.6); }
  28% { opacity: 0.9; transform: translate(0.5px, -2px) scale(0.9); }
  42% { opacity: 0.9; transform: translate(1.5px, -6px) scale(1); }
  56% { opacity: 0.8; transform: translate(-0.5px, -10px) scale(1); }
  64% { opacity: 0; transform: translate(0.5px, -12px) scale(1.4); }
  100% { opacity: 0; transform: translate(0.5px, -12px) scale(1.4); }
}

/* ---------------------------------------------------------------------- */
/* 8. «Легенда» (корона) и «Шейх» — regal_aura: дышащий золотой ореол       */
/* ---------------------------------------------------------------------- */

.status-badge--anim-regal_aura {
  animation: regalBreathe 3.6s ease-in-out 4 forwards;
}

/* Свечение — по контуру иконки (drop-shadow до 4px: остаётся в зазоре между именем и значком). Крайние кадры —
   те же тени, что у иконки в покое (styles.css: .status-badge .badge-icon), — без скачка после 4 циклов. */
.status-badge--anim-regal_aura .badge-icon {
  animation: regalAura 3.6s ease-in-out 4 forwards;
}

@keyframes regalBreathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@keyframes regalAura {
  0%, 100% {
    filter: drop-shadow(0 0 2px rgba(var(--badge-rgb, var(--gold-rgb)), 0.65))
      drop-shadow(0 0 6px rgba(var(--badge-rgb, var(--gold-rgb)), 0.25));
  }
  50% {
    filter: drop-shadow(0 0 1px rgba(255, 236, 170, 0.95)) drop-shadow(0 0 4px rgba(var(--badge-rgb, var(--gold-rgb)), 0.95))
      drop-shadow(0 0 7px rgba(var(--badge-rgb, var(--gold-rgb)), 0.45));
  }
}

/* ---------------------------------------------------------------------- */
/* 9. «Качок» — flex_pop: «strong» из правого верхнего угла                 */
/* ---------------------------------------------------------------------- */

.status-badge--anim-flex_pop {
  animation: flexPop 2.8s ease-out 4 forwards;
}

@keyframes flexPop {
  0%, 40%, 100% { transform: scale(1) rotate(0deg); }
  20% { transform: scale(1.15) rotate(-4deg); }
  30% { transform: scale(0.98) rotate(1deg); }
}

.status-badge--anim-flex_pop .badge-fx--strong {
  animation: strongPop 2.8s ease-out 4 forwards;
}

@keyframes strongPop {
  0%, 18% { opacity: 0; transform: translateY(2px) scale(0.7); }
  28% { opacity: 1; transform: translateY(-1px) scale(1.12); }
  56% { opacity: 1; transform: translateY(-4px) scale(1); }
  72%, 100% { opacity: 0; transform: translateY(-6px) scale(0.96); }
}

/* ---------------------------------------------------------------------- */
/* 10. «Меценат» — rich_shimmer: «rich» с золотым бликом                    */
/* ---------------------------------------------------------------------- */

.status-badge--anim-rich_shimmer {
  animation: richGlint 3.2s ease-in-out 4 forwards;
}

@keyframes richGlint {
  0%, 50%, 100% { transform: scale(1); filter: brightness(1); }
  26% { transform: scale(1.06); filter: brightness(1.3); }
}

.badge-fx--rich {
  background: linear-gradient(110deg, #b8860b 0%, #ffe9a8 45%, #d4af37 60%, #8a6a12 100%);
  color: #1a1306;
  font-style: normal;
  letter-spacing: 0.02em;
}

.status-badge--anim-rich_shimmer .badge-fx--rich {
  animation: richPop 3.2s ease-out 4 forwards;
}

/* Всплывает, вспыхивает золотом и растворяется до начала следующего цикла. */
@keyframes richPop {
  0%, 16% { opacity: 0; transform: translateY(2px) scale(0.7); filter: brightness(1); }
  26% { opacity: 1; transform: translateY(-1px) scale(1.1); filter: brightness(1.45); }
  40% { opacity: 1; transform: translateY(-3px) scale(1); filter: brightness(1); }
  54% { opacity: 1; transform: translateY(-5px) scale(1); filter: brightness(1.25); }
  70%, 100% { opacity: 0; transform: translateY(-7px) scale(0.96); filter: brightness(1); }
}

/* ---------------------------------------------------------------------- */
/* 11. «Просто человек» — статичен                                          */
/* ---------------------------------------------------------------------- */

.status-badge[data-status-badge="just_human"],
.status-badge[data-status-badge="just_human"]::before,
.status-badge[data-status-badge="just_human"] .badge-icon {
  animation: none;
}

.status-badge[data-status-badge="just_human"] .badge-fx,
.status-badge[data-status-badge="just_human"] .status-badge__shine {
  display: none;
}

/* ---------------------------------------------------------------------- */
/* 11. «Душнила» — chrono_tick + «душноо» (Sprint 10)                       */
/* ---------------------------------------------------------------------- */

/*
 * Та же архитектура, что «yum!» у «Сладкой конфетки» и «strong» у «Качка»: пилюля .badge-fx--burst у правого
 * верхнего угла значка (left: 78%, bottom: 74% — справа и выше, имя слева её не касается), absolute и без
 * указателя. Появляется в пике «тика» (8% цикла), всплывает на 6–8px вверх-вправо и тает до opacity: 0
 * раньше конца цикла (88%) — следующий «тик» начинается с чистого кадра. 4 цикла задаёт общее правило
 * .badge-fx--burst; после них значок и надпись замирают в нейтральном кадре (forwards, 100% = покой).
 */
.status-badge--anim-chrono_tick .badge-fx--stuffy {
  animation: stuffyRise 1s cubic-bezier(0.2, 0.9, 0.25, 1) 4 forwards;
}

@keyframes stuffyRise {
  0%, 6% { opacity: 0; transform: translate(0, 1px) scale(0.75); }
  12% { opacity: 1; transform: translate(1px, -1px) scale(1.08); }
  55% { opacity: 0.9; transform: translate(3px, -5px) scale(1); }
  88%, 100% { opacity: 0; transform: translate(4px, -7px) scale(0.96); }
}

/* ---------------------------------------------------------------------- */
/* Меньше движения                                                          */
/* ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .status-badge .badge-icon__blade,
  .status-badge .badge-icon__needle,
  .status-badge .badge-icon__trend,
  .status-badge .badge-icon__arrowhead,
  .status-badge .badge-icon__orb,
  .status-badge[class*="status-badge--anim-"] .badge-icon {
    animation: none;
  }
}

/* ====================================================================== */
/* Sprint 12: «Ты просто босс», «Уточка», «Вентилятор»                     */
/* ====================================================================== */
/*
 * Те же правила, что у всех сцен: ровно 4 цикла при появлении (или после тапа / примерки в гардеробе), покой в
 * нейтральном кадре (100% = исходное состояние, fill-mode: forwards), всё — только под классом анимации, частицы
 * и надписи — absolute, pointer-events: none, справа или над значком (имя слева их не касается), вне пика —
 * opacity: 0. Анимируются transform / opacity — строка имени не пересчитывается.
 */

/* Части иконок новых сцен: без класса анимации — сброс (перезапуск при replayBadgeAnimation). */
.status-badge:not([class*="status-badge--anim-"]) .badge-icon__crown,
.status-badge:not([class*="status-badge--anim-"]) .badge-icon__duck,
.status-badge:not([class*="status-badge--anim-"]) .badge-icon__foot,
.status-badge:not([class*="status-badge--anim-"]) .badge-icon__rotor,
.status-badge:not([class*="status-badge--anim-"]) .badge-icon__blur,
.status-badge:not([class*="status-badge--anim-"]) .badge-fx__gust {
  animation: none;
}

/* ---------------------------------------------------------------------- */
/* 12. «Ты просто босс» — shimmer_pulse + корона + «я просто босс»          */
/* ---------------------------------------------------------------------- */

/*
 * Пик shimmer_pulse — 63% цикла 3.6s (значок 1.2×, вспышка ::before). В этот момент корона над портфелем
 * чуть подпрыгивает, а у правого верхнего угла всплывает пилюля «я просто босс» — та же архитектура, что
 * «душноо» и «yum!» (.badge-fx--burst). Надпись длиннее, поэтому она мельче и тает до конца цикла (90%).
 */
.status-badge--anim-shimmer_pulse .badge-icon__crown {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: bossCrown 3.6s cubic-bezier(0.33, 0, 0.2, 1) 4 forwards;
}

@keyframes bossCrown {
  0%, 52%, 80%, 100% { transform: translateY(0) rotate(0deg); }
  63% { transform: translateY(-1.4px) rotate(-6deg); }
  70% { transform: translateY(0) rotate(2deg); }
}

.badge-fx--boss {
  font-size: 0.56em;
  letter-spacing: 0.01em;
}

.status-badge--anim-shimmer_pulse .badge-fx--boss {
  animation: bossRise 3.6s cubic-bezier(0.2, 0.9, 0.25, 1) 4 forwards;
}

@keyframes bossRise {
  0%, 56% { opacity: 0; transform: translate(0, 2px) scale(0.7); }
  63% { opacity: 1; transform: translate(1px, -1px) scale(1.1); }
  76% { opacity: 1; transform: translate(3px, -5px) scale(1); }
  90%, 100% { opacity: 0; transform: translate(4px, -8px) scale(0.96); }
}

/* ---------------------------------------------------------------------- */
/* 13. «Уточка» — duck_waddle: вперевалочку, «я уточка» / «кря» по очереди  */
/* ---------------------------------------------------------------------- */

/*
 * Цикл 1.6s: утёнок переваливается влево (25%) и вправо (75%) от лапок и подпрыгивает на каждом шаге.
 * Значок целиком — только лёгкий «подскок» (transform-origin слева, как у всех: имя не задевает).
 */
.status-badge--anim-duck_waddle {
  animation: duckHop 1.6s ease-in-out 4 forwards;
}

@keyframes duckHop {
  0%, 50%, 100% { transform: translateY(0) scale(1); }
  25%, 75% { transform: translateY(-1.5px) scale(1.06); }
}

.status-badge--anim-duck_waddle .badge-icon__duck {
  transform-box: view-box;
  transform-origin: 12px 20px; /* между лапками: качается от земли */
  animation: duckWaddle 1.6s ease-in-out 4 forwards;
}

@keyframes duckWaddle {
  0%, 50%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-9deg); }
  75% { transform: rotate(9deg); }
}

.status-badge--anim-duck_waddle .badge-icon__foot {
  transform-box: fill-box;
  transform-origin: 50% 0%;
  animation: duckStep 1.6s ease-in-out 4 forwards;
}

@keyframes duckStep {
  0%, 50%, 100% { transform: translateY(0); }
  25%, 75% { transform: translateY(-0.6px); }
}

/*
 * Чередование надписей: у каждой пилюли период — 2 цикла (3.2s), 2 повтора = ровно 4 цикла утёнка.
 * --1 («я уточка») горит в 1-м цикле периода (циклы 1 и 3), --2 («кря») — во 2-м (циклы 2 и 4); каждая
 * всплывает в пике шага (25% цикла = 12.5% периода) и гаснет задолго до следующей — они не перекрываются.
 * Селектор специфичнее общего правила .badge-fx--burst (4 повтора), поэтому здесь — 2 повтора.
 */
.status-badge.status-badge--anim-duck_waddle .badge-fx--burst.badge-fx--quack-1 {
  animation: quackFirst 3.2s cubic-bezier(0.2, 0.9, 0.25, 1) 2 forwards;
}

.status-badge.status-badge--anim-duck_waddle .badge-fx--burst.badge-fx--quack-2 {
  animation: quackSecond 3.2s cubic-bezier(0.2, 0.9, 0.25, 1) 2 forwards;
}

@keyframes quackFirst {
  0%, 8% { opacity: 0; transform: translate(0, 2px) scale(0.7); }
  13% { opacity: 1; transform: translate(1px, -1px) scale(1.1); }
  30% { opacity: 1; transform: translate(3px, -5px) scale(1); }
  44%, 100% { opacity: 0; transform: translate(4px, -8px) scale(0.96); }
}

@keyframes quackSecond {
  0%, 58% { opacity: 0; transform: translate(0, 2px) scale(0.7); }
  63% { opacity: 1; transform: translate(1px, -1px) scale(1.1); }
  80% { opacity: 1; transform: translate(3px, -5px) scale(1); }
  94%, 100% { opacity: 0; transform: translate(4px, -8px) scale(0.96); }
}

/* ---------------------------------------------------------------------- */
/* 14. «Вентилятор» — fan_spin: пропеллер со «смазом», три струи ветра      */
/* ---------------------------------------------------------------------- */

/*
 * Цикл 1.6s: лопасти разгоняются до 3 оборотов (1080° = исходное положение — покой без скачка), на пике
 * оборотов проступает диск «смаза» и лопасти бледнеют — размытие движения. Справа от решётки (left: 92%)
 * три изогнутые струи (wind_swirl) «бегут» штрихом слева направо: ветер дует наружу, от имени.
 */
.status-badge--anim-fan_spin {
  animation: fanHum 1.6s ease-in-out 4 forwards;
}

@keyframes fanHum {
  0%, 100% { transform: translateX(0) scale(1); }
  40% { transform: translateX(0.4px) scale(1.04); }
  55% { transform: translateX(-0.3px) scale(1.04); }
  70% { transform: translateX(0.3px) scale(1.02); }
}

.status-badge--anim-fan_spin .badge-icon__rotor {
  transform-box: view-box;
  transform-origin: 10.5px 9.5px; /* ось = центр решётки (badgeIcons: circle cx=10.5 cy=9.5) */
  animation: fanRotor 1.6s cubic-bezier(0.45, 0, 0.55, 1) 4 forwards;
}

@keyframes fanRotor {
  0% { transform: rotate(0deg); opacity: 1; }
  30% { opacity: 0.55; }
  70% { opacity: 0.55; }
  100% { transform: rotate(1080deg); opacity: 1; }
}

.status-badge--anim-fan_spin .badge-icon__blur {
  animation: fanBlur 1.6s ease-in-out 4 forwards;
}

@keyframes fanBlur {
  0%, 15%, 88%, 100% { opacity: 0; }
  35%, 70% { opacity: 0.32; }
}

.badge-fx--wind {
  left: 90%;
  top: 0;
  width: 1.6em;
  height: 1.2em;
  opacity: 1;
}

.badge-fx__gust {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-dasharray: 0.6 1.6;
  stroke-dashoffset: 0.6;
  opacity: 0;
}

.status-badge--anim-fan_spin .badge-fx__gust {
  animation: windGust 1.6s ease-out 4 forwards;
}

.status-badge--anim-fan_spin .badge-fx__gust:nth-child(2) { animation-delay: 0.1s; }
.status-badge--anim-fan_spin .badge-fx__gust:nth-child(3) { animation-delay: 0.2s; }

/* Штрих бежит по кривой вправо (dashoffset уменьшается) и тает у конца — до следующего цикла. */
@keyframes windGust {
  0%, 20% { opacity: 0; stroke-dashoffset: 0.6; }
  36% { opacity: 0.95; stroke-dashoffset: 0.15; }
  62% { opacity: 0.75; stroke-dashoffset: -0.35; }
  82%, 100% { opacity: 0; stroke-dashoffset: -0.85; }
}

@media (prefers-reduced-motion: reduce) {
  .status-badge .badge-icon__crown,
  .status-badge .badge-icon__duck,
  .status-badge .badge-icon__foot,
  .status-badge .badge-icon__rotor,
  .status-badge .badge-icon__blur,
  .status-badge .badge-fx__gust {
    animation: none;
  }
}

/* ====================================================================== */
/* Sprint 13: «Скуп протеина», «Freedom»                                   */
/* ====================================================================== */
/*
 * Правила те же: 4 цикла при появлении / тапе / примерке, покой в нейтральном кадре (forwards, 100% = исходное),
 * всё — только под классом анимации; надписи «protein» и «free» — пилюли .badge-fx--burst у правого верхнего угла
 * (архитектура «душноо» / «yum!»), absolute, без указателя, вне пика — opacity: 0.
 */

.status-badge:not([class*="status-badge--anim-"]) .badge-icon__wave,
.status-badge:not([class*="status-badge--anim-"]) .badge-icon__bird,
.status-badge:not([class*="status-badge--anim-"]) .badge-icon__link {
  animation: none;
}

/* ---------------------------------------------------------------------- */
/* 15. «Скуп протеина» — protein_rock: покачивание и плеск протеина         */
/* ---------------------------------------------------------------------- */

/*
 * Цикл 2.2s: шейкер качается от донышка (затухающие колебания), а уровень протеина внутри (badge-icon__wave)
 * наклоняется в обратную сторону с перехлёстом — жидкость «держит горизонт» и плещется. В пике первого
 * наклона (20%) всплывает «protein».
 */
.status-badge[class*="status-badge--anim-"].status-badge--anim-protein_rock {
  transform-origin: 50% 90%;
}

.status-badge--anim-protein_rock {
  animation: proteinRock 2.2s ease-in-out 4 forwards;
}

@keyframes proteinRock {
  0%, 86%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(-7deg); }
  40% { transform: rotate(6deg); }
  58% { transform: rotate(-3deg); }
  72% { transform: rotate(1.5deg); }
}

.status-badge--anim-protein_rock .badge-icon__wave {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: proteinSlosh 2.2s ease-in-out 4 forwards;
}

@keyframes proteinSlosh {
  0%, 86%, 100% { transform: translate(0, 0) rotate(0deg); }
  20% { transform: translate(-0.5px, 0) rotate(10deg); }
  40% { transform: translate(0.5px, -0.3px) rotate(-9deg); }
  58% { transform: translate(-0.3px, 0) rotate(5deg); }
  72% { transform: translate(0.2px, 0) rotate(-2deg); }
}

.status-badge--anim-protein_rock .badge-fx--protein {
  animation: proteinPop 2.2s cubic-bezier(0.2, 0.9, 0.25, 1) 4 forwards;
}

@keyframes proteinPop {
  0%, 13% { opacity: 0; transform: translate(0, 2px) scale(0.7); }
  20% { opacity: 1; transform: translate(1px, -1px) scale(1.1); }
  48% { opacity: 1; transform: translate(3px, -5px) scale(1); }
  70%, 100% { opacity: 0; transform: translate(4px, -8px) scale(0.96); }
}

/* ---------------------------------------------------------------------- */
/* 16. «Freedom» — freedom_float: птица парит, цепь расходится, «free»      */
/* ---------------------------------------------------------------------- */

/*
 * Цикл 2.6s: значок мягко всплывает на 2px и опускается (парение), птица взмахивает крыльями (сжатие по
 * вертикали от оси крыльев), половинки разорванного звена расходятся на полпикселя. В верхней точке (40%) —
 * «free».
 */
.status-badge--anim-freedom_float {
  animation: freedomHover 2.6s ease-in-out 4 forwards;
}

@keyframes freedomHover {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(-2px); }
  70% { transform: translateY(-0.6px); }
}

.status-badge--anim-freedom_float .badge-icon__bird {
  transform-box: view-box;
  transform-origin: 12px 10.4px; /* ось крыльев (badgeIcons: «M3 10.4 … 12 10.4 …») */
  animation: freedomFlap 2.6s ease-in-out 4 forwards;
}

@keyframes freedomFlap {
  0%, 100% { transform: translateY(0) scaleY(1); }
  20% { transform: translateY(-0.6px) scaleY(0.72); }
  40% { transform: translateY(-1.4px) scaleY(1.08); }
  60% { transform: translateY(-0.8px) scaleY(0.84); }
  80% { transform: translateY(-0.2px) scaleY(1); }
}

.status-badge--anim-freedom_float .badge-icon__link {
  animation: freedomLinkLeft 2.6s ease-in-out 4 forwards;
}

.status-badge--anim-freedom_float .badge-icon__link + .badge-icon__link {
  animation-name: freedomLinkRight;
}

@keyframes freedomLinkLeft {
  0%, 100% { transform: translateX(0); }
  40% { transform: translateX(-0.7px); }
}

@keyframes freedomLinkRight {
  0%, 100% { transform: translateX(0); }
  40% { transform: translateX(0.7px); }
}

.status-badge--anim-freedom_float .badge-fx--free {
  animation: freePop 2.6s cubic-bezier(0.2, 0.9, 0.25, 1) 4 forwards;
}

@keyframes freePop {
  0%, 30% { opacity: 0; transform: translate(0, 2px) scale(0.7); }
  40% { opacity: 1; transform: translate(1px, -1px) scale(1.1); }
  62% { opacity: 1; transform: translate(3px, -5px) scale(1); }
  84%, 100% { opacity: 0; transform: translate(4px, -8px) scale(0.96); }
}

@media (prefers-reduced-motion: reduce) {
  .status-badge .badge-icon__wave,
  .status-badge .badge-icon__bird,
  .status-badge .badge-icon__link {
    animation: none;
  }
}