/* ==========================================================================
   FINKU GEN-Z — MICRO ANIMATIONS & TRANSITIONS (animations.css)
   ========================================================================== */

/* Fade In (page entry) */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Slide Up (modals, cards) */
@keyframes slideUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Scale In (badges, chips) */
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

/* Shimmer (loading skeleton) */
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

/* Toast entry animation */
.toast-item {
  animation: slideUp 0.3s var(--transition-bounce) forwards;
}
.toast-item.closing {
  animation: fadeOut 0.25s ease forwards;
}
@keyframes fadeOut {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(16px); }
}

/* Skeleton loading */
.skeleton {
  background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--bg-glass-hover) 50%, var(--bg-tertiary) 75%);
  background-size: 800px 100%;
  animation: shimmer 1.6s infinite;
  border-radius: var(--border-radius-sm);
}

/* Bounce hover effect for interactive elements */
.btn-primary:active,
.btn-danger:active {
  transform: scale(0.97) translateY(0) !important;
  transition: transform 0.1s ease;
}

/* Progress bar fill animation */
.progress-bar {
  animation: progressFill 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes progressFill {
  from { width: 0 !important; }
}

/* Stat value count-up feel (CSS only) */
.stat-value {
  animation: scaleIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Mobile sidebar slide */
.app-sidebar {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Card hover lift */
.card:hover {
  transform: translateY(-1px);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.goal-card:hover,
.sub-item:hover,
.bnpl-card:hover,
.wishlist-item:hover {
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4);
}