/* ═══ IL BATTITO DEL NUMERO ═══════════════════════════════════════════════════
   Sta sul NUMERO e non sulla cornice dello stepper: è il numero il pezzo che
   potrebbe ancora cambiare, e mettere in dubbio tutta la scatoletta farebbe
   sembrare rotti anche i due bottoni, che invece continuano a rispondere.

   Battito lento e pieno — quasi un secondo — non un lampeggio: un numero che
   sfarfalla si legge come un errore, uno che respira si legge come un'attesa.
   Chi ha chiesto di non vedere animazioni non ne vede: resta più chiaro, che è
   la stessa cosa detta senza movimento. */
@keyframes st-batte{
  0%  { transform:scale(1);    opacity:1   }
  45% { transform:scale(1.22); opacity:.45 }
  100%{ transform:scale(1);    opacity:1   }
}

/* ═══ PERCHÉ TRE SELETTORI E NON UNO ════════════════════════════════════════
   Il contatore dello shop fa saltare il numero a ogni tocco — una sua
   animazione, `.mk-salta`, sulla stessa proprietà. Due animazioni sullo stesso
   elemento non convivono: ne vince UNA, e con la stessa forza vinceva quella
   scritta più in basso nel foglio — cioè una cosa diversa da pagina a pagina.
   Il risultato era un battito che partiva al primo tocco e poi non si vedeva
   più, senza che niente fosse rotto.

   Qui il battito pesa più del salto e vince sempre: il salto dice «ti ho
   sentito», il battito dice «non è ancora vero», e quando ci sono tutti e due è
   il secondo quello che conta. */
.batte,
[data-n].batte,
.mk-n.batte{
  display:inline-block;
  animation:st-batte .8s ease-in-out infinite;
  will-change:transform, opacity;
}

@media (prefers-reduced-motion: reduce){
  .batte,
  [data-n].batte,
  .mk-n.batte{ animation:none; opacity:.5; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   QUELLO CHE TOCCHI PULSA FINCHÉ NON AGISCE
   ═══════════════════════════════════════════════════════════════════════════
   Fra il dito e la pagina nuova ci sono sempre due o tre decimi, e su una rete
   lenta molto di più. In quel buco non succedeva niente, e niente si legge come
   «non ha sentito»: si tocca di nuovo, e la seconda volta si finisce dove non
   si voleva andare.

   Il battito non sposta niente e non cambia i colori di nessuno: schiarisce e
   rimpicciolisce appena, così va bene sopra un bottone, un link, una pastiglia
   — qualunque cosa, senza sapere com'è fatta. */
@keyframes st-tocco{
  0%  { opacity:1;   transform:scale(1)    }
  50% { opacity:.55; transform:scale(.975) }
  100%{ opacity:1;   transform:scale(1)    }
}

.tocco{ animation:st-tocco .55s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce){
  .tocco{ animation:none; opacity:.6; }
}