.leaderboard-row-pop,
.avatar-wrap.avatar-effect-pop,
.avatar-wrap.avatar-effect-pop-rgb,
.avatar-wrap.avatar-effect-pop-gold,
.rank-preview-avatar.avatar-effect-pop,
.rank-preview-avatar.avatar-effect-pop-rgb,
.rank-preview-avatar.avatar-effect-pop-gold {
  animation: legacyAvatarPop .52s cubic-bezier(.2, .9, .28, 1.24);
  transform-origin: 50% 58%;
  will-change: transform;
}

/* Move the complete ranking row once; colored rings stay on the avatar. */
.leaderboard-row-pop {
  animation-name: legacyLeaderboardRowPop;
}

.leaderboard-row-pop .avatar-wrap,
.leaderboard-row-pop .rank-preview-avatar {
  animation: none;
  will-change: auto;
}

.avatar-wrap.avatar-effect-pop-rgb::after,
.avatar-wrap.avatar-effect-pop-gold::after,
.rank-preview-avatar.avatar-effect-pop-rgb::after,
.rank-preview-avatar.avatar-effect-pop-gold::after {
  content: "";
  position: absolute;
  inset: -4px;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
}

.avatar-wrap.avatar-effect-pop-rgb::after,
.rank-preview-avatar.avatar-effect-pop-rgb::after {
  background: conic-gradient(from 15deg, #ff2f81, #ffb52e, #fff06a, #42f59b, #35d9ff, #7b68ff, #ef4cff, #ff2f81);
  box-shadow: 0 0 8px rgba(53, 217, 255, .9), 0 0 14px rgba(239, 76, 255, .55);
  animation: legacyRgbRing .52s ease-out both;
}

.avatar-wrap.avatar-effect-pop-gold::after,
.rank-preview-avatar.avatar-effect-pop-gold::after {
  background: conic-gradient(from 8deg, #fff9d7, #ffd966, #f4b41a, #a96500, #ffe99b, #d89000, #fff9d7);
  box-shadow: 0 0 8px rgba(255, 218, 92, .95), 0 0 15px rgba(211, 137, 0, .7);
  animation: legacyGoldRing .52s ease-out both;
}

.avatar-wrap.avatar-effect-pop-rgb .avatar,
.avatar-wrap.avatar-effect-pop-gold .avatar,
.rank-preview-avatar.avatar-effect-pop-rgb .face,
.rank-preview-avatar.avatar-effect-pop-gold .face {
  position: relative;
  z-index: 1;
}

.rank-preview-avatar.avatar-effect-pop-rgb .crown,
.rank-preview-avatar.avatar-effect-pop-gold .crown {
  z-index: 2;
}

@keyframes legacyLeaderboardRowPop {
  0% { transform: translateY(0) scale(1); }
  38% { transform: translateY(-4px) scale(1.05); }
  68% { transform: translateY(1px) scale(.99); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes legacyAvatarPop {
  0% { transform: translateY(0) scale(1); }
  38% { transform: translateY(-7%) scale(1.22); }
  68% { transform: translateY(1%) scale(.96); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes legacyRgbRing {
  0% { opacity: 0; transform: rotate(-35deg) scale(.88); }
  24% { opacity: 1; transform: rotate(45deg) scale(1.04); }
  72% { opacity: .9; }
  100% { opacity: 0; transform: rotate(310deg) scale(1); }
}

@keyframes legacyGoldRing {
  0% { opacity: 0; transform: rotate(-24deg) scale(.88); filter: brightness(.9); }
  24% { opacity: 1; transform: rotate(38deg) scale(1.04); filter: brightness(1.35); }
  72% { opacity: .95; filter: brightness(1.12); }
  100% { opacity: 0; transform: rotate(278deg) scale(1); filter: brightness(1); }
}

@media (prefers-reduced-motion: reduce) {
  .leaderboard-row-pop,
  .avatar-wrap.avatar-effect-pop,
  .avatar-wrap.avatar-effect-pop-rgb,
  .avatar-wrap.avatar-effect-pop-gold,
  .avatar-wrap.avatar-effect-pop-rgb::after,
  .avatar-wrap.avatar-effect-pop-gold::after,
  .rank-preview-avatar.avatar-effect-pop,
  .rank-preview-avatar.avatar-effect-pop-rgb,
  .rank-preview-avatar.avatar-effect-pop-gold,
  .rank-preview-avatar.avatar-effect-pop-rgb::after,
  .rank-preview-avatar.avatar-effect-pop-gold::after {
    animation: none !important;
  }
}