/* Stickers Scroll Block Styles */
.stickers-scroll-block {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden; /* Hide horizontal overflow for scrolling effect */
  overflow-y: hidden; /* Allow vertical overflow for rotated images */
  position: relative;
  padding: 15px 0; /* Add vertical padding to prevent clipping */
}

.stickers-scroll-container {
  width: 100%;
  overflow-x: hidden; /* Hide horizontal overflow for scrolling effect */
  overflow-y: hidden; /* Allow vertical overflow for rotated images */
}

.stickers-scroll-track {
  display: flex;
  align-items: center;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

/* Scroll Directions */
.scroll-right-to-left .stickers-scroll-track {
  animation-name: scrollRightToLeft;
}

.scroll-left-to-right .stickers-scroll-track {
  animation-name: scrollLeftToRight;
}

/* Scroll Speeds */
.speed-slow .stickers-scroll-track {
  animation-duration: 60s;
}

.speed-medium .stickers-scroll-track {
  animation-duration: 40s;
}

.speed-fast .stickers-scroll-track {
  animation-duration: 20s;
}

/* Pause on Hover */
.pause-on-hover:hover .stickers-scroll-track {
  animation-play-state: paused;
}

/* Stickers Set */
.stickers-set {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* Apply spacing between stickers using the gap from inline style */
.stickers-scroll-track[style*="gap"] .stickers-set {
  gap: inherit;
}

/* Individual Sticker Item */
.sticker-item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px; /* Add padding to prevent clipping on rotation */
}

.stickers-scroll-block .sticker-image {
  display: block !important;
  object-fit: cover !important;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

/* Force exact width using CSS custom properties, auto height */
.sticker-item[style*="--sticker-w"] .sticker-image {
  width: var(--sticker-w) !important;
  height: auto !important;
  min-width: var(--sticker-w) !important;
  max-width: var(--sticker-w) !important;
}

/* Optional hover effect for cute interaction */
.sticker-item:hover .sticker-image {
  transform: scale(1.1) rotate(5deg);
}

/* Animations */
@keyframes scrollRightToLeft {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes scrollLeftToRight {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0);
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  /* Faster animation on mobile for better performance */
  .speed-slow .stickers-scroll-track {
    animation-duration: 40s;
  }

  .speed-medium .stickers-scroll-track {
    animation-duration: 30s;
  }

  .speed-fast .stickers-scroll-track {
    animation-duration: 15s;
  }
}

@media (max-width: 480px) {
  /* No gap override needed - let ACF field control spacing */
}

/* High contrast mode adjustments */
@media (prefers-contrast: high) {
  .sticker-item:hover .sticker-image {
    transform: scale(1.05);
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .stickers-scroll-track {
    animation: none !important;
  }

  .stickers-scroll-block {
    overflow-x: auto;
  }

  .sticker-item:hover .sticker-image {
    transform: none;
  }
}