/* ============================================================
   Global "smooth" layer — نرم‌سازیِ سراسریِ تعامل‌ها
   مکملِ انیمیشن‌های موجود است، نه جایگزینِ آن‌ها.
   بعد از Styles.css و قبل از rtl.css لود می‌شود.
   ============================================================ */

/* ---- 1) گذار نرمِ صفحه‌به‌صفحه (View Transitions API) ----
   در مرورگرهای Chromium/Edge جدید فعال است؛ در بقیه بی‌اثر و
   ناوبری به‌صورت عادی انجام می‌شود. */
@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.42s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* محوشدنِ ملایمِ صفحه هنگام ورود — فقط برای مرورگرهایی که View
   Transitions ندارند (در بقیه، خودِ VT گذار را مدیریت می‌کند تا
   محوِ دوبل رخ ندهد). */
@keyframes site-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@supports not (view-transition-name: none) {
  body { animation: site-fade-in 0.45s ease both; }
}

/* ---- 2) ترنزیشنِ پیش‌فرضِ عناصرِ تعاملی ----
   انتخابگرها سطحِ پایین (element) هستند تا کلاس‌های Tailwind
   موجود (transition-all/duration-*) با تخصیصِ بالاتر، تنظیمِ خودشان
   را حفظ کنند و این فقط برای عناصرِ بدونِ ترنزیشن اعمال شود. */
a,
button,
summary,
label,
.menu-item,
.prod-row,
.search-item,
.search-open,
.search-close,
.lang-row,
.Categories-Cards,
.Categories-CardsPost,
[role="button"] {
  transition: color .25s ease,
              background-color .25s ease,
              background-image .25s ease,
              box-shadow .25s ease,
              border-color .25s ease,
              opacity .25s ease,
              transform .25s ease;
}

/* ---- 3) بازخوردِ لمسیِ «فشار» هنگام کلیک ----
   کمی فرورفتگی که حس کلیکِ نرم می‌دهد. */
button:active,
.menu-item:active,
.search-open:active,
.search-close:active,
.lang-row:active,
.Categories-Cards:active,
.Categories-CardsPost:active,
.prod-row:active,
[role="button"]:active {
  transform: scale(0.96);
}

/* ---- 4) باز/بسته‌شدنِ نرمِ منوی زبان ----
   به‌جای قطعِ ناگهانیِ display، با محو و لغزشِ ملایم.
   display را با !important ثابت نگه می‌داریم تا کلاس hiddenِ
   تیلویند (display:none) جلوی انیمیشن را نگیرد و خودِ hidden
   فقط حالتِ محوشده را بسازد. */
#language-dropdown,
#language-mobile-dropdown {
  display: block !important;
  transform-origin: top center;
  transition: opacity .22s ease, transform .22s ease;
}
#language-dropdown.hidden,
#language-mobile-dropdown.hidden {
  opacity: 0;
  transform: translateY(-8px) scale(0.97);
  pointer-events: none;
}
#language-dropdown:not(.hidden),
#language-mobile-dropdown:not(.hidden) {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* ---- 5) چرخشِ نرمِ آیکونِ فلش‌ها (زبان/منوها) ---- */
#language-icon,
#language-mobile-icon,
.fa-chevron-down,
.fa-angle-down,
.fa-angle-up {
  transition: transform .25s ease;
}

/* ---- 6) احترام به ترجیحِ کاهشِ حرکت ---- */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  body { animation: none; }
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}