/* ==========================================================================
   SIGMA SCANNER — featured.css
   §3b Featured In · press-logo marquee, right → left.

   Same technique as the Testimonials section's own trust marquee
   (.testi-trust in testimonials.css): the track is authored TWICE back
   to back inside a `width: max-content` strip, and the strip is
   translated by exactly -50% — since the two halves are identical, the
   loop seam is invisible. Kept as its own file rather than reusing
   .testi-trust directly because that component lives inside the dark
   Testimonials section and carries dark-surface colours; this one sits
   on the default light background.

   Motion is opt-in, not opt-out: the animation only runs under
   [data-motion="full"] (GSAP confirmed loaded, no reduced-motion). Absent
   that, the strip is a plain horizontally-scrollable row — every logo is
   still present and readable, just not auto-scrolling. See index.html's
   inline pre-paint script for how data-motion gets set.
   ========================================================================== */

@layer components {

  .featured__eyebrow {  width: 100%;
    text-align: center;
    display: block;
    margin-left: auto;
    margin-right: auto; }

  .featured__marquee {
    position: relative;
    margin-block-start: var(--sp-6);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  }
  .featured__marquee::-webkit-scrollbar { display: none; }
  [data-motion="full"] .featured__marquee { overflow: hidden; }

  .featured__strip { display: flex; width: max-content; }

  .featured__track {
    display: flex;
    align-items: center;
    gap: var(--sp-9);
    padding-inline-end: var(--sp-9);
    flex: none;
  }
  /* The duplicate track exists only to make the loop seamless once the
     animation is running — without motion there's nothing to loop, so it
     stays out of layout and out of the accessibility tree. */
  .featured__track[aria-hidden="true"] { display: none; }
  [data-motion="full"] .featured__track[aria-hidden="true"] { display: flex; }

  [data-motion="full"] .featured__strip { animation: featured-scroll-rtl 32s linear infinite; }
  .featured__marquee:hover .featured__strip,
  .featured__marquee:focus-within .featured__strip { animation-play-state: paused; }

  .featured__item {
    display: flex;
    align-items: center;
    justify-content: center;
    block-size: 56px;
    padding-inline: var(--sp-6);
    border-inline-start: 1px solid var(--ink-200);
  }
  .featured__track > .featured__item:first-child { border-inline-start: none; }

  .featured__item img {
    display: block;
    block-size: 28px;
    max-inline-size: 132px;
    inline-size: auto;
    object-fit: contain;
  }

  @keyframes featured-scroll-rtl { to { transform: translateX(-50%); } }

  @media (min-width: 640px) {
    .featured__item { block-size: 64px; padding-inline: var(--sp-8); }
    .featured__item img { block-size: 32px; max-inline-size: 152px; }
  }
    @media (min-width: 2560px) {
    .featured__item { block-size: 64px; padding-inline: var(--sp-8); }
    .featured__item img { block-size: 32px; max-inline-size: 152px; }
  }
}
@media (min-width: 2560px) {

  .featured__marquee {
    width: 100%;
    overflow: hidden;
  }

  .featured__strip {
    width: max-content;
    margin-left: 0 !important;
    margin-right: 0 !important;
    justify-content: flex-start;
    transform: translateX(0);
  }

  .featured__track {
    flex-shrink: 0;
  }

  [data-motion="full"] .featured__strip {
    animation: featured-scroll-rtl 60s linear infinite;
    animation-delay: 0s;
  }

  .featured__item {
    block-size: 72px;
    padding-inline: 48px;
  }

  .featured__item img {
    block-size: 40px;
    max-inline-size: 190px;
  }

  .featured__track {
    gap: 185px;
    padding-inline-end: 60px;
  }
}