/* ============================================
   Partner Carousel (Marquee)
   ============================================ */

   :root {
    --carousel-logo-size: 200px;
    --carousel-gap: 0px;
    --carousel-tuck: 70px;
  }
  
  .carousel {
    position: relative;
    width: 100%;
    overflow: hidden;
  }
  
  .carousel__fade {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 10;
    width: 96px;
    pointer-events: none;
  }
  
  .carousel__fade--left {
    left: 0;
    background: linear-gradient(to right, #fff, transparent);
  }
  
  .carousel__fade--right {
    right: 0;
    background: linear-gradient(to left, #fff, transparent);
  }
  
  .carousel--center-focus .carousel__track {
    padding-block: 28px;
  }

  .carousel__track {
    display: flex;
    align-items: center;
    gap: var(--carousel-gap);
    width: max-content;
    padding-block: 8px;
    animation: marquee 55s linear infinite;
    will-change: transform;
  }
  
  .carousel:hover .carousel__track,
  .carousel:focus-within .carousel__track {
    animation-play-state: paused;
  }
  
  @keyframes marquee {
    from {
      transform: translateX(0);
    }
  
    to {
      transform: translateX(var(--marquee-dist, -50%));
    }
  }
  
  .carousel__item {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
  }
  
  .carousel__logo {
    display: block;
    width: auto;
    max-width: calc(var(--carousel-logo-size) * 2);
    height: var(--carousel-logo-size);
    margin-inline: calc(-1 * var(--carousel-tuck, 0px));
    object-fit: contain;
    opacity: var(--carousel-item-opacity, 0.7);
    filter: grayscale(var(--carousel-item-grayscale, 30%));
    transform: none;
    transition:
      filter 0.2s ease,
      opacity 0.2s ease;
  }

  .carousel__item:hover .carousel__logo,
  .carousel__item:focus-within .carousel__logo {
    transform: none;
  }

  @media (hover: hover) and (pointer: fine) {
    .carousel:not(.carousel--center-focus) .carousel__item:hover .carousel__logo,
    .carousel:not(.carousel--center-focus) .carousel__item:focus-within .carousel__logo {
      opacity: 1;
      filter: grayscale(0%);
    }
  }
  
  @media (max-width: 767px) {
    :root {
      --carousel-logo-size: 140px;
      --carousel-tuck: 44px;
    }
  
    .carousel__fade {
      width: 48px;
    }
  }
  
  @media (prefers-reduced-motion: reduce) {
    .carousel__track {
      animation: none;
      transform: none;
      will-change: auto;
    }
  
    .carousel__logo {
      transition: none;
    }
  
    .carousel__item:hover .carousel__logo,
    .carousel__item:focus-within .carousel__logo {
      transform: none;
    }
  }