/* ==========================================================
🌈 ОБЩИЕ НАСТРОЙКИ ДЛЯ ВСЕХ ЛЕНТ
========================================================== */

.marquee {
  position: relative;
  overflow: hidden;
  width: 100%;
}

/* При наведении — пауза */
.marquee:hover .marquee-track {
  animation-play-state: paused;
}

/* Плавное свечение (общая анимация для иконок) */
@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 8px var(--glow), 0 0 15px transparent;
    opacity: 1;
  }
  50% {
    box-shadow: 0 0 16px var(--glow), 0 0 30px var(--glow);
    opacity: 0.9;
  }
}

/* Уважение системных настроек */
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none !important; }
}

/* Общие параметры движения */
@keyframes scroll     { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes scrollBack { from { transform: translateX(-50%);} to { transform: translateX(0); } }

/* Общие параметры внутреннего трека */
.marquee-track {
  display: flex;
  white-space: nowrap;
  will-change: transform;
  width: max-content; /* ключевое: ширина = фактической длине контента */
}

.marquee-track::after {
  content: "";
  flex: none;
  width: 100%; /* создаёт вторую копию виртуально */
}

/* ==========================================================
🎇 ВЕРХНЯЯ ЛЕНТА (материалы)
========================================================== */
.marquee-top {
  background: rgba(29, 76, 179, 0.7);
  backdrop-filter: blur(16px);
  border-top: 1px solid rgba(255,255,255,0.1);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 0 25px rgba(0,0,0,0.3);
  padding-top: 1.2rem;
  padding-bottom: 1.2rem;

  /* 👇 можно задавать скорость здесь */
  --marquee-speed: 40s;
  --marquee-direction: normal;
}

.marquee-top .marquee-track {
  gap: 2.5rem;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  animation: scroll var(--marquee-speed) linear infinite var(--marquee-direction);
}

.marquee-top .marquee-track span,
.marquee-top .marquee-track div {
  text-shadow: 0 0 6px rgba(255,255,255,0.8);
}

/* Радиусы карточек верхней ленты */
.marquee-top .marquee-track > div {
  border-radius: 9999px;
}

.marquee-top .marquee-track > div > div:first-child {
  border-radius: 9999px;
}

/* ==========================================================
🌌 НИЖНЯЯ ЛЕНТА (бренды / технологии)
========================================================== */
.marquee-bottom {
  background: rgba(17, 24, 39, 0.55);
  backdrop-filter: blur(14px);
  border-top: 1px solid rgba(255,255,255,0.1);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,0.15), 0 0 25px rgba(0,0,0,0.25);
  padding-top: 1.2rem;
  padding-bottom: 1.2rem;

  /* 👇 индивидуальные переменные скорости и направления */
  --marquee-speed: 40s;
  --marquee-direction: reverse;
}

.marquee-bottom .marquee-track {
  gap: 2rem;
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  animation: scroll var(--marquee-speed) linear infinite var(--marquee-direction);
}

.marquee-bottom .marquee-track span,
.marquee-bottom .marquee-track div {
  text-shadow: 0 0 4px rgba(255,255,255,0.7);
}

/* Радиусы карточек нижней ленты */
.marquee-bottom .marquee-track > div {
  border-radius: 0.75rem;
}

.marquee-bottom .marquee-track > div > div:first-child {
  border-radius: 0.375rem;
}