/* Row slider – seamless, performant,11 a11y-friendly */
.showcase {
    position: relative;
    width: 100%;
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent, white 10%, white 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, white 10%, white 90%, transparent);
  }
  
  /* Traka koja se miče (track je unutra) */
  .scroll-left,
  .scroll-right {
    width: 100%;
    display: block;
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    /* brzina (px/s) – JS izračuna trajanje po širini sadržaja */
    --speed:50;
  }
  
  /* Unutarnji track s dupliciranim sadržajem */
  .scroll-left .marquee-track,
  .scroll-right .marquee-track {
    display: flex;
    gap: 2rem;
    width: max-content;                 /* širina po sadržaju */
    align-items: center;
  }
  
  /* Smjerovi i keyframes */
  @keyframes marquee-left {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); } /* jer je sadržaj dupliran */
  }
  
  @keyframes marquee-right {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
  }
  
  /* Primjena animacije – trajanje dinamički postavlja JS */
  .scroll-left .marquee-track {
    animation-name: marquee-left;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }
  
  .scroll-right .marquee-track {
    animation-name: marquee-right;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }
  
  /* Stavke */
  .item { flex-shrink: 0; pointer-events: none; }
  .item > div {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 1rem 1.5rem;
    border-radius: 1rem;
    transition: transform .3s ease;
  }
  
  /* Prefers-reduced-motion: poštuj korisničku postavku */
  @media (prefers-reduced-motion: reduce) {
    .scroll-left .marquee-track,
    .scroll-right .marquee-track {
      animation: none !important;
      transform: none !important;
    }
  }
  
  /* Responsive */
  @media (max-width: 768px) {
    .item > div { padding: 0.75rem 1rem; }
    .scroll-left .marquee-track,
    .scroll-right .marquee-track { gap: 1rem; }
    .showcase {
      mask-image: linear-gradient(to right, transparent, white 5%, white 95%, transparent);
      -webkit-mask-image: linear-gradient(to right, transparent, white 5%, white 95%, transparent);
    }
  }
  
  @media (max-width: 480px) {
    .item > div { padding: 0.5rem 0.75rem; }
  }