/* ==========================================================================
   LI Marquee — Widget Elementor
   Faixa de logos com scroll infinito horizontal.
   A faixa quebra o container e ocupa 100vw (full-bleed).
   Variáveis via CSS custom properties definidas inline pelo widget.
   ========================================================================== */

/* Valores padrão das custom properties */
.li-marquee {
  --li-marquee-duration : 28s;
  --li-marquee-gap      : 72px;
  --li-marquee-height   : 44px;

  font-family: var(--font-family-primary, 'Inter', sans-serif);
  width: 100%;
}

/* --------------------------------------------------------------------------
   Título opcional
   -------------------------------------------------------------------------- */
.li-marquee__title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-neutral-500, #646E82);
  margin: 0 0 20px;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Faixa full-bleed (quebra o container do Elementor)
   -------------------------------------------------------------------------- */
.li-marquee__strip {
  position: relative;
  /* Técnica de full-bleed: leva a faixa para 100vw independente do container */
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Fade nas bordas com CSS mask (funciona em qualquer cor de fundo)
   -------------------------------------------------------------------------- */
.li-marquee--fade .li-marquee__strip {
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 10%,
    #000 90%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 10%,
    #000 90%,
    transparent 100%
  );
}

/* --------------------------------------------------------------------------
   Track — faixa interna animada
   -------------------------------------------------------------------------- */
.li-marquee__track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: var(--li-marquee-gap);
  /* Padding horizontal para dar respiro antes do primeiro e após o último logo */
  padding: 0 calc(var(--li-marquee-gap) / 2);
  animation: li-marquee-scroll var(--li-marquee-duration) linear infinite;
  will-change: transform;
}

/* Direção inversa (right → left já é o padrão; reverse vai left → right) */
.li-marquee--reverse .li-marquee__track {
  animation-direction: reverse;
}

/* Pausa ao hover */
.li-marquee--pause-hover:hover .li-marquee__track {
  animation-play-state: paused;
}

/* --------------------------------------------------------------------------
   Keyframe do scroll
   Desloca -50% porque o track tem 2× os logos (original + clone),
   então -50% = exatamente um ciclo completo → loop perfeito.
   -------------------------------------------------------------------------- */
@keyframes li-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* --------------------------------------------------------------------------
   Item e logo
   -------------------------------------------------------------------------- */
.li-marquee__item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.li-marquee__logo {
  display: block;
  height: var(--li-marquee-height);
  width: auto;
  max-width: none;
  object-fit: contain;
  /* Logos em tons de cinza para visual discreto; remova se quiser colorido */
  filter: grayscale(100%) opacity(0.5);
  transition: filter 0.25s ease;
  user-select: none;
  -webkit-user-drag: none;
}

.li-marquee__logo-link {
  display: flex;
  align-items: center;
}

.li-marquee__logo-link:hover .li-marquee__logo,
.li-marquee__item:hover .li-marquee__logo {
  filter: grayscale(0%) opacity(1);
}

/* --------------------------------------------------------------------------
   Acessibilidade: respeita preferência de movimento reduzido
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .li-marquee__track {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .li-marquee__title {
    font-size: 0.75rem;
    margin-bottom: 16px;
  }

  .li-marquee--fade .li-marquee__strip {
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0%,
      #000 8%,
      #000 92%,
      transparent 100%
    );
    mask-image: linear-gradient(
      to right,
      transparent 0%,
      #000 8%,
      #000 92%,
      transparent 100%
    );
  }
}