/* =========================================================
   🎠 СТИЛИ ДЛЯ КАРУСЕЛИ
   ========================================================= */

.carousel-container {
  position: relative;
}

.carousel-track {
  display: flex;
  width: max-content;
}

.carousel-slide {
  width: 320px; /* Фиксированная ширина карточек */
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Универсальные размеры карточек */
.carousel-slide > div {
  width: 100%;
  height: 420px; /* Увеличенная высота для мероприятий */
}

/* =========================================================
   🌀 АНИМАЦИИ
   ========================================================= */

/* Анимация для бегущей строки партнёров */
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-50% - 6rem));
  }
}

/* Анимация плавного перелива градиента */
@keyframes gradient-x {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

/* Применение анимации к бегущему контейнеру */
.animate-scroll {
  animation: scroll 30s linear infinite;
  display: flex;
  width: max-content;
}

/* Применение градиентной анимации */
.animate-gradient-x {
  background-size: 200% 200%;
  animation: gradient-x 3s ease infinite;
}

/* Пауза при наведении курсора */
.hover\:pause-animation:hover {
  animation-play-state: paused;
}

/* Градиентная рамка */
.border-gradient-to-r {
  background: linear-gradient(to right, #60a5fa, #a855f7, #22d3ee);
  padding: 2px;
}

/* =========================================================
   📱 АДАПТИВНОСТЬ
   ========================================================= */

@media (max-width: 768px) {
  .carousel-slide {
    width: 280px;
  }

  .carousel-slide > div {
    height: auto;
    min-height: 380px;
  }
}

/* =========================================================
   ⚙️ СОСТОЯНИЯ СЛАЙДОВ
   ========================================================= */

/* Скрытие неактивных слайдов */
.carousel-slide {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
