/* ============================================
   حركات وانتقالات (Motion) - استخدام محدود ومقصود
   ============================================ */

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-in-up {
  animation: fadeInUp 0.6s ease-out both;
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217, 146, 46, 0.45); }
  50% { box-shadow: 0 0 0 10px rgba(217, 146, 46, 0); }
}
.pulse-cta {
  animation: pulseGlow 2.2s ease-in-out infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}
.spinner {
  display: inline-block;
  width: 15px;
  height: 15px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  vertical-align: -2px;
}

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

/* الانتقال البسيط للأزرار والبطاقات عند التفاعل (وليس عند التحميل) */
.btn, .icon-btn, .product-card, .action-btn, input, select, textarea {
  transition: background-color .18s ease, border-color .18s ease, transform .12s ease, box-shadow .18s ease;
}