/* ═══ 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; }

/* Una chiamata, un SMS, una mail non portano via dalla pagina: non c'è niente
   da aspettare, e il battito restava per sempre («Chiama il 112», 20/10/2026).
   Lì batte due volte, per dire «sentito», e basta. */
a[href^="tel:"].tocco, a[href^="sms:"].tocco, a[href^="mailto:"].tocco{ animation-iteration-count:2; }

/* Mai su un segno della mappa: la sua posizione È un `transform`, e questa
   animazione glielo toglierebbe (vedi batte.js). Cintura oltre alle bretelle. */
.maplibregl-marker.tocco{ animation:none; }

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

/* ═══════════════════════════════════════════════════════════════════════════
   STO CARICANDO — la trinacria piccola, con le gambe che girano
   ═══════════════════════════════════════════════════════════════════════════
   (views/componenti/attesa.html) Piccola: trenta pixel, il posto di una riga
   di testo. Un giro in un secondo e tre decimi: abbastanza svelta da dire «sto
   lavorando», non tanto da sembrare una ventola.

   Disegnata come MASCHERA e colorata con un colore solo, così il giorno che
   cambia si cambia in un posto. */
/* Il grigio del sito, ma PIENO: gambe e testa si sovrappongono, e un colore
   mezzo trasparente lì dove si incrociano si somma — si vedeva com'è montata.
   È lo stesso grigio dei testi spenti (blu notte al 50% sul fondo chiaro),
   calcolato una volta e scritto opaco. Chi la vuole d'altro colore: `--st-gira`. */
.st-gira{ position:relative; display:inline-block; width:30px; aspect-ratio:920/960; vertical-align:middle;
  color:var(--st-gira, #808b98); opacity:1; }
.st-gira-gambe, .st-gira::after{ content:''; position:absolute; inset:0; background:currentColor;
  -webkit-mask:center / contain no-repeat; mask:center / contain no-repeat; }
.st-gira-gambe{ -webkit-mask-image:url('/assets/landing/trinacria_legs.svg'); mask-image:url('/assets/landing/trinacria_legs.svg');
  transform-origin:50% 50%; animation:st-gira 1.3s linear infinite; }
.st-gira::after{ -webkit-mask-image:url('/assets/landing/trinacria_head.svg'); mask-image:url('/assets/landing/trinacria_head.svg'); }

@keyframes st-gira{ to{ transform:rotate(360deg); } }

/* Chi ha chiesto di non vedere animazioni la vede ferma: resta il segno. */
@media (prefers-reduced-motion: reduce){
  .st-gira-gambe{ animation:none; }
}