/* ═══════════════════════════════════════
   근을 품은 타이머 — 애니메이션
═══════════════════════════════════════ */

/* 카드 슬라이드인 */
@keyframes slide-up {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:none; }
}
.slide-up   { animation:slide-up .42s ease both; }
.slide-up-1 { animation-delay:.04s; }
.slide-up-2 { animation-delay:.10s; }
.slide-up-3 { animation-delay:.16s; }

/* 랭킹 항목 입장 */
@keyframes rank-enter {
  from { opacity:0; transform:translateX(-8px); }
  to   { opacity:1; transform:none; }
}
.rank-enter { animation:rank-enter .28s ease both; }

/* 뱃지 잠금 해제 */
@keyframes badge-unlock {
  0%   { transform:scale(0) rotate(-18deg); opacity:0; }
  65%  { transform:scale(1.18) rotate(4deg); opacity:1; }
  85%  { transform:scale(.96); }
  100% { transform:scale(1); opacity:1; }
}
.badge-unlock-anim { animation:badge-unlock .5s cubic-bezier(.34,1.56,.64,1) forwards; }

/* Flex 버스트 */
@keyframes flex-burst {
  0%   { transform:scale(.5) rotate(-8deg); opacity:0; }
  60%  { transform:scale(1.08) rotate(2deg); opacity:1; }
  100% { transform:scale(1); opacity:1; }
}

/* 불꽃 파티클 */
@keyframes spark-float {
  0%   { transform:translateY(0)   scale(1);    opacity:1; }
  70%  { transform:translateY(-44px) scale(.6); opacity:.7; }
  100% { transform:translateY(-68px) scale(0);  opacity:0; }
}
.spark {
  position:fixed; pointer-events:none;
  font-size:1.15rem; z-index:9998;
  animation:spark-float 1.1s ease-out forwards;
}

/* 타이머 토글 클릭 리플 */
@keyframes btn-ripple {
  0%   { transform:scale(0); opacity:.35; }
  100% { transform:scale(3); opacity:0; }
}
.btn-ripple {
  position:absolute; border-radius:50%; pointer-events:none;
  background:rgba(255,255,255,.3);
  width:60px; height:60px; margin-left:-30px; margin-top:-30px;
  animation:btn-ripple .5s ease-out forwards;
}