/* ==========================================================================
   Marquee dei loghi (widget HTML 7de90dae "CAROSELLO LOGHI INFINITO", CSS scritto a
   mano sul vivo e portato quasi di peso). Solo CSS, nessuno script.
   Markup: .bedouin-marquee-section > .bedouin-marquee-track > .bedouin-logo-item > img,
   con la serie di loghi scritta DUE volte: la pista scorre di meta' e il giro non ha salti.
   Bordi sfumati con una maschera; loghi color crema al 70% via filtro, colori veri all'hover.
   Differenze dal vivo: con "riduci movimento" la pista sta ferma (sul vivo girava comunque).
   ========================================================================== */
.bedouin-marquee-section {
  width: 100%;
  overflow: hidden;
  padding: 50px 0;
  background-color: transparent;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}

.bedouin-marquee-track {
  display: flex;
  width: max-content;
  animation: bedouinScroll 80s linear infinite;
}

@keyframes bedouinScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.bedouin-logo-item {
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 190px;
  height: 80px;
  padding: 0 30px;
}

.bedouin-logo-item img {
  max-width: 85%;
  max-height: 40px;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(98%) sepia(16%) saturate(550%) hue-rotate(325deg) brightness(104%) contrast(102%);
  opacity: 0.7;
  transition: filter 0.4s ease, transform 0.4s ease, opacity 0.4s ease;
  cursor: pointer;
}

.bedouin-logo-item:hover img {
  filter: none;
  opacity: 1;
  transform: scale(1.08);
}

@media (max-width: 1199px) {
  .bedouin-logo-item { width: calc(100vw / 7); padding: 0 20px; }
}

@media (max-width: 991px) {
  .bedouin-logo-item { width: calc(100vw / 6); padding: 0 15px; }
}

@media (max-width: 767px) {
  .bedouin-logo-item { width: calc(100vw / 4); padding: 0 10px; height: 60px; }
}

/* base.css porta a 0.01ms ogni animazione: su una animazione infinita darebbe un tremolio. */
@media (prefers-reduced-motion: reduce) {
  .bedouin-marquee-track {
    animation: none;
  }
}