/* ══════════════════════════════════════
   ANIMAÇÕES & TRANSIÇÕES GLOBAIS
══════════════════════════════════════ */

/* ── Keyframes base ── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position:  600px 0; }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes popIn {
  0%   { transform: scale(0.8); opacity: 0; }
  70%  { transform: scale(1.06); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes ripple-anim {
  to { transform: scale(4); opacity: 0; }
}
@keyframes goldGlow {
  0%, 100% { box-shadow: 0 0 12px rgba(201,162,39,0.2); }
  50%       { box-shadow: 0 0 28px rgba(201,162,39,0.5); }
}
@keyframes pulse-badge {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.04); }
}

/* ── Scroll Reveal — estado inicial ── */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.65s cubic-bezier(0.22,1,0.36,1),
              transform 0.65s cubic-bezier(0.22,1,0.36,1);
}
.reveal.reveal-left  { transform: translateX(-32px); }
.reveal.reveal-right { transform: translateX(32px); }
.reveal.reveal-scale { transform: scale(0.9); opacity: 0; }
.reveal.visible {
  opacity: 1;
  transform: none;
}

/* ── Cards com transição aprimorada ── */
.fish-card {
  will-change: transform;
}
.fish-card:hover {
  transform: translateY(-8px) scale(1.01) !important;
}
.fish-card:active {
  transform: translateY(-2px) scale(0.98) !important;
  transition-duration: 0.1s !important;
}
.fish-card.card-exit {
  opacity: 0 !important;
  transform: scale(0.92) translateY(10px) !important;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease !important;
}
.fish-card.card-enter {
  animation: popIn 0.45s cubic-bezier(0.22,1,0.36,1) both;
}

/* ── Imagem do card ── */
.fish-card-img img {
  transition: transform 0.6s cubic-bezier(0.22,1,0.36,1),
              filter 0.4s ease;
}
.fish-card:hover .fish-card-img img {
  transform: scale(1.1);
  filter: brightness(1.07);
}

/* ── Skeleton Loader ── */
.skeleton {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.04) 0%,
    rgba(201,162,39,0.1)  50%,
    rgba(255,255,255,0.04) 100%
  );
  background-size: 600px 100%;
  animation: shimmer 1.6s infinite linear;
  border-radius: var(--radius);
}
.fish-card-skeleton {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  animation: fadeInUp 0.4s ease both;
}
.fish-card-skeleton .skel-img   { height: 220px; width: 100%; }
.fish-card-skeleton .skel-body  { padding: 1.4rem; display: flex; flex-direction: column; gap: 10px; }
.fish-card-skeleton .skel-line  { height: 14px; border-radius: 6px; }
.fish-card-skeleton .skel-line.wide  { width: 70%; }
.fish-card-skeleton .skel-line.mid   { width: 50%; }
.fish-card-skeleton .skel-line.short { width: 35%; }
.fish-card-skeleton .skel-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }
.fish-card-skeleton .skel-price { height: 28px; width: 80px; border-radius: 8px; }
.fish-card-skeleton .skel-btn   { height: 36px; width: 100px; border-radius: 50px; }

/* ── Filtros com transição ── */
.filter-tab {
  transition: background 0.3s ease, color 0.3s ease,
              box-shadow 0.3s ease, transform 0.2s ease;
}
.filter-tab:hover  { transform: translateY(-2px); }
.filter-tab:active { transform: scale(0.95); }

/* ── Ripple nos botões ── */
.btn-ripple { position: relative; overflow: hidden; }
.ripple-circle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.28);
  transform: scale(0);
  animation: ripple-anim 0.55s linear;
  pointer-events: none;
}

/* ── Modal aprimorado ── */
.modal-overlay { transition: opacity 0.35s ease; }
.modal {
  transition: transform 0.42s cubic-bezier(0.22,1,0.36,1), opacity 0.35s ease;
}
.modal-overlay:not(.open) .modal { transform: scale(0.88) translateY(24px); opacity: 0; }
.modal-overlay.open       .modal { transform: scale(1)    translateY(0);    opacity: 1; }

/* ── Botão fechar modal ── */
.btn-close-modal {
  transition: background 0.25s ease, transform 0.25s cubic-bezier(0.22,1,0.36,1);
}
.btn-close-modal:hover { transform: rotate(90deg) scale(1.15); }

/* ── Logo no header ── */
.nav-logo img {
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1), box-shadow 0.3s ease;
}
.nav-logo:hover img { transform: rotate(-6deg) scale(1.1); }

/* ── Navegação ── */
.nav-links a {
  transition: background 0.25s ease, color 0.25s ease, transform 0.2s ease;
}
.nav-links a:hover { transform: translateY(-1px); }

/* ── WhatsApp flutuante ── */
.whatsapp-float {
  transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), box-shadow 0.3s ease;
}
.whatsapp-float:hover { transform: scale(1.18) rotate(-6deg); }

/* ── Badge hero ── */
.hero-badge { animation: pulse-badge 3s ease infinite; }

/* ── Cards admin ── */
.admin-fish-card {
  transition: transform 0.3s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.3s ease, border-color 0.3s ease;
}
.admin-fish-card:hover {
  transform: translateY(-5px);
  animation: goldGlow 2s ease infinite;
}

/* ── Stats ── */
.stat-card { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.stat-card:hover { transform: translateY(-4px); }

/* ── Sidebar nav ── */
.nav-item { transition: background 0.25s ease, color 0.25s ease, transform 0.2s ease; }
.nav-item:hover { transform: translateX(4px); }

/* ── Toast ── */
.toast {
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1), opacity 0.35s ease;
  transform: translateY(20px);
  opacity: 0;
}
.toast.show { transform: translateY(0); opacity: 1; }

/* ── Grid ── */
.catalog-grid { transition: opacity 0.2s ease; }
.catalog-grid.filtering { opacity: 0.3; pointer-events: none; }