/* Frontend Marquee Styles */

.marquee-parent {
  display: flex;
  overflow: hidden;
  user-select: none;
  width: 100%; /* Container full width */
  --active-gap: var(--gap);
  gap: var(--active-gap);
}

.marquee-child {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  width: max-content; /* Explicitly requested max-content */
  --active-gap: var(--gap);
  gap: var(--active-gap);
}

.marquee-child-left {
  -webkit-animation: marquee-left var(--duration) linear infinite;
  animation: marquee-left var(--duration) linear infinite;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.marquee-child-right {
  -webkit-animation: marquee-right var(--duration) linear infinite;
  animation: marquee-right var(--duration) linear infinite;
  flex-direction: row-reverse;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.marquee-parent.lcm-pause-on-hover:hover .marquee-child {
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}

@-webkit-keyframes marquee-left {
  0% {
    -webkit-transform: translateX(0) translateZ(0);
    transform: translateX(0) translateZ(0);
  }
  100% {
    -webkit-transform: translateX(calc(-100% - var(--active-gap))) translateZ(0);
    transform: translateX(calc(-100% - var(--active-gap))) translateZ(0);
  }
}

@keyframes marquee-left {
  0% {
    -webkit-transform: translateX(0) translateZ(0);
    transform: translateX(0) translateZ(0);
  }
  100% {
    -webkit-transform: translateX(calc(-100% - var(--active-gap))) translateZ(0);
    transform: translateX(calc(-100% - var(--active-gap))) translateZ(0);
  }
}

@-webkit-keyframes marquee-right {
  0% {
    -webkit-transform: translateX(calc(-100% - var(--active-gap))) translateZ(0);
    transform: translateX(calc(-100% - var(--active-gap))) translateZ(0);
  }
  100% {
    -webkit-transform: translateX(0) translateZ(0);
    transform: translateX(0) translateZ(0);
  }
}

@keyframes marquee-right {
  0% {
    -webkit-transform: translateX(calc(-100% - var(--active-gap))) translateZ(0);
    transform: translateX(calc(-100% - var(--active-gap))) translateZ(0);
  }
  100% {
    -webkit-transform: translateX(0) translateZ(0);
    transform: translateX(0) translateZ(0);
  }
}

.marquee-child img {
  --safe-img-h: var(--img-h, 120px);
  height: var(--img-h, auto);
  width: var(--img-w, auto);
  max-width: none;
  object-fit: contain;
}

@media (min-width: 769px) {
  .marquee-child img {
    height: calc(var(--safe-img-h) * var(--desktop-scale, 1)) !important;
    width: calc(var(--img-w) * var(--desktop-scale, 1)) !important;
  }
}

@media (max-width: 768px) {
  .marquee-parent {
    --active-gap: var(--mobile-gap, 12px) !important;
    gap: var(--active-gap) !important;
  }
  .marquee-child {
    --active-gap: var(--mobile-gap, 12px) !important;
    gap: var(--active-gap) !important;
  }
  .marquee-child img {
    /* Mathematical responsive scaling to replace buggy Safari 'zoom' property */
    height: calc(var(--safe-img-h) * var(--mobile-scale, 1)) !important;
    width: calc(var(--img-w) * var(--mobile-scale, 1)) !important;
  }
}