/* premium-logos.css
   Styles extracted from inline <style> in index.html for the 'Trusted by Leading Companies' logo carousel.
   - Larger logo cards
   - Smooth marquee animations (scrollLeft/scrollRight)
   - Hover/bob animations, pause-on-hover, responsive breakpoints
   - Respects prefers-reduced-motion
*/

:root{
  --logo-item-min: 280px;
  --logo-item-padding: 22px;
  --logo-item-gap: 40px;
  --logo-items-count: 9; /* number of unique logos in each track */
}

/* make the track GPU-accelerated and ready for smooth transforms */
.logo-track,
.logo-track-reverse{
  will-change: transform;
  transform: translateZ(0);
}

/* marquee keyframes use CSS variables so values stay correct when sizes change */
@keyframes scrollLeft{
  0% { transform: translateX(0); }
  100% { transform: translateX(calc((var(--logo-item-min) + (var(--logo-item-padding) * 2) + var(--logo-item-gap)) * var(--logo-items-count) * -1)); }
}

@keyframes scrollRight{
  0% { transform: translateX(calc((var(--logo-item-min) + (var(--logo-item-padding) * 2) + var(--logo-item-gap)) * (var(--logo-items-count) - 1) * -1)); }
  100% { transform: translateX(0); }
}

/* larger, cleaner logo cards */
.logo-item{
  min-width: var(--logo-item-min) !important;
  height: 170px !important;
  padding: var(--logo-item-padding) !important;
  background: rgba(255,255,255,0.95);
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 8px 32px rgba(0,0,0,0.08) !important;
  border: 1px solid rgba(255,255,255,0.5) !important;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease;
  backface-visibility: hidden;
}

/* make logos themselves larger inside the card and add a subtle floating animation */
.logo-item img{
  max-width: 100%;
  max-height: 72% !important;
  object-fit: contain;
  filter: grayscale(100%);
  transition: transform .35s ease, filter .35s ease, opacity .35s ease;
  animation: bob 6s ease-in-out infinite;
}

/* hover — lift the card and reveal the coloured logo */
.logo-item:hover{
  transform: translateY(-10px) scale(1.04);
  box-shadow: 0 20px 54px rgba(20,69,137,0.20) !important;
  border-color: rgba(20,69,137,0.22) !important;
}

.logo-item:hover img{
  filter: grayscale(0%) !important;
  transform: translateY(-6px) scale(1.06);
}

/* gentle per-item stagger so the movement feels organic */
.logo-track .logo-item:nth-child(3n) img { animation-delay: .20s; }
.logo-track .logo-item:nth-child(4n) img { animation-delay: .45s; }
.logo-track-reverse .logo-item img { animation-delay: .10s; }

/* pause marquee while user interacts */
.logo-carousel-wrapper:hover .logo-track,
.logo-carousel-wrapper:hover .logo-track-reverse{ animation-play-state: paused !important; }

/* micro bob animation for logos */
@keyframes bob{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-6px); } }

/* accessibility: stop all non-essential motion */
@media (prefers-reduced-motion: reduce){
  .logo-track, .logo-track-reverse, .logo-item img{ animation: none !important; transition: none !important; }
}

/* Responsive tuning */
@media (max-width: 768px){
  :root{ --logo-item-min: 210px; --logo-item-padding: 18px; --logo-item-gap: 32px; }
  .logo-item{ height: 140px !important; }
  .logo-item img{ max-height: 74% !important; }

  /* re-calc keyframes for the smaller item width */
  @keyframes scrollLeft{ 0%{ transform: translateX(0); } 100%{ transform: translateX(calc((var(--logo-item-min) + (var(--logo-item-padding) * 2) + var(--logo-item-gap)) * var(--logo-items-count) * -1)); } }
  @keyframes scrollRight{ 0%{ transform: translateX(calc((var(--logo-item-min) + (var(--logo-item-padding) * 2) + var(--logo-item-gap)) * (var(--logo-items-count) - 1) * -1)); } 100%{ transform: translateX(0); } }
}

@media (max-width: 480px){
  :root{ --logo-item-min: 150px; --logo-item-padding: 12px; --logo-item-gap: 20px; }
  .logo-item{ height: 110px !important; padding: 12px !important; }
  .logo-track, .logo-track-reverse{ gap: var(--logo-item-gap) !important; }
  .logo-item img{ max-height: 76% !important; }

  @keyframes scrollLeft{ 0%{ transform: translateX(0); } 100%{ transform: translateX(calc((var(--logo-item-min) + (var(--logo-item-padding) * 2) + var(--logo-item-gap)) * var(--logo-items-count) * -1)); } }
  @keyframes scrollRight{ 0%{ transform: translateX(calc((var(--logo-item-min) + (var(--logo-item-padding) * 2) + var(--logo-item-gap)) * (var(--logo-items-count) - 1) * -1)); } 100%{ transform: translateX(0); } }
}