/* ============================================================
   ANIMATIONS
   ============================================================ */

@keyframes fadeSlideDown{
  from{ opacity:0; transform: translateY(-8px); }
  to{ opacity:1; transform: translateY(0); }
}

@keyframes fadeIn{
  from{ opacity:0; }
  to{ opacity:1; }
}

@keyframes zoomIn{
  from{ opacity:0; transform: scale(0.85); }
  to{ opacity:1; transform: scale(1); }
}

@keyframes popIn{
  0%{ opacity:0; transform: scale(0.6); }
  70%{ transform: scale(1.08); }
  100%{ opacity:1; transform: scale(1); }
}

.emoji-card{ animation: popIn 0.35s ease backwards; }
.emoji-card:nth-child(8n+1){ animation-delay: 0.00s; }
.emoji-card:nth-child(8n+2){ animation-delay: 0.02s; }
.emoji-card:nth-child(8n+3){ animation-delay: 0.04s; }
.emoji-card:nth-child(8n+4){ animation-delay: 0.06s; }
.emoji-card:nth-child(8n+5){ animation-delay: 0.08s; }
.emoji-card:nth-child(8n+6){ animation-delay: 0.10s; }
.emoji-card:nth-child(8n+7){ animation-delay: 0.12s; }
.emoji-card:nth-child(8n+8){ animation-delay: 0.14s; }

.spin-slow{ animation: spin 12s linear infinite; }
@keyframes spin{ from{ transform: rotate(0deg);} to{ transform: rotate(360deg);} }

.pulse{ animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.55; } }