/* Custom CSS for Lottie Animation Consistency - Memory Optimized */

/* Row 1: Left to Right (moving right) */
#lottie-row-1 {
  display: flex !important;
  animation: scrollRight 20s linear infinite !important;
}

/* Row 3: Right to Left (moving left) */
#lottie-row-3 {
  display: flex !important;
  animation: scrollLeft 20s linear infinite !important;
}

/* Hide unused rows */
#lottie-row-2,
#lottie-row-4 {
  display: none !important;
}

/* Keyframe for Row 1: Left to Right - seamless loop */
@keyframes scrollRight {
  0% {
    transform: translate3d(-50%, 0, 0);
  }
  100% {
    transform: translate3d(0%, 0, 0);
  }
}

/* Keyframe for Row 3: Right to Left - seamless loop */
@keyframes scrollLeft {
  0% {
    transform: translate3d(0%, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

/* Ensure rounded corners on wrapper as well */
.splash-animation-image-wrap {
  border-radius: 20px;
  overflow: hidden;
  flex-shrink: 0;
  width: 225px;
  height: 400px;
}

/* Make sure lottie players don't have their own animation speed */
lottie-player.splash-animation-image {
  border-radius: 20px;
  overflow: hidden;
  display: block;
  object-fit: cover;
}

/* Prevent pointer events on animations to improve performance */
.splash-animation-image {
  pointer-events: none;
}

/* Ensure smooth rendering and proper overflow */
.splash-animation-wrap {
  overflow: hidden;
  width: 100%;
  max-width: 100vw;
}

.splash-animation-top-wrap,
.splash-animation-bottom-wrap {
  overflow: hidden;
  width: 100%;
  max-width: 100vw;
  position: relative;
}

.splash-animation-image-area {
  display: flex !important;
  white-space: nowrap;
  position: relative;
}

/* Ensure maximum 4 items visible in viewport */
.splash-animation-section {
  overflow: hidden;
  max-width: 100vw;
}

/* GPU acceleration for smooth animation */
#lottie-row-1,
#lottie-row-3 {
  transform: translate3d(0, 0, 0);
  will-change: transform;
}