/* =========================================================
   Partners strip (Figma node 190:55653)
   Markup: Components/LandingPage/HomePartners.razor
   ========================================================= */

.al-partners {
  /* +1 = the row's overflow lies to the right (ltr), -1 = to the left (rtl, the default). */
  --al-partners-dir: -1;
  /* Brand artwork is never recoloured. Several marks are dark ink on transparent (Tawuniya
     #312E52, Malath #153E35, Tree #003932, MedGulf #19406C, AlJazira #10426C, Wataniya #005792),
     so on the dark theme every logo sits on a light plate instead. */
  --al-partners-plate: transparent;
  --al-partners-plate-pad: 0px;

  padding-block: var(--al-sp-4xl);
  background: var(--al-bg);
}
[dir="ltr"] .al-partners { --al-partners-dir: 1; }
[data-theme="dark"] .al-partners {
  --al-partners-plate: var(--al-heading);   /* #fff on the dark theme */
  --al-partners-plate-pad: 8px 16px;
}

/* The row runs edge to edge: the container's cap and gutters come off here and go back on the
   heading, so only the moving strip is full-bleed. Not a 100vw trick — 100vw counts the scrollbar
   and would overflow the page by its width. */
.al-partners__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--al-sp-2xl);
  max-width: none;
  padding-inline: 0;
}

.al-partners .al-section-head {
  padding-inline: var(--al-gutter);
}

.al-partners__viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* ---- Motion ----
   One continuous loop that never shows an empty edge. HomePartners renders the logos THREE times
   (copies 2 and 3 aria-hidden) and the track moves by exactly one set per cycle, which lands a
   copy where the one before it was — so the seam is invisible.

   Two invariants, both easy to break:
   - The gap rides on the ITEMS, not on the track's `gap`: with `gap` there is one fewer gap than
     items, so a set would not be an exact fraction of the track and the loop would jump.
   - One set (~2540px) must be at least as wide as the screen, or the far end runs dry before the
     cycle ends. Two sets covered 2560 but left ~900px bare on a 3440 ultrawide; three cover any
     display up to ~5080px. Add a copy if that ever stops being true. */
.al .al-partners__track {
  display: flex;
  align-items: center;
  width: max-content;
  will-change: transform;
  animation: al-partners-marquee 80s linear infinite;
}
@keyframes al-partners-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-100% / 3 * var(--al-partners-dir))); }
}
.al-partners__viewport:hover .al-partners__track,
.al-partners__viewport:focus-within .al-partners__track {
  animation-play-state: paused;
}

.al-partners__item {
  flex-shrink: 0;
  margin-inline-end: var(--al-sp-4xl);
  padding: var(--al-partners-plate-pad);
  background: var(--al-partners-plate);
  border-radius: 12px;
}

.al-partners__fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 96px;
  pointer-events: none;
}
.al-partners__fade--left  { left: 0;  background: linear-gradient(to left,  transparent 24%, var(--al-bg)); }
.al-partners__fade--right { right: 0; background: linear-gradient(to right, transparent 24%, var(--al-bg)); }

/* ---- Logos (geometry from the Figma export) ---- */
.al-plogo {
  position: relative;
  display: block;
  height: 56px;
  flex-shrink: 0;
  overflow: hidden;
}
.al-plogo > .al-plogo__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
}
.al-plogo__abs { position: absolute; display: block; }
.al-plogo__abs > img { width: 100%; height: 100%; max-width: none; }

.al-plogo__masked {
  position: absolute;
  display: block;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.al-plogo__masked img { width: 100%; height: 100%; max-width: none; }
/* Mask files, not data URIs: the app is always served over http, where mask-image files load. */
.al-plogo__masked--isp001 {
  inset: 0 -0.02% -0.04% 0;
  -webkit-mask-image: url('../../assets/home/p-isp001-mask.svg');
  mask-image: url('../../assets/home/p-isp001-mask.svg');
  -webkit-mask-size: 72.291px 56px;
  mask-size: 72.291px 56px;
}
.al-plogo__masked--isp013 {
  inset: 0 0.22% -0.01% 0;
  -webkit-mask-image: url('../../assets/home/p-isp013-mask.svg');
  mask-image: url('../../assets/home/p-isp013-mask.svg');
  -webkit-mask-size: 229.167px 56px;
  mask-size: 229.167px 56px;
}

/* ACIG: 60 vector layers, three of them luminance-masked */
.al-plogo__layer { position: absolute; display: block; }
.al-plogo__layer > img { width: 100%; height: 100%; max-width: none; }
.al-plogo__layer--lum {
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  mask-mode: luminance;
}
.al-plogo__layer--g0 { -webkit-mask-image: url('../../assets/home/isp002/g0.svg'); mask-image: url('../../assets/home/isp002/g0.svg'); }
.al-plogo__layer--g2 { -webkit-mask-image: url('../../assets/home/isp002/g2.svg'); mask-image: url('../../assets/home/isp002/g2.svg'); }
.al-plogo__layer--g4 { -webkit-mask-image: url('../../assets/home/isp002/g4.svg'); mask-image: url('../../assets/home/isp002/g4.svg'); }

/* ---- Responsive ---- */
@media (max-width: 1023.98px) {
  .al-partners { padding-block: var(--al-sp-2xl); }
  .al-partners__inner { gap: var(--al-sp-xl); }
  .al-partners__item { margin-inline-end: var(--al-sp-2xl); }
  .al-partners__fade { width: 48px; }
}
@media (max-width: 767.98px) {
  .al-partners .al-section-head__title { font-size: 22px; line-height: 30px; }
  .al-partners .al-section-head__sub { font-size: 14px; line-height: 22px; }
}

/* Reduced motion: no slide; the row becomes a normal horizontal scroller (the viewport is
   focusable, so arrow keys scroll it). The edge fades would hide the ends, so they go. */
@media (prefers-reduced-motion: reduce) {
  .al-partners__viewport {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
  }
  .al .al-partners__track { animation: none; transform: none; will-change: auto; }
  .al-partners__fade { display: none; }
  /* One set to scroll through, not three: the copies exist for the loop, which is off here. */
  .al-partners__item[aria-hidden="true"] { display: none; }
  .al-partners__item:last-of-type { margin-inline-end: 0; }
}