/* Базовая раскладка */
.carousel{
  width:100%;
  max-width:1160px;
  margin:0 auto 12px;
  border-radius:14px;
  background:rgba(0,0,0,.25);
  box-shadow:0 2px 10px rgba(0,0,0,.35) inset;
  overflow:hidden;                 /* важно: скрываем края */
  touch-action:pan-x pinch-zoom;
  cursor:grab;
}

.carousel.is-dragging { cursor:grabbing; }

/* Лента — будем двигать transform'ом */
#carouselTrack{
  display:flex;
  gap:16px;
  padding:12px;
  width:max-content;
  will-change:transform;
  backface-visibility:hidden;
}

/* Слайды */
.slide{
  flex:0 0 auto;
  width:clamp(160px,26vw,260px);
  aspect-ratio:5/3;
  position:relative;border-radius:10px;overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,.35);
  background:#222;
  user-select:none;-webkit-user-drag:none;
}
.slide img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.slide .label{position:absolute;left:8px;bottom:8px;background:rgba(0,0,0,.5);border-radius:8px;padding:6px 10px;font-weight:700;letter-spacing:.3px}

/* ===== CSS-анимация ===== */
.carousel-animate #carouselTrack{
  animation: carousel-marquee var(--carousel-duration, 40s) linear infinite;
  transform: translate3d(0,0,0);
}
@keyframes carousel-marquee{
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(var(--carousel-shift, -50%),0,0); }
}

/* Пауза по ховеру только на точном указателе (мышь) */
@media (pointer:fine){
  .carousel-animate:hover #carouselTrack{
    animation-play-state: paused;
  }
}

/* Уважаем настройки доступности */
@media (prefers-reduced-motion: reduce){
  .carousel-animate #carouselTrack{
    animation: none !important;
    transform: none !important;
  }
}