/* ═══════════════════════════════════════
   ANIMATIONS — clip reveal per parole
═══════════════════════════════════════ */

/* Maschera della singola parola */
.rv-w {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.18em;   /* spazio per i discendenti (g, y, p...) */
  margin-bottom: -0.18em;   /* compensa per non alterare il ritmo delle righe */
}

/* Parola: parte nascosta sotto la maschera */
.rv-wi {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--rv-delay, 0s);
}

/* Stato visibile: sale in posizione */
.rv-visible .rv-wi {
  transform: translateY(0);
}


/* ═══════════════════════════════════════
   NASTRO CONTINUO (marquee)
   Una fila che scorre da destra a sinistra
   senza sosta. Usato dalla sezione numeri e
   da quella clienti.

   Il moto lo governa js/nastro.js, non una
   animation CSS: l'animazione CSS non si puo'
   pilotare col mouse, e qui tenendo premuto
   si deve poter trascinare la fila avanti e
   indietro. Il JS tiene una posizione in
   pixel e la riporta dentro l'intervallo di
   un gruppo a ogni fotogramma, quindi il
   ciclo si richiude sempre — in tutte e due
   le direzioni.
═══════════════════════════════════════ */

.nastro {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* Il contenuto non finisce di netto contro il bordo: sfuma, cosi'
     sembra arrivare da fuori schermo invece che essere tagliato. */
  -webkit-mask-image: linear-gradient(to right,
    transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(to right,
    transparent 0, #000 6%, #000 94%, transparent 100%);
  /* Il trascinamento orizzontale e' nostro, quello verticale resta al
     browser: sul telefono la pagina scorre ancora normalmente. */
  touch-action: pan-y;
  cursor: grab;
}

.nastro.sta-trascinando {
  cursor: grabbing;
  /* Trascinando sopra i numeri non si deve selezionare il testo. */
  -webkit-user-select: none;
          user-select: none;
}

.nastro-traccia {
  display: flex;
  width: max-content;
  will-change: transform;
}

/* Il gruppo e' l'unita' che si ripete: dentro ci stanno tutti gli
   elementi, uno dopo l'altro. */
.nastro-gruppo {
  display: flex;
  align-items: center;
  flex: none;
}

/* Le immagini dentro il nastro non devono partire col trascinamento
   nativo del browser, che ruberebbe il gesto. */
.nastro img {
  -webkit-user-drag: none;
  user-select: none;
}

/* Chi ha chiesto meno animazioni al sistema operativo non vede nulla
   muoversi: js/nastro.js non parte, la fila resta ferma e si scorre
   a mano con la barra del browser. */
@media (prefers-reduced-motion: reduce) {
  .nastro {
    overflow-x: auto;
    cursor: auto;
    -webkit-mask-image: none;
            mask-image: none;
  }
}