/* ═══════════════════════════════════════════════════════════
   Faraatar Scroll FX — استایل دو خاصیت اسکرولی
   ۱) .fa-gray  : سیاه‌وسفید تا وقتی به صفحه برسد
   ۲) .fa-stack : کم‌نور و کوچک وقتی کانتینر بعدی می‌رسد
   ═══════════════════════════════════════════════════════════ */

/* ─── ۱) خاکستری → رنگی ─────────────────────────────────── */

.fa-gray{
  --fa-amt:1;            /* شدت سیاه‌وسفیدی ۰ تا ۱ */
  --fa-dur:900ms;        /* مدت رنگی‌شدن */
  --fa-rise:14px;        /* بالا آمدن آیتم */
  --fa-fade:.35;         /* محوی اولیه */
  --fa-zoom:1;           /* بزرگ‌نمایی اولیه */
  --fa-ease:cubic-bezier(.22,.8,.25,1);
}

/* حالت اولیه — عمداً بدون transition تا در لحظهٔ لود
   «رنگی ← سیاه‌وسفید» دیده نشود. گذار موقع ریوییل مسلح می‌شود. */
.fa-gray[data-fa-ready] .fa-gi{
  filter:grayscale(var(--fa-amt)) brightness(.94) contrast(.96);
  opacity:calc(1 - var(--fa-fade));
  transform:translate3d(0,var(--fa-rise),0) scale(var(--fa-zoom));
}
.fa-gray[data-fa-ready] .fa-gi.fa-tr{
  transition:filter var(--fa-dur) var(--fa-ease) var(--fa-d,0ms),
             opacity  var(--fa-dur) var(--fa-ease) var(--fa-d,0ms),
             transform var(--fa-dur) var(--fa-ease) var(--fa-d,0ms);
}
.fa-gray[data-fa-ready] .fa-gi.fa-on{
  filter:grayscale(0) brightness(1) contrast(1);
  opacity:1;
  transform:none;
}
.fa-gray[data-fa-ready] .fa-gi.fa-busy{will-change:filter,opacity,transform}


/* ─── ۲) پشتهٔ کانتینرها (جانشین sobsec) ────────────────── */

.fa-stack,
.sobsec1,.sobsec2,.sobsec3,.sobsec4,
.sobsec5,.sobsec6,.sobsec7,.sobsec8{
  position:relative;
  transform-origin:center top;
  transition:transform .6s cubic-bezier(.23,1,.32,1),
             opacity .5s ease-out,
             filter .5s ease-out;
  -webkit-backface-visibility:hidden;
          backface-visibility:hidden;
}
/* will-change فقط در لحظهٔ حرکت، نه همیشه */
.fa-stack.fa-dimming,
[class*="sobsec"].fa-dimming{will-change:transform,opacity,filter}


/* ─── احترام به کاهش حرکت ───────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .fa-gray[data-fa-ready] .fa-gi{
    filter:none!important;opacity:1!important;transform:none!important;transition:none!important}
  .fa-stack,[class*="sobsec"]{
    transform:none!important;opacity:1!important;filter:none!important;transition:none!important}
}