:root {
  --sponsor-vetro: var(--pannello);
  --sponsor-inchiostro: var(--testo);
  --sponsor-marchio-h: 52px;
}

.sponsor {
  inline-size: min(100%, calc(var(--max-larghezza) + var(--margine) * 2));
  margin-inline: auto;
  padding-inline: var(--margine);
  padding-block: clamp(var(--passo-8), 8vh, var(--passo-12));
}

.saluti + .sponsor { padding-block-start: var(--passo-4); }

.saluti + .sponsor + .chiusura-pagina {
  padding-block-start: calc(clamp(var(--passo-8), 8vh, var(--passo-12)) - var(--passo-4));
}

.sponsor__nastro {
  position: relative;
  display: flex;
  gap: var(--passo-3);
  margin-block: calc(var(--passo-2) * -1) calc(var(--passo-4) * -1);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
}

ul.sponsor__fila {
  display: flex;
  gap: var(--passo-3);
  flex: none;
  margin: 0;
  padding: var(--passo-2) 0 var(--passo-4);
  list-style: none;
  animation: sponsor-scorri 42s linear infinite;
}

@keyframes sponsor-scorri {
  from { transform: translate3d(0, 0, 0); }

  to { transform: translate3d(calc(-100% - var(--passo-3)), 0, 0); }
}

.sponsor__nastro:hover .sponsor__fila,
.sponsor__nastro:focus-within .sponsor__fila { animation-play-state: paused; }

.sponsor__nastro.is-mano { cursor: grab; touch-action: pan-y; }
.sponsor__nastro.is-mano .sponsor__fila { animation: none; will-change: transform; }
.sponsor__nastro.is-presa { cursor: grabbing; user-select: none; }
.sponsor__nastro.is-presa .sponsor__link { cursor: grabbing; }
.sponsor__nastro.is-presa .sponsor__link:hover { transform: none; }

.sponsor__nastro.is-ferma { justify-content: center; }
.sponsor__nastro.is-mano.is-ferma { cursor: auto; touch-action: auto; }
.sponsor__nastro.is-ferma .sponsor__fila { animation: none; }
.sponsor__nastro.is-ferma [data-sponsor-fila-copia] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .sponsor__nastro { overflow-x: auto; scrollbar-width: none; }
  .sponsor__nastro.is-mano { cursor: auto; touch-action: auto; }
  .sponsor__nastro::-webkit-scrollbar { display: none; }
  [data-sponsor-fila-copia] { display: none; }
}

.sponsor__voce { flex: none; }
.sponsor__voce[hidden] { display: none; }

.sponsor__link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: clamp(160px, 20vw, 208px);
  block-size: 96px;
  padding: var(--passo-2) var(--passo-4);
  border: 1px solid var(--linea);
  border-radius: var(--raggio);
  background: var(--grad-pannello), var(--sponsor-vetro);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  text-decoration: none;
  transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}

.sponsor__link:hover,
.sponsor__link:focus-visible {
  border-color: var(--accento, var(--viola));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 0 1px var(--accento, var(--viola)), 0 18px 40px -20px var(--accento, var(--viola));
  transform: translateY(-2px);
}

.sponsor__voce.is-evidenza .sponsor__link {
  border-color: var(--linea-viva);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 28px -10px var(--accento, var(--viola));
}

.sponsor__logo {
  max-inline-size: 100%;
  max-block-size: var(--sponsor-marchio-h);
  object-fit: contain;
  transition: filter 240ms ease, opacity 240ms ease;
}

.sponsor__logo.is-scuro { filter: brightness(0) invert(1); }

.sponsor__logo.is-grezzo {
  max-block-size: 64px;
  border-radius: var(--raggio-s);
}

.sponsor.is-js .sponsor__logo:not(.is-pronto) { opacity: 0; }

.sponsor__scritta {
  font-family: var(--font-titolo);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  color: var(--sponsor-inchiostro);
  transition: opacity 240ms ease;
}

.sponsor__nuovo {
  position: absolute;
  inset-block-start: var(--passo);
  inset-inline-end: var(--passo);
  padding: 2px 7px;
  border-radius: var(--raggio-pill);
  background: var(--accento, var(--viola));
  color: var(--su-marca);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}