/* Pull carousel up so it overlaps the hero bottom */
.logo-carousel {
  position: relative;
  padding: var(--space-sm) 0 var(--space-xl);
  margin-top: -4rem;
  overflow: hidden;
  z-index: 4;
}

/* Slanted container */
.logo-carousel__slant {
  transform: rotate(-2deg) scale(1.08);
  padding: var(--space-md) 0;
  position: relative;
}

/* Fade edges */
.logo-carousel__slant::before,
.logo-carousel__slant::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 12%;
  z-index: 2;
  pointer-events: none;
}

.logo-carousel__slant::before {
  left: 0;
  background: linear-gradient(90deg, var(--bg-void), transparent);
}

.logo-carousel__slant::after {
  right: 0;
  background: linear-gradient(270deg, var(--bg-void), transparent);
}

/* The scrolling track */
.logo-carousel__track {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  width: max-content;
  animation: carouselScroll 50s linear infinite;
}

/* Base pill — larger */
.logo-carousel__slide {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  padding: 0 var(--space-xl);
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: all var(--duration-normal) var(--ease-cinematic);
}

.logo-carousel__slide:hover {
  transform: scale(1.06);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}

.logo-carousel__slide img {
  height: 28px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  opacity: 0.85;
  transition: all var(--duration-normal) var(--ease-cinematic);
}

.logo-carousel__slide:hover img {
  opacity: 1;
}

/* Text-based logos */
.logo-carousel__text-logo {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: 1.25rem;
  letter-spacing: 0.3em;
  color: #ffffff;
  white-space: nowrap;
  line-height: 1;
}

/* Henry — bold connected script */
.logo-carousel__text-logo--henry {
  font-family: 'Lobster Two', cursive;
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: 0.01em;
  color: #1a1a1a;
}

/* Sambrosa — elegant italic serif in gold */
.logo-carousel__text-logo--sambrosa {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-style: italic;
  font-size: 1.5rem;
  letter-spacing: 0.25em;
  color: #e8a817;
}

/* ── Per-brand pill backgrounds ── */

/* Light/white bg logos */
.logo--transparent-labs { background: #e8e8ea; }
.logo--saalt            { background: #ffffff; }
.logo--aeromixer        { background: #f4f4f4; }
.logo--dirt-locker      { background: #f5f5f0; }
.logo--project-solar    { background: #ffffff; }
.logo--offerpad         { background: #ffffff; }
.logo--henry            { background: #f7f3ef; }
.logo--trimrx           { background: #ffffff; }
.logo--riddy            { background: #ffffff; }
.logo--mixhers          { background: #ffffff; }

/* Dark bg logos */
.logo--tropic-colour    { background: #0a0a0a; }
.logo--elf-labs         { background: #1a1a1a; }
.logo--immersed         { background: #1a1a1a; }

/* Colored bg logos */
.logo--kenetik          { background: #9fb8c4; }
.logo--amara            { background: #8a9a9e; }
.logo--rad-ai           { background: #c5e67e; }
.logo--sambrosa         { background: #ffffff; }

/* Oversized logos for small/square marks */
.logo--offerpad img,
.logo--henry img,
.logo--kenetik img,
.logo--amara img        { height: 44px; max-width: 180px; }

/* Infinite scroll */
@keyframes carouselScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Pause on hover */
.logo-carousel:hover .logo-carousel__track {
  animation-play-state: paused;
}