/* =============================================================================
   PACKAGES — Animations v2 (MMORPG Premium)
   Regras:
   • Apenas transform e opacity — sem layout/paint triggers
   • Sem box-shadow animado, sem filter, sem backdrop-filter
   • Durações ≤ 280ms (exceto pulso de atenção)
   ============================================================================= */

/* ─── Card selecionado — entrada MMORPG ─────────────────────────────────────── */

@keyframes pkg-card-select {
  from { opacity: 0.5; transform: scale(0.95) translateY(2px); }
  to   { opacity: 1;   transform: scale(1)    translateY(0);   }
}
.pkg-sidebar-item.active {
  animation: pkg-card-select 0.2s cubic-bezier(0.34, 1.36, 0.64, 1) both;
}

/* ─── Hero header — slide in cinematic ─────────────────────────────────────── */

@keyframes pkg-hero-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.pkg-detail-hero {
  animation: pkg-hero-in 0.22s ease-out both;
}

/* ─── Slot tabs — stagger in ───────────────────────────────────────────────── */

@keyframes pkg-slot-in {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}
.pkg-slot-tabs {
  animation: pkg-slot-in 0.2s ease-out both;
  animation-delay: 0.04s;
}

/* ─── Body do detalhe — fade in ────────────────────────────────────────────── */

@keyframes pkg-detail-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.pkg-detail-body,
.pkg-detail-footer {
  animation: pkg-detail-in 0.22s ease-out both;
  animation-delay: 0.06s;
}

/* ─── Linha de item — cascade stagger ──────────────────────────────────────── */

@keyframes pkg-row-in {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: translateX(0); }
}
.pkg-detail-row {
  animation: pkg-row-in 0.18s ease-out both;
}
.pkg-detail-row:nth-child(1)  { animation-delay: 0.00s; }
.pkg-detail-row:nth-child(2)  { animation-delay: 0.03s; }
.pkg-detail-row:nth-child(3)  { animation-delay: 0.06s; }
.pkg-detail-row:nth-child(4)  { animation-delay: 0.09s; }
.pkg-detail-row:nth-child(5)  { animation-delay: 0.12s; }
.pkg-detail-row:nth-child(6)  { animation-delay: 0.15s; }
.pkg-detail-row:nth-child(n+7) { animation-delay: 0.17s; }

/* ─── Cards featured (estado vazio) — stagger ──────────────────────────────── */

@keyframes pkg-empty-card-in {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.pkg-empty-card {
  animation: pkg-empty-card-in 0.28s cubic-bezier(0.34, 1.2, 0.64, 1) both;
}
.pkg-empty-card:nth-child(1) { animation-delay: 0.00s; }
.pkg-empty-card:nth-child(2) { animation-delay: 0.06s; }
.pkg-empty-card:nth-child(3) { animation-delay: 0.12s; }
.pkg-empty-card:nth-child(4) { animation-delay: 0.04s; }
.pkg-empty-card:nth-child(5) { animation-delay: 0.10s; }
.pkg-empty-card:nth-child(6) { animation-delay: 0.16s; }

/* ─── Warning badge — pulso leve ────────────────────────────────────────────── */

@keyframes pkg-warn-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.45; }
}
.pkg-slot-no-price-warn {
  animation: pkg-warn-pulse 2.6s ease-in-out infinite;
}

/* ─── Botão adicionar — feedback de clique ──────────────────────────────────── */

@keyframes pkg-btn-confirm {
  0%   { transform: scale(1); }
  35%  { transform: scale(0.92); }
  100% { transform: scale(1); }
}
.pkg-detail-add-btn:active {
  animation: pkg-btn-confirm 0.18s ease-out both;
}

/* ─── Badge de carrinho — pop ───────────────────────────────────────────────── */

@keyframes pkg-badge-pop {
  from { opacity: 0; transform: scale(0.5); }
  to   { opacity: 1; transform: scale(1); }
}
.pkg-card-cart-badge {
  animation: pkg-badge-pop 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* ─── Estado vazio — title fade ─────────────────────────────────────────────── */

@keyframes pkg-empty-title-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.pkg-detail-empty {
  animation: pkg-empty-title-in 0.3s ease-out both;
}

/* ─── Linha de acento do slot ativo — grow ──────────────────────────────────── */

@keyframes pkg-slot-accent-grow {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}
.pkg-slot-btn.active::after {
  animation: pkg-slot-accent-grow 0.18s ease-out both;
  transform-origin: top center;
}