/* Mada Absher — references marquee (2026-10-15) */
.references-section{
  --rx-ease-out: cubic-bezier(.22,1,.36,1);
  --rx-spring:   cubic-bezier(.34,1.56,.64,1);
  --rx-hover:    .35s;
  --rx-speed:    38s;          /* مدة دورة السلايدر كاملة — زِدها لإبطاء الحركة */
  --rx-card-w:   300px;
  --rx-gap:      22px;
}

/* إخفاء Swiper الأصلي وأزراره عند تشغيل السلايدر الجديد */
.references-slider.rx-on{ margin-inline:0; max-width:none; }   /* عرض الحاوية كاملاً */
.references-slider.rx-on > .swiper,
.references-slider.rx-on > .sl-nav,
.references-slider.rx-on > .swiper-pagination{ display:none !important; }

/* ---------- المسار ---------- */
.rx-marquee{
  position:relative;
  overflow:hidden;
  padding-block:18px 26px;
  direction:ltr;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  opacity:0; transform:translateY(24px);
  transition:opacity .8s var(--rx-ease-out), transform .8s var(--rx-ease-out);
}
.references-section.rx-in .rx-marquee{ opacity:1; transform:none; }

.rx-track{
  display:flex; gap:var(--rx-gap); width:max-content;
  animation:rx-scroll var(--rx-speed) linear infinite;
  will-change:transform;
}
/* الحركة لليمين لتناسب القراءة العربية */
@keyframes rx-scroll{
  from{ transform:translate3d(calc(-50% - var(--rx-gap) / 2),0,0); }
  to  { transform:translate3d(0,0,0); }
}
/* إيقاف مؤقت عند المرور أو التركيز أو بزر الإيقاف */
.rx-marquee:hover .rx-track,
.rx-marquee:focus-within .rx-track,
.rx-marquee.is-paused .rx-track{ animation-play-state:paused; }

.rx-track .reference-card{
  direction:rtl;
  flex:0 0 var(--rx-card-w);
  width:var(--rx-card-w);
  position:relative;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  transition:transform var(--rx-hover) var(--rx-ease-out),
             box-shadow var(--rx-hover) var(--rx-ease-out),
             border-color var(--rx-hover) var(--rx-ease-out);
}

/* ---------- كل شعار يطفو بإيقاعه الخاص ---------- */
.rx-track .reference-mark{ position:relative; overflow:hidden; isolation:isolate;
  transition:transform .45s var(--rx-spring), box-shadow var(--rx-hover) var(--rx-ease-out); }
.rx-track .reference-mark img{
  animation:rx-float var(--fd,4.2s) ease-in-out var(--fdl,0s) infinite alternate;
  will-change:transform;
}
@keyframes rx-float{
  0%  { transform:translateY(2px)  rotate(var(--rot,-2deg)) scale(1); }
  100%{ transform:translateY(-5px) rotate(calc(var(--rot,-2deg) * -1)) scale(1.04); }
}

/* لمعة تمر على الشعار بالتناوب */
.rx-track .reference-mark::after{
  content:""; position:absolute; inset:-20%; z-index:2; pointer-events:none;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.85) 50%,transparent 65%);
  transform:translateX(120%);
  animation:rx-shine 7s var(--rx-ease-out) var(--sd,1s) infinite;
}
@keyframes rx-shine{ 0%{transform:translateX(120%)} 14%,100%{transform:translateX(-120%)} }

/* ---------- التفاعل ---------- */
.rx-track .reference-card::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),rgba(0,135,122,.12),transparent 65%);
  opacity:0; transition:opacity var(--rx-hover) var(--rx-ease-out);
}
@media (hover:hover){
  .rx-track .reference-card:hover{
    transform:translateY(-6px);
    border-color:rgba(0,135,122,.45);
    box-shadow:0 22px 48px rgba(11,26,74,.13),0 0 0 1px rgba(0,135,122,.18);
  }
  .rx-track .reference-card:hover::before{ opacity:1; }
  .rx-track .reference-card:hover .reference-mark{
    transform:translateY(-3px) scale(1.06);
    box-shadow:0 12px 26px rgba(0,135,122,.22);
  }
}
.rx-track .reference-arrow{ display:inline-block;
  transition:transform var(--rx-hover) var(--rx-spring), color var(--rx-hover); }
.rx-track .reference-card:hover .reference-arrow,
.rx-track .reference-card:focus-visible .reference-arrow{
  transform:translate(3px,-3px) scale(1.15); color:var(--primary,#00877a);
}
.rx-track .reference-card:active{ transform:scale(.98); transition-duration:.12s; }
.rx-track .reference-card:focus-visible{ outline:3px solid var(--primary,#00877a); outline-offset:3px; }

/* زر الإيقاف/التشغيل */
.rx-toggle{
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; margin:4px auto 0;
  border-radius:50%; border:1px solid var(--border,#d5e7e4);
  background:var(--white,#fff); color:var(--primary,#00877a);
  cursor:pointer; box-shadow:0 6px 16px rgba(11,26,74,.08);
  transition:transform .2s var(--rx-ease-out), background .2s;
}
.rx-toggle:hover{ background:var(--light,#e9f6f4); }
.rx-toggle:active{ transform:scale(.94); }
.rx-toggle:focus-visible{ outline:3px solid var(--primary,#00877a); outline-offset:3px; }
.rx-toggle svg{ width:16px; height:16px; fill:currentColor; }
.rx-toggle .i-play{ display:none; }
.rx-marquee.is-paused + .rx-toggle .i-play{ display:block; }
.rx-marquee.is-paused + .rx-toggle .i-pause{ display:none; }

@media (max-width:700px){
  .references-section{ --rx-card-w:250px; --rx-gap:14px; --rx-speed:30s; }
  .rx-marquee{
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
            mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  }
}

/* تقليل الحركة: شبكة ثابتة بدون حركة */
@media (prefers-reduced-motion: reduce){
  .rx-marquee{ opacity:1 !important; transform:none !important; transition:none !important;
    -webkit-mask-image:none; mask-image:none; }
  .rx-track{ animation:none !important; width:auto; flex-wrap:wrap; justify-content:center; }
  .rx-track [data-rx-clone]{ display:none; }
  .rx-track .reference-mark img,
  .rx-track .reference-mark::after{ animation:none !important; }
  .rx-toggle{ display:none; }
}