/* ==========================================
   Page Transitions
   ========================================== */

.page-enter {
  animation: pageIn var(--transition-slow) forwards;
}

.page-exit {
  animation: pageOut 150ms ease forwards;
}

@keyframes pageIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

/* ==========================================
   Card Staggered Entrance
   ========================================== */

.card-enter {
  animation: cardIn 400ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  opacity: 0;
}

@keyframes cardIn {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ==========================================
   Rating Button Press
   ========================================== */

.rating-bounce {
  animation: ratingBounce 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes ratingBounce {
  0% { transform: scale(1); }
  40% { transform: scale(0.85); }
  100% { transform: scale(1.05); }
}

/* ==========================================
   FAB Entrance
   ========================================== */

.fab-enter {
  animation: fabIn 500ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fabIn {
  from {
    opacity: 0;
    transform: scale(0) rotate(-90deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}

/* ==========================================
   Chip Toggle
   ========================================== */

.chip-toggle {
  animation: chipPop 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes chipPop {
  0% { transform: scale(1); }
  50% { transform: scale(0.92); }
  100% { transform: scale(1); }
}

/* ==========================================
   Confirm Dialog
   ========================================== */

.confirm-enter {
  animation: confirmIn 250ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes confirmIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ==========================================
   Shimmer (loading placeholder)
   ========================================== */

.shimmer {
  background: linear-gradient(
    90deg,
    var(--bg-card) 25%,
    rgba(200, 132, 42, 0.08) 50%,
    var(--bg-card) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-md);
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}