/* ═══════════════════════════════
   Logo Slider Pro — Frontend CSS
═══════════════════════════════ */

.lsp-outer {
  --lsp-w:    150px;
  --lsp-h:    90px;
  --lsp-gap:  48px;
  --lsp-fade: #ffffff;
  --lsp-dur:  35s;

  position: relative;
  overflow: hidden;
  background: transparent;
}

/* ─── HORIZONTAL ─── */
.lsp-horizontal {
  width: 100%;
}

.lsp-horizontal::before,
.lsp-horizontal::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 120px;
  z-index: 10;
  pointer-events: none;
}
.lsp-horizontal::before {
  left: 0;
  background: linear-gradient(to right, var(--lsp-fade), transparent);
}
.lsp-horizontal::after {
  right: 0;
  background: linear-gradient(to left, var(--lsp-fade), transparent);
}

.lsp-horizontal .lsp-track {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 12px 0;
  width: max-content;
  gap: var(--lsp-gap);
  animation: lsp-scroll-h var(--lsp-dur) linear infinite;
}

/* ─── VERTICAL ─── */
.lsp-vertical {
  width: var(--lsp-w);
  height: calc((var(--lsp-h) + var(--lsp-gap)) * 4);
  max-height: 500px;
  margin: 0 auto;
}

.lsp-vertical::before,
.lsp-vertical::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 80px;
  z-index: 10;
  pointer-events: none;
}
.lsp-vertical::before {
  top: 0;
  background: linear-gradient(to bottom, var(--lsp-fade), transparent);
}
.lsp-vertical::after {
  bottom: 0;
  background: linear-gradient(to top, var(--lsp-fade), transparent);
}

.lsp-vertical .lsp-track {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: max-content;
  gap: var(--lsp-gap);
  animation: lsp-scroll-v var(--lsp-dur) linear infinite;
}

/* ─── Pause au survol ─── */
.lsp-outer:hover .lsp-track {
  animation-play-state: paused;
}

/* ─── Item logo ─── */
.lsp-item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--lsp-w);
  height: var(--lsp-h);
  text-decoration: none;
  border-radius: 6px;
  transition: transform 0.3s ease, opacity 0.3s ease, filter 0.3s ease;
  opacity: var(--lsp-rest-opacity, 0.55);
  filter: grayscale(calc(var(--lsp-rest-gray, 1) * 100%));
}

.lsp-item:hover {
  opacity: 1;
  filter: grayscale(0);
  transform: scale(1.08) translateY(-2px);
}

.lsp-vertical .lsp-item:hover {
  transform: scale(1.08) translateX(2px);
}

.lsp-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
  display: block;
}

/* ─── Keyframes ─── */
@keyframes lsp-scroll-h {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes lsp-scroll-v {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}

/* ─── Responsive ─── */
@media (max-width: 600px) {
  .lsp-horizontal::before,
  .lsp-horizontal::after { width: 60px; }
  .lsp-vertical::before,
  .lsp-vertical::after   { height: 50px; }
}