/* KASPIT — Client marquee. Ported from src/components/ClientMarquee.tsx <style> block. */

.marquee-section {
  position: relative;
  z-index: 10;
  padding-top: 5rem;
  padding-bottom: 5rem;
  overflow: hidden;
  background-color: #000;
  isolation: isolate;
}
.marquee-rule {
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, rgba(232,165,71,0) 5%, rgba(232,165,71,0.55) 50%, rgba(232,165,71,0) 95%, transparent 100%);
}
.marquee-rule.top    { top: 0; }
.marquee-rule.bottom { bottom: 0; }

.marquee-head {
  position: relative;
  z-index: 1;
  text-align: center;
  margin-bottom: 2.5rem;
  padding-left: clamp(1.5rem, 5vw, 8rem);
  padding-right: clamp(1.5rem, 5vw, 8rem);
}
.marquee-head h2 { margin-top: 0.75rem; color: var(--color-text); }

.marquee-mask {
  position: relative;
  z-index: 1;
  /* Mobile: no mask (iOS Safari black-out bug) */
  -webkit-mask-image: none;
  mask-image: none;
}
@media (min-width: 1024px) {
  .marquee-mask {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 3%, #000 97%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0%, #000 3%, #000 97%, transparent 100%);
  }
}
.marquee-track {
  display: flex;
  align-items: center;
  gap: 3.5rem;
  width: max-content;
  will-change: transform;
  backface-visibility: hidden;
  animation: marquee-scroll 90s linear infinite;
  animation-delay: -16s;
}
.marquee-item {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
}
.marquee-logo {
  height: 2.5rem;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  filter: brightness(0) invert(1) opacity(0.55);
  transition: filter 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (min-width: 1024px) {
  .marquee-logo { height: 3rem; }
}
.marquee-item:hover .marquee-logo { filter: brightness(1) invert(0) opacity(1); }

.marquee-logo.keep-shape {
  filter: grayscale(1) brightness(1.4) contrast(0.85) opacity(0.75);
}
.marquee-item:hover .marquee-logo.keep-shape {
  filter: grayscale(0) brightness(1) contrast(1) opacity(1);
}
.marquee-logo.hover-white          { filter: brightness(0) invert(1) opacity(0.55); }
.marquee-item:hover .marquee-logo.hover-white { filter: brightness(0) invert(1) opacity(1); }
.marquee-logo.gray-white          { filter: grayscale(1) brightness(1.6) contrast(0.9) opacity(0.75); }
.marquee-item:hover .marquee-logo.gray-white { filter: brightness(0) invert(1) opacity(1); }

@keyframes marquee-scroll {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}