/* ═══════════════════════════════════════
   logo-carousel.css — Animação Ultra Suave
   ═══════════════════════════════════════ */

.carouselContainer {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 16px 0;
  user-select: none;
  cursor: default;
  mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
}

@media (min-width: 1024px) {
  .carouselContainer {
    cursor: ew-resize;
  }
}

.rowWrapper {
  width: 100%;
  overflow: hidden;
  display: flex;
}

@keyframes scrollLeftAnim {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}

@keyframes scrollRightAnim {
  0% { transform: translate3d(-50%, 0, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

.scroller {
  display: flex;
  gap: 32px;
  width: max-content;
  will-change: transform;
}

/* Animações CSS nativas processadas na GPU para performance máxima em dispositivos móveis (< 1024px) */
@media (max-width: 1023px) {
  #carousel-row-1,
  .scrollerMobileLeft,
  .\max-lg\:scrollerMobileLeft {
    display: flex;
    gap: 32px;
    width: max-content;
    animation: scrollLeftAnim 35s linear infinite !important;
    will-change: transform;
  }

  #carousel-row-2,
  .scrollerMobileRight,
  .\max-lg\:scrollerMobileRight {
    display: flex;
    gap: 32px;
    width: max-content;
    animation: scrollRightAnim 35s linear infinite !important;
    will-change: transform;
  }
}

/* No desktop (>= 1024px), animação estática de CSS é desativada para controle 100% via RAF no JS (Lei 7) */
@media (min-width: 1024px) {
  #carousel-row-1,
  #carousel-row-2,
  .scroller,
  .scrollerMobileLeft,
  .scrollerMobileRight,
  .\max-lg\:scrollerMobileLeft,
  .\max-lg\:scrollerMobileRight {
    animation: none !important;
  }
}