/* ============================================================
   رقيم — css/animations.css
   كل حركات وانيميشن الواجهة في ملف واحد مركزي
   ============================================================ */

/* ── انتقال الصفحات عند التنقّل ── */
@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.page-fade-in { animation: pageFadeIn .38s cubic-bezier(.16,1,.3,1); }

/* ── ظهور تدريجي عام (يُستخدم للبطاقات، الشاشات...) ── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.anim-fade-up { animation: fadeInUp .4s cubic-bezier(.16,1,.3,1) both; }

/* ظهور متتابع للبطاقات (Stagger) — يُضبط التأخير عبر --d من JS أو inline style */
.anim-stagger { animation: fadeInUp .45s cubic-bezier(.16,1,.3,1) both; animation-delay: var(--d, 0ms); }

/* ── نبضة عند تحديد/إكمال عنصر (تشيك، عدّاد، خانة تقويم) ── */
@keyframes popScale {
  0%   { transform: scale(.55); }
  55%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}
.habit-check.checked { animation: popScale .38s cubic-bezier(.34,1.56,.64,1); }
.cal-day.fasted { animation: popScale .3s cubic-bezier(.34,1.56,.64,1); }

/* ── نبضة رقمية بسيطة (تستخدمها JS عبر bumpEl) ── */
@keyframes bump {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.22); color: var(--ac); }
  100% { transform: scale(1); }
}
.anim-bump { animation: bump .32s ease; }

/* ── هزّة خفيفة عند خطأ في نموذج ── */
@keyframes shakeX {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-6px); }
  40%      { transform: translateX(5px); }
  60%      { transform: translateX(-4px); }
  80%      { transform: translateX(3px); }
}
.anim-shake { animation: shakeX .38s ease; }

/* ── نبض هالة عند الوصول لـ ١٠٠٪ ── */
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(184,134,42,.35); }
  50%      { box-shadow: 0 0 0 10px rgba(184,134,42,0); }
}
.anim-glow { animation: glowPulse 1.6s ease-out 2; }

/* ── قطع الاحتفال (Confetti) ── */
@keyframes confettiFall {
  0%   { transform: translate(0,0) rotate(0deg); opacity: 1; }
  100% { transform: translate(var(--cx,0), 140px) rotate(var(--cr,360deg)); opacity: 0; }
}
.confetti-piece {
  position: fixed; top: var(--ct,40%); right: var(--cl,50%); z-index: 500;
  font-size: var(--cs, 18px); pointer-events: none;
  animation: confettiFall var(--cdur,1.1s) ease-out forwards;
}

/* ── دخول الشاشة الأولى (تسجيل الدخول) ── */
#auth-screen .auth-card { animation: fadeInUp .5s cubic-bezier(.16,1,.3,1) both; }

/* ── انتقال سلس للألوان عند تغيير الثيم/اللون المميز في كل مكان ── */
.card, .btn, .input, .select, textarea.input, .chip, .badge, .nav-item, .bn-item,
.prayer-status-btn, .cal-day, .switch, .switch::after, .color-dot, .mood-btn, .week-day .wd-dot {
  transition: background-color .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease, transform .15s ease;
}

/* ── ضغط لطيف على أي عنصر قابل للنقر ── */
.nav-item:active, .bn-item:active, .chip:active, .mood-btn:active,
.quick-link:active, .color-dot:active, .cal-day:active, .stat-card:active {
  transform: scale(.96);
}

/* ── احترام تفضيل تقليل الحركة لمن يحتاجه ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}