/* =========================================================
   motion.css — افکت‌های حرکتی تکمیلی (سبک: فقط transform / opacity)
   روی انیمیشن‌های fx.css اضافه می‌شود و با «کاهش حرکت» سیستم خاموش می‌شود.
   ========================================================= */

/* ۱) هاله‌ی نورانی که نرم دنبال ماوس می‌آید (فقط دسکتاپ) */
.mx-aura {
  position: fixed; left: 0; top: 0; z-index: -1; width: 480px; height: 480px; margin: -240px 0 0 -240px; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, rgba(243, 60, 192, .17), rgba(67, 73, 255, .1) 46%, transparent 70%); transition: opacity .6s; will-change: transform;
}
.mx-aura.is-on { opacity: 1; }

/* ۲) هدر هوشمند: با اسکرول به پایین کنار می‌رود و با اسکرول به بالا برمی‌گردد */
.site-header { transition: padding .35s cubic-bezier(.22, .8, .24, 1), transform .5s cubic-bezier(.22, .8, .24, 1); }
.site-header.mx-hide { transform: translateY(-115%); }

/* ۳) حلقه‌ی پیشرفت اسکرول دور دکمه‌ی «بازگشت به بالا» */
.to-top { --p: 0; }
.to-top::before {
  content: ""; position: absolute; inset: -3px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(var(--magenta, #F33CC0) calc(var(--p) * 1turn), rgba(255, 255, 255, .12) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
}

/* ۴) جرقه‌ی کلیک روی دکمه‌ی اصلی و کانفتی موفقیت */
.mx-spark, .mx-conf { position: fixed; left: 0; top: 0; z-index: 2147482000; pointer-events: none; }
.mx-spark { width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; }
.mx-conf { opacity: 0; border-radius: 2px; }

/* ۵) ورود نرم کارت‌ها همزمان با اسکرول (CSS خالص؛ در مرورگرهای بدون پشتیبانی فقط بی‌اثر است) */
@keyframes mx-rise { from { opacity: 0; transform: translateY(46px) scale(.94); } }
@supports (animation-timeline: view()) {
  .cat-card, .post-card, .review-card { animation: mx-rise linear backwards; animation-timeline: view(); animation-range: entry 0% entry 38%; }
}

/* ۶) بعد از باز شدن پرده‌ی لودینگ: لوگو و لینک‌های منو با تأخیر کوتاه می‌آیند */
@keyframes mx-pop { from { opacity: 0; transform: scale(.7) rotate(-12deg); } }
@keyframes mx-fade-down { from { opacity: 0; transform: translateY(-10px); } }
html.pl-done .site-header .brand img { animation: mx-pop .8s .2s cubic-bezier(.34, 1.4, .64, 1) backwards; }
html.pl-done .site-header .nav-links { animation: mx-fade-down .7s .3s cubic-bezier(.22, .8, .24, 1) backwards; }
html.pl-done .site-header .nav-end { animation: mx-fade-down .7s .42s cubic-bezier(.22, .8, .24, 1) backwards; }

@media (prefers-reduced-motion: reduce) {
  .mx-aura, .mx-spark, .mx-conf { display: none; }
  .site-header.mx-hide { transform: none; }
  .cat-card, .post-card, .review-card, .site-header .brand img, .site-header .nav-links, .site-header .nav-end { animation: none !important; }
}