/*
 * مدرن فیتنس — لایهٔ افکت‌های موشن سینمایی (v3.1)
 * شامل: اسکرول نرم لِرپ، پارالاکس، پیشرفت صفحه، کرسر نورانی، ریپل دکمه،
 * دکمهٔ شاین، هایلایت تایپوگرافی، های‌لایت‌برد، رشتهٔ ذرات، شمارندهٔ برچسب‌دار
 * بدون هیچ CSS این‌لاین — همه‌چیز از همین فایل بارگذاری می‌شود.
 */

/* ---------- ۱) نوار پیشرفت مطالعهٔ صفحه (بالای هدر) ---------- */
#mfc-progress {
  position: fixed; top: 0; right: 0; left: 0; height: 3px; z-index: 100000;
  background: transparent; pointer-events: none;
}
#mfc-progress b {
  display: block; height: 100%; width: 0; border-radius: 0 3px 3px 0;
  background: linear-gradient(90deg, #FB923C, #F97316 60%, #EA580C);
  box-shadow: 0 0 12px rgba(249, 115, 22, .75), 0 0 3px rgba(249, 115, 22, .9);
  transition: width .12s linear;
}

/* ---------- ۲) پس‌زمینهٔ گرین — درصدهای ملایم و ثابت ---------- */
.mfc-gridbg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 56px 56px;
  opacity: .14;
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 35%, transparent 78%);
  mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 35%, transparent 78%);
}
html.mfc-dark .mfc-gridbg { opacity: .2; }
main { position: relative; z-index: 1; }

/* ---------- ۳) کرسر نورانی دنبال‌کنندهٔ موس (فقط دسکتاپ) ---------- */
#mfc-cursor {
  position: fixed; top: 0; left: 0; width: 46px; height: 46px; z-index: 99999;
  border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, rgba(249,115,22,.16) 0%, rgba(249,115,22,.07) 45%, transparent 70%);
  border: 1px solid rgba(249, 115, 22, .35);
  transform: translate(-50%, -50%);
  transition: width .3s ease, height .3s ease, opacity .3s ease, background .3s ease;
  mix-blend-mode: normal;
}
#mfc-cursor.mfc-cursor-big {
  width: 78px; height: 78px;
  background: radial-gradient(circle, rgba(249,115,22,.22) 0%, rgba(249,115,22,.09) 50%, transparent 72%);
}
@media (hover: none), (pointer: coarse) { #mfc-cursor { display: none; } }

/* ---------- ۴) ریپل کلیک روی دکمه‌ها ---------- */
.mfc-btn, .mfc-icon-btn { position: relative; overflow: hidden; }
.mfc-ripple {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 65%);
  transform: scale(0); animation: mfcRipple .65s ease-out forwards;
}
html.mfc-dark .mfc-ripple { background: radial-gradient(circle, rgba(255,255,255,.35) 0%, transparent 65%); }
@keyframes mfcRipple { to { transform: scale(3.2); opacity: 0; } }

/* ---------- ۵) شاین عبوری روی دکمهٔ اصلی (بعد از هاور) ---------- */
.mfc-btn.mfc-shine::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 46%;
  right: -60%;
  background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,.5) 50%, transparent 100%);
  transform: skewX(-18deg);
  animation: mfcShine .8s ease forwards;
  pointer-events: none;
}
@keyframes mfcShine { to { right: 115%; } }

/* ---------- ۶) هایلایت تایپوگرافی — ماژیک نارنجی زیر کلمهٔ کلیدی ---------- */
.mfc-mark {
  position: relative; display: inline-block; z-index: 0; white-space: nowrap;
}
.mfc-mark::before {
  content: ''; position: absolute; z-index: -1; inset-inline: -4px; bottom: 4%;
  height: 34%; border-radius: 6px;
  background: linear-gradient(90deg, rgba(249,115,22,.34), rgba(251,146,60,.22));
  transform: scaleX(0); transform-origin: right;
  transition: transform .7s cubic-bezier(.2, .8, .25, 1) .25s;
}
.js .mfc-reveal.mfc-in .mfc-mark::before,
.mfc-mark.mfc-marked::before { transform: scaleX(1); }
html.mfc-dark .mfc-mark::before { background: linear-gradient(90deg, rgba(249,115,22,.45), rgba(251,146,60,.28)); }

/* ---------- ۷) ورود پلکانی — کارت‌ها با تاخیر مرتب ---------- */
.js .mfc-stagger > * { opacity: 0; transform: translateY(26px) scale(.985); }
.js .mfc-stagger.mfc-in > * {
  opacity: 1; transform: none;
  transition: opacity .65s ease, transform .65s cubic-bezier(.2, .8, .25, 1);
}
.js .mfc-stagger.mfc-in > *:nth-child(1) { transition-delay: .05s; }
.js .mfc-stagger.mfc-in > *:nth-child(2) { transition-delay: .13s; }
.js .mfc-stagger.mfc-in > *:nth-child(3) { transition-delay: .21s; }
.js .mfc-stagger.mfc-in > *:nth-child(4) { transition-delay: .29s; }
.js .mfc-stagger.mfc-in > *:nth-child(5) { transition-delay: .37s; }
.js .mfc-stagger.mfc-in > *:nth-child(6) { transition-delay: .45s; }
.js .mfc-stagger.mfc-in > *:nth-child(7) { transition-delay: .53s; }
.js .mfc-stagger.mfc-in > *:nth-child(8) { transition-delay: .61s; }

/* ---------- ۸) پارالاکس ملایم ویژوال‌ها (JS translateY می‌دهد) ---------- */
.mfc-parallax { will-change: transform; }

/* ---------- ۹) تیلت ریز برچسب‌های شناور هیرو ---------- */
.mfc-tilt-rz { transition: transform .45s cubic-bezier(.2,.8,.25,1); will-change: transform; }

/* ---------- ۱۰) های‌لایت‌برد داشبورد — نوار نور جاروکننده روی کارت ---------- */
.mfc-sweep { position: relative; overflow: hidden; }
.mfc-sweep::before {
  content: ''; position: absolute; top: 0; bottom: 0; width: 55%; z-index: 1;
  right: -70%;
  background: linear-gradient(105deg, transparent 0%, rgba(249,115,22,.09) 45%, rgba(255,255,255,.14) 50%, rgba(249,115,22,.09) 55%, transparent 100%);
  transform: skewX(-16deg);
  transition: right 1.15s cubic-bezier(.3,.6,.3,1);
  pointer-events: none;
}
.mfc-sweep.mfc-swept::before { right: 130%; }

/* ---------- ۱۱) شمارندهٔ آماری برچسب‌دار ---------- */
.mfc-count-wrap { position: relative; display: inline-block; }
.mfc-count-wrap::after {
  content: ''; position: absolute; inset-inline: 0; bottom: 2px; height: 26%;
  border-radius: 6px; z-index: -1;
  background: var(--accent-soft);
  transform: scaleX(0); transform-origin: right;
  transition: transform .8s cubic-bezier(.2,.8,.25,1) .15s;
}
.mfc-count-wrap.mfc-in::after { transform: scaleX(1); }

/* ---------- ۱۲) رشتهٔ ذرات هیرو (canvas تمام‌عرض) ---------- */
#mfc-particles {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; opacity: .55;
}
html.mfc-dark #mfc-particles { opacity: .7; }

/* ---------- ۱۳) اسکرول اسنپ نرم و بوم‌ساز ---------- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ---------- ۱۴) کاهش موشن برای کاربران حساس ---------- */
@media (prefers-reduced-motion: reduce) {
  #mfc-progress b { transition: none; }
  .mfc-mark::before, .mfc-count-wrap::after, .mfc-sweep::before { transition: none; transform: none; }
  #mfc-particles, #mfc-cursor { display: none; }
  .mfc-btn.mfc-shine::after { animation: none; }
}