/* =====================================================================
   BASHA GRADES — شريط الصفوف الدراسية المتحرك
   ===================================================================== */

.bs-grades{ scroll-margin-top:140px; }

.bs-grades__viewport{
  overflow:hidden;
  mask-image:linear-gradient(90deg, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%);
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%);
}

.bs-grades__track{
  display:flex;
  flex-wrap:nowrap;
  gap:22px;
  width:max-content;
  padding-block:6px 18px;
  will-change:transform;
}
.bs-grades__track.is-running{
  animation:bsGradesMarquee var(--marquee-ms, 36s) linear infinite;
}
.bs-grades__track:not(.is-running){
  margin-inline:auto;
}
.bs-grades:hover .bs-grades__track.is-running,
.bs-grades:focus-within .bs-grades__track.is-running{
  animation-play-state:paused;
}

@keyframes bsGradesMarquee{
  from{ transform:translateX(0); }
  to  { transform:translateX(var(--marquee-shift, 50%)); }
}

.bs-grade{
  flex:0 0 auto;
  width:min(300px, 78vw);
}

@media (max-width:960px){
  .bs-grades__viewport{
    mask-image:linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
  }
  .bs-grades__track{ gap:16px; }
}

@media (max-width:640px){
  .bs-grade{ width:min(270px, 84vw); }
}

@media (prefers-reduced-motion: reduce){
  .bs-grades__track,
  .bs-grades__track.is-running{
    animation:none;
    flex-wrap:wrap;
    justify-content:center;
    max-width:100%;
    width:auto;
    transform:none;
  }
}