/* ============================================================
   interactions.css — Animações de interação (curtir, hover de
   cards, badges, botões). Aplicadas no feed e na tela de post.
   ============================================================ */

/* ---------- Botão de curtir com burst ---------- */
.like-btn {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--text-mute); font-weight: var(--fw-semibold);
  transition: color var(--t-fast), transform var(--t-fast);
}
.like-btn:hover { color: var(--text); }
.like-btn:active { transform: scale(0.9); }
.like-btn.is-on { color: var(--danger); }
.like-btn svg.icon { transition: transform var(--t-fast); }
/* pulo ao curtir */
.like-btn.just-liked svg.icon { animation: heart-pop 0.45s cubic-bezier(0.2,0.8,0.3,1.4); }
@keyframes heart-pop {
  0% { transform: scale(1); }
  35% { transform: scale(1.45); }
  60% { transform: scale(0.85); }
  100% { transform: scale(1); }
}
/* anel de explosão */
.like-btn.just-liked::before {
  content: ""; position: absolute; left: 9px; top: 50%;
  width: 22px; height: 22px; margin: -11px 0 0 -11px;
  border-radius: 50%; border: 2px solid var(--danger);
  animation: heart-ring 0.5s ease-out forwards;
  pointer-events: none;
}
@keyframes heart-ring {
  0% { transform: scale(0.3); opacity: 0.7; }
  100% { transform: scale(1.8); opacity: 0; }
}
/* partículas (corações pequenos) */
.heart-spark {
  position: absolute; left: 9px; top: 50%;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--danger); pointer-events: none;
  animation: spark-fly 0.6s ease-out forwards;
}
@keyframes spark-fly {
  0% { transform: translate(0,0) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx,0), var(--dy,-18px)) scale(0); opacity: 0; }
}

/* ---------- Cards de post: hover ---------- */
.post-anim {
  transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}
.post-anim:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-pop);
  border-color: var(--border-strong);
}

/* ---------- Badge de tipo: leve animação de entrada ---------- */
.camino-badge { animation: badge-in 0.3s ease both; }
@keyframes badge-in { from { opacity: 0; transform: translateX(-6px); } }

/* ---------- Botões genéricos: tap feedback ---------- */
.btn { transition: transform var(--t-fast), background var(--t-fast), box-shadow var(--t-fast), opacity var(--t-fast); }
.btn:active:not([disabled]) { transform: scale(0.97); }

@media (prefers-reduced-motion: reduce) {
  .like-btn.just-liked svg.icon,
  .like-btn.just-liked::before,
  .heart-spark, .camino-badge { animation: none; }
  .post-anim:hover { transform: none; }
}

/* entrada do feed em cascata */
.camino-latest .camino-post { animation: feed-in 0.4s ease both; }
.camino-latest .camino-post:nth-child(1) { animation-delay: 0.03s; }
.camino-latest .camino-post:nth-child(2) { animation-delay: 0.07s; }
.camino-latest .camino-post:nth-child(3) { animation-delay: 0.11s; }
.camino-latest .camino-post:nth-child(4) { animation-delay: 0.15s; }
.camino-latest .camino-post:nth-child(5) { animation-delay: 0.19s; }
.camino-latest .camino-post:nth-child(n+6) { animation-delay: 0.22s; }
@keyframes feed-in { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) { .camino-latest .camino-post { animation: none; } }