Джи Ай Ди Корект

/* 
  -- Global Styles for Logo Section --
  The root styles should be applied to the main container with the class "ob-logo-sect-02".
*/
.ob-logo-sect-02 {
  /* Width of the transparency gradient on the sides */
  --gradient-width: 150px;

  /* Animation properties */
  --duration: 40s; /* Controls the scrolling speed */
  --play: running; /* Animation state: running or paused */
  --direction: normal; /* Animation direction: normal or reverse */
  --delay: 0s; /* Delay before animation starts */
  --iteration-count: infinite; /* Ensures animation loops endlessly */

  /* Interaction-based animation control */
  --pause-on-hover: paused; /* Change to 'paused' if animation should stop on hover */
  --pause-on-click: running; /* Change to 'running' if animation should continue on click */
}

/* 
  -- Logo List Styling --
  Applies a gradient mask to fade out the logos at the edges for a smooth transition.
*/
.ob-logo-sect-02__logos {
  -webkit-mask-image: linear-gradient(to right, #000, #000, transparent 0, #000 var(--gradient-width), #000 calc(100% - var(--gradient-width)), transparent);
  mask-image: linear-gradient(to right, #000, #000, transparent 0, #000 var(--gradient-width), #000 calc(100% - var(--gradient-width)), transparent);
}

/* 
  -- Animation Control --
  Applies scrolling animation to the logo lists.
*/
.ob-logo-sect-02__logos .ob-logo-sect-02__logos__list {
  animation: OBLOGOSECTScroll var(--duration) linear var(--delay) var(--iteration-count);
  animation-play-state: var(--play);
  animation-delay: var(--delay);
  animation-direction: var(--direction);
}

/* 
  -- Alternating Scroll Direction --
  Odd-indexed logo lists scroll in reverse, even-indexed lists scroll normally.
*/
.ob-logo-sect-02__logos:nth-child(odd) .ob-logo-sect-02__logos__list {
  --direction: reverse;
}

.ob-logo-sect-02__logos:nth-child(even) .ob-logo-sect-02__logos__list {
  --direction: normal;
}

/* 
  -- Pause Animation on Interaction --
  Stops the animation when the user hovers or clicks on the logo list.
*/
.ob-logo-sect-02__logos:hover .ob-logo-sect-02__logos__list {
  animation-play-state: var(--pause-on-hover);
}

.ob-logo-sect-02__logos:active .ob-logo-sect-02__logos__list {
  animation-play-state: var(--pause-on-click);
}

/* 
  -- Keyframes for Scrolling Animation --
  Moves the logo list from right to left continuously.
*/
@keyframes OBLOGOSECTScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

// This script duplicates the content inside each logo list container 
// to avoid manually adding repeated images or making duplicate edits.

document.addEventListener("DOMContentLoaded", function () {
  // Get all elements that contain logo lists
  const OBLS02logoContainers = document.querySelectorAll(".ob-logo-sect-02__logos");

  // Loop through each found container
  OBLS02logoContainers.forEach(function (container) {
    // Find the first logo list inside the container
    const originalList = container.querySelector(".ob-logo-sect-02__logos__list");
    
    if (originalList) {
      // Clone the list to create a duplicate
      const clonedList = originalList.cloneNode(true);
      // Append the duplicated list to the container
      container.appendChild(clonedList);
    }
  });
});