/**
 * Infinite Logo Marquee Styles
 * Seamless 60fps hardware-accelerated ticker loop
 */

.h-marquee-container {
  width: 100%;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
  padding: 1.5rem 0;
  display: flex;
  align-items: center;
}

/* Gradient fade at both ends */
.h-marquee-container.has-fade {
  -webkit-mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 1) var(--fade-width, 12%),
    rgba(0, 0, 0, 1) calc(100% - var(--fade-width, 12%)),
    rgba(0, 0, 0, 0) 100%
  );
  mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 1) var(--fade-width, 12%),
    rgba(0, 0, 0, 1) calc(100% - var(--fade-width, 12%)),
    rgba(0, 0, 0, 0) 100%
  );
}

.h-marquee-inner {
  display: flex;
  width: max-content;
  flex-shrink: 0;
}

.h-marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  flex-shrink: 0;
  gap: var(--marquee-gap, 56px);
  padding-right: var(--marquee-gap, 56px);
  animation: h-marquee-anim var(--marquee-speed, 25s) linear infinite;
  will-change: transform;
}

/* Reverse direction */
.h-marquee-container.direction-right .h-marquee-track {
  animation-direction: reverse;
}

/* Pause on hover */
.h-marquee-container.pause-on-hover:hover .h-marquee-track {
  animation-play-state: paused;
}

@keyframes h-marquee-anim {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-100%, 0, 0);
  }
}

/* Single Item */
.h-marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  text-decoration: none !important;
  color: var(--logo-color, #ffffff);
  opacity: var(--logo-opacity, 0.75);
  transition: opacity 0.25s ease, transform 0.25s ease;
  user-select: none;
}

.h-marquee-item:hover {
  opacity: var(--logo-opacity-hover, 1);
  transform: translateY(-1px);
  color: var(--logo-color, #ffffff);
}

.h-marquee-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.h-marquee-icon img,
.h-marquee-icon svg {
  height: var(--logo-height, 26px);
  width: auto;
  max-width: 160px;
  object-fit: contain;
  display: block;
}

.h-marquee-label {
  font-family: inherit;
  font-size: var(--logo-font-size, 1.25rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  white-space: nowrap;
  color: inherit;
  line-height: 1;
}

/* ==========================================================================
   CSS Class utility for native Elementor Containers / Galleries
   ========================================================================== */
.infinite-logo-scroll,
.infinite-logo-marquee,
.logo-marquee-scroll {
  overflow: hidden !important;
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.infinite-logo-scroll > .e-con-inner,
.infinite-logo-scroll > .elementor-widget-container,
.infinite-logo-marquee > .e-con-inner,
.logo-marquee-scroll > .e-con-inner {
  display: flex !important;
  width: max-content !important;
  animation: h-marquee-anim 25s linear infinite !important;
}

.infinite-logo-scroll:hover > .e-con-inner,
.infinite-logo-marquee:hover > .e-con-inner {
  animation-play-state: paused !important;
}