/*
  scroll-fade.css — أضف الكلاس "scroll-fade" لأي عنصر فيه overflow-y:auto/scroll
  وبيختفي شريط التمرير تلقائيًا، ويظهر ظل خفيف أعلى/أسفل العنصر فقط لما يكون
  فيه محتوى مخفي بذاك الاتجاه. يعمل مع scroll-fade.js (يحقن عناصر الظل تلقائيًا،
  لا حاجة لتعديل الـHTML يدويًا).

  التخصيص الاختياري عبر متغيرات CSS على نفس العنصر:
    --scroll-fade-color   لون الظل (افتراضي: كحلي داكن يطابق خلفية NTF Hub)
    --scroll-fade-size    ارتفاع منطقة الظل (افتراضي: 44px)
    --scroll-fade-radius  انحناء الزوايا ليطابق العنصر (افتراضي: 0)

  مثال:
    <div class="scroll-fade" style="--scroll-fade-radius:22px; overflow-y:auto; height:400px">...</div>
*/

.scroll-fade{
  scrollbar-width:none;      /* Firefox */
  -ms-overflow-style:none;   /* Edge/IE القديم */
}
.scroll-fade::-webkit-scrollbar{ /* Chrome / Safari / Edge الحديث */
  display:none;
  width:0;
  height:0;
}

.scroll-fade-wrap{
  position:relative;
}

.scroll-fade-edge{
  position:absolute;
  left:0;
  right:0;
  height:var(--scroll-fade-size, 44px);
  pointer-events:none;
  z-index:5;
  opacity:0;
  transition:opacity .35s ease;
}
.scroll-fade-edge-top{
  top:0;
  border-radius:var(--scroll-fade-radius, 0) var(--scroll-fade-radius, 0) 0 0;
  background:linear-gradient(180deg, var(--scroll-fade-color, rgba(9,14,26,.92)), rgba(9,14,26,0));
}
.scroll-fade-edge-bottom{
  bottom:0;
  border-radius:0 0 var(--scroll-fade-radius, 0) var(--scroll-fade-radius, 0);
  background:linear-gradient(0deg, var(--scroll-fade-color, rgba(9,14,26,.92)), rgba(9,14,26,0));
}
.scroll-fade-edge.is-visible{
  opacity:1;
}