/*
 * Basic CSS-only infinite ticker-css for existing classes:
 * - Container: .ticker-css (viewport)
 * - Track: .ticker-container (moving flex row)
 * - Items: .ticker-item-css (no wrap, fixed gap)
 *
 * Notes:
 * - Works best when the DOM contains duplicated items (at least 2 sets).
 *   Your existing JS ticker-css builds .ticker-container and clones items, so this
 *   CSS can be used as a lightweight fallback or alternative.
 * - Control speed via --ticker-duration (lower = faster). Example:
 *     <div class="ticker-css" style="--ticker-duration: 20s; --ticker-gap: 20px">
 * - Direction can be toggled with the attribute ticker-direction="right".
 * - Hover pause included; remove the :hover rule if problematic.
 */

/* Defaults */
.ticker-css {
  --ticker-gap: 16px;
  --ticker-duration: 20s;
}

/* Viewport */
.ticker-css {
  position: relative;
  overflow: hidden;
  width: 100%;
  touch-action: pan-y; /* avoid horizontal touch conflicts */
  -webkit-mask-image: linear-gradient(90deg, transparent, black 2%, black 98%, transparent);
  mask-image: linear-gradient(90deg, transparent, black 2%, black 98%, transparent);
}

/* Track (moving element) */
.ticker-css .ticker-container {
  display: inline-flex; /* inline to allow percent-based translation on own width */
  width: max-content;   /* fit to content width (2 sets) */
  align-items: center;
  gap: var(--ticker-gap);
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translate3d(0,0,0);
  -webkit-transform: translate3d(0,0,0);
  animation: ticker-scroll var(--ticker-duration) linear infinite;
}

/* Items */
.ticker-css .ticker-item-css {
  flex-shrink: 0;
  white-space: nowrap;
}

/* Optional: treat images gently on mobile GPUs */
.ticker-css .ticker-item-css img,
.marquee-image {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* Direction control using existing attribute */
[ticker-direction="right"] .ticker-container {
  animation-direction: reverse;
}

/* Pause on hover/focus (optional) */
.ticker-css:hover .ticker-container,
.ticker-css:focus-within .ticker-container {
  animation-play-state: paused;
}

/* Reduced motion: disable animation */
@media (prefers-reduced-motion: reduce) {
  .ticker-css .ticker-container {
    animation: none !important;
    transform: none !important;
  }
}

/* Keyframes: translate by half the track width (because content is duplicated) */
@keyframes ticker-scroll {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* === WEBFLOW CMS OVERRIDES === */
/* Handle the main container */
.ticker-css .logos_list_wrap.ticker-container {
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  width: max-content !important;
  animation: ticker-scroll var(--ticker-duration) linear infinite;
}

/* Flatten Webflow's nested structure */
.ticker-css .logos_list.ticker-list-css,
.ticker-css .w-dyn-list,
.ticker-css .w-dyn-items {
  display: contents !important; /* This removes the wrapper from layout */
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* Target all possible Webflow item classes */
.ticker-css .logos_item_wrap.ticker-item-css,
.ticker-css .w-dyn-item.ticker-item-css,
.ticker-css .logos_item_wrap.w-dyn-item,
.ticker-css .w-dyn-item {
  flex: none !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  display: block !important;
  width: auto !important; /* Override any fixed widths */
}