/* ─────────────────────────────────────────────────────────────
   انیمیشن‌ها — معادل حرکت‌های فلاتر (MaterialPageRoute، Hero،
   AnimatedContainer، InkWell ripple و ...).
   همه‌جا prefers-reduced-motion رعایت شده است.
   ───────────────────────────────────────────────────────────── */

/* ---------- ۱) گذار بین صفحه‌ها ---------- */
/* در مرورگرهایی که View Transitions دارند، از آن استفاده می‌شود. */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(page) {
    animation: vt-out var(--dur-mid) var(--ease-in) both;
  }
  ::view-transition-new(page) {
    animation: vt-in var(--dur-slow) var(--ease-out) both;
  }
  /* در RTL، صفحه‌ی جدید از سمت چپ می‌آید (مثل فلاتر با Directionality.rtl) */
  @keyframes vt-in  { from { opacity: 0; transform: translateX(-24px); } }
  @keyframes vt-out { to   { opacity: 0; transform: translateX(16px); } }
}

/* فالبک برای مرورگرهای بدون View Transitions */
.page-enter {
  animation: page-enter var(--dur-slow) var(--ease-out) both;
}
.page-leave {
  animation: page-leave var(--dur-mid) var(--ease-in) both;
}
@keyframes page-enter {
  from { opacity: 0; transform: translateX(-22px) scale(.99); }
  to   { opacity: 1; transform: none; }
}
@keyframes page-leave {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateX(14px) scale(.995); }
}

/* ---------- ۲) ورود پلکانی آیتم‌های لیست ---------- */
/* هر ردیف با تاخیر کمی بعد از ردیف قبلی ظاهر می‌شود. */
.stagger > * {
  animation: rise var(--dur-slow) var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 28ms);
}
@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- ۳) ریپل (InkWell) ---------- */
.ripple {
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.ripple > .ripple-ink {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background: currentColor;
  opacity: .18;
  pointer-events: none;
  animation: ripple 520ms var(--ease-out) forwards;
}
@keyframes ripple {
  to { transform: scale(2.6); opacity: 0; }
}

/* ---------- ۴) اسکلتون بارگذاری ---------- */
.skeleton {
  background: var(--skeleton);
  background-size: 400% 100%;
  animation: shimmer 1.3s linear infinite;
  border-radius: var(--r-sm);
  color: transparent !important;
}
@keyframes shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* ---------- ۵) دیالوگ و بات‌شیت ---------- */
.scrim {
  position: fixed;
  inset: 0;
  background: var(--scrim);
  opacity: 0;
  animation: fade-in var(--dur-mid) var(--ease-out) forwards;
  z-index: 900;
}
.scrim.closing { animation: fade-out var(--dur-fast) var(--ease-in) forwards; }
@keyframes fade-in  { to { opacity: 1; } }
@keyframes fade-out { to { opacity: 0; } }

.dialog {
  animation: dialog-in var(--dur-slow) var(--ease-spring) both;
}
.dialog.closing { animation: dialog-out var(--dur-fast) var(--ease-in) both; }
@keyframes dialog-in {
  from { opacity: 0; transform: translateY(14px) scale(.94); }
  to   { opacity: 1; transform: none; }
}
@keyframes dialog-out {
  to { opacity: 0; transform: translateY(8px) scale(.97); }
}

.sheet {
  animation: sheet-in var(--dur-slow) var(--ease-out) both;
}
.sheet.closing { animation: sheet-out var(--dur-mid) var(--ease-in) both; }
@keyframes sheet-in  { from { transform: translateY(100%); } }
@keyframes sheet-out { to   { transform: translateY(100%); } }

/* ---------- ۶) کشو (Drawer) ---------- */
.drawer {
  transform: translateX(100%);            /* RTL: از راست باز می‌شود */
  transition: transform var(--dur-slow) var(--ease-standard);
}
.drawer.open { transform: none; }

/* ---------- ۷) نان (Toast / SnackBar) ---------- */
.toast {
  animation: toast-in var(--dur-slow) var(--ease-spring) both;
}
.toast.closing { animation: toast-out var(--dur-mid) var(--ease-in) both; }
@keyframes toast-in  { from { opacity: 0; transform: translateY(28px) scale(.96); } }
@keyframes toast-out { to   { opacity: 0; transform: translateY(16px); } }

/* ---------- ۸) FAB ---------- */
.fab {
  transition: transform var(--dur-mid) var(--ease-spring),
              box-shadow var(--dur-mid) var(--ease-standard);
}
.fab:hover  { transform: scale(1.06); box-shadow: var(--shadow-3); }
.fab:active { transform: scale(.94); }
.fab.hidden { transform: scale(0) rotate(-90deg); }

/* ---------- ۹) نوار پیشرفت نامعین (سینک) ---------- */
.linear-progress {
  height: 3px;
  overflow: hidden;
  background: color-mix(in srgb, var(--attention) 24%, transparent);
}
.linear-progress::after {
  content: '';
  display: block;
  height: 100%;
  width: 40%;
  background: var(--attention);
  animation: indeterminate 1.25s var(--ease-standard) infinite;
}
@keyframes indeterminate {
  0%   { transform: translateX(-120%); }
  100% { transform: translateX(320%); }
}

/* ---------- ۱۰) اسپینر ---------- */
.spinner {
  width: 26px; height: 26px;
  border: 3px solid color-mix(in srgb, var(--attention) 28%, transparent);
  border-top-color: var(--attention);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- ۱۱) شمارنده‌ی عددی نرم ---------- */
.count-up { transition: opacity var(--dur-fast) var(--ease-standard); }

/* ---------- احترام به تنظیم کاربر ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}