/* firma.css · «© 2026 Cristian Ghetes» in fondo a ogni pagina (server/CONTRATTO.md, sezione 4).
 *
 * A riposo è testo normale, sempre leggibile. Ogni tanto passa un disturbo breve: le due copie del testo
 * (gli pseudo-elementi, presi da data-testo) ne colorano alcune fasce e le fanno scorrere di lato.
 * Al passaggio del puntatore, al tocco e con la tastiera il disturbo è più forte: il testo si taglia in due,
 * si sdoppia e si riassesta.
 *
 * Quanto dura il disturbo automatico (WCAG 2.2.2, pausa, stop, nascondi):
 * - di norma è uno solo, due colpi in meno di 5 secondi, poi la firma resta ferma;
 * - si ripete ogni 9 secondi solo sotto un antenato con la classe .cg-firma-continua, che mettono le pagine
 *   con un comando «Ferma il movimento» (le tre proposte e la loro home), perché lì lo si può fermare;
 * - /credit.js lo fa partire quando la firma entra nello schermo (classe .cg-firma--attesa fino ad allora):
 *   senza JavaScript parte al caricamento.
 * Con «riduci movimento», con il movimento fermato dalla pagina, in stampa e con i colori forzati
 * non si muove nulla: resta la sottolineatura.
 *
 * Variabili, da impostare sulla firma o su un suo contenitore:
 *   --cg-firma-colore   colore del testo (se manca: quello del contesto)
 *   --cg-firma-a        primo colore dello sdoppiamento
 *   --cg-firma-b        secondo colore dello sdoppiamento
 *
 * Non dipende dal foglio di stile della pagina e non sposta niente intorno: il disturbo non tocca
 * misure né posizioni e resta chiuso dentro il riquadro del collegamento.
 */

.cg-firma {
  display: inline-flex;
  align-items: center;
  min-height: 44px; /* bersaglio comodo anche con il dito */
  padding-inline: 0.5em; /* margine in cui il disturbo resta chiuso... */
  margin-inline: -0.5em; /* ...senza togliere il testo dal suo allineamento */
  overflow: hidden;
  overflow: clip;
  color: var(--cg-firma-colore, inherit);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.cg-firma:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 3px;
}

.cg-firma__testo {
  position: relative;
  display: inline-block;
  line-height: 1.2; /* altezza di riga fissa: le fasce del disturbo cadono sempre sulle lettere */
}

.cg-firma:hover .cg-firma__testo,
.cg-firma:focus-visible .cg-firma__testo {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

@media (prefers-reduced-motion: no-preference) {
  /* Le due copie: sopra il testo, invisibili a riposo, mute per i lettori di schermo. */
  .cg-firma__testo::before,
  .cg-firma__testo::after {
    content: attr(data-testo);
    content: attr(data-testo) / '';
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    -webkit-text-fill-color: currentColor;
    text-decoration: none;
  }

  /* A riposo ogni copia mostra due fasce sottili del testo, in un colore. Si animano solo opacità
     e trasformazione: il disturbo periodico gira sulla scheda grafica e non pesa sulla pagina.
     Di norma un giro solo e incompleto: salta i primi 2,5 s del ciclo e si ferma all'82 %, così i due
     colpi (a 0,3 s e a 4,5 s) finiscono entro 4,9 s. */
  .cg-firma__testo::before {
    color: var(--cg-firma-a, #ff4a36);
    clip-path: polygon(-1em 24%, calc(100% + 1em) 24%, calc(100% + 1em) 38%, -1em 38%, -1em 58%, calc(100% + 1em) 58%, calc(100% + 1em) 68%, -1em 68%);
    animation: cg-firma-a 9s step-end -2.5s 0.82;
  }

  .cg-firma__testo::after {
    color: var(--cg-firma-b, #17b3d6);
    clip-path: polygon(-1em 42%, calc(100% + 1em) 42%, calc(100% + 1em) 54%, -1em 54%, -1em 70%, calc(100% + 1em) 70%, calc(100% + 1em) 80%, -1em 80%);
    animation: cg-firma-b 9s step-end -2.5s 0.82;
  }

  /* Pagine con «Ferma il movimento»: il disturbo si ripete, tanto lo si può fermare. */
  .cg-firma-continua .cg-firma__testo::before {
    animation: cg-firma-a 9s step-end infinite;
  }

  .cg-firma-continua .cg-firma__testo::after {
    animation: cg-firma-b 9s step-end infinite;
  }

  /* Firma non ancora entrata nello schermo (la classe la mette e la toglie /credit.js): niente disturbo. */
  .cg-firma.cg-firma--attesa .cg-firma__testo::before,
  .cg-firma.cg-firma--attesa .cg-firma__testo::after {
    animation: none;
  }

  /* Al passaggio, al tocco e con la tastiera: il testo vero si spegne per pochi fotogrammi
     e le due copie lo ricompongono tagliato in due, con il bordo colorato. */
  .cg-firma:hover .cg-firma__testo,
  .cg-firma:focus-visible .cg-firma__testo,
  .cg-firma:active .cg-firma__testo {
    animation: cg-firma-forte 2s step-end infinite;
  }

  .cg-firma:hover .cg-firma__testo::before,
  .cg-firma:focus-visible .cg-firma__testo::before,
  .cg-firma:active .cg-firma__testo::before {
    color: inherit;
    text-shadow: -0.07em 0 var(--cg-firma-a, #ff4a36);
    animation: cg-firma-forte-a 2s step-end infinite;
  }

  .cg-firma:hover .cg-firma__testo::after,
  .cg-firma:focus-visible .cg-firma__testo::after,
  .cg-firma:active .cg-firma__testo::after {
    color: inherit;
    text-shadow: 0.07em 0 var(--cg-firma-b, #17b3d6);
    animation: cg-firma-forte-b 2s step-end infinite;
  }
}

/* Disturbo periodico: un colpo breve a un terzo del ciclo, uno più lungo verso la fine.
   Una copia ferma al suo posto colora le sue fasce; spostata di lato le fa scorrere. */
@keyframes cg-firma-a {
  0%, 100% { opacity: 0; transform: none; }
  31% { opacity: 1; transform: none; }
  31.7% { opacity: 0; }
  78% { opacity: 1; transform: none; }
  79.4% { opacity: 1; transform: translate3d(-0.24em, 0, 0); }
  80.1% { opacity: 1; transform: none; }
  80.7% { opacity: 0; }
  81.3% { opacity: 0.6; transform: none; }
  81.9% { opacity: 0; }
}

@keyframes cg-firma-b {
  0%, 100% { opacity: 0; transform: none; }
  31.7% { opacity: 1; transform: translate3d(0.16em, 0, 0); }
  32.3% { opacity: 0; }
  78.7% { opacity: 1; transform: translate3d(0.2em, 0, 0); }
  79.4% { opacity: 1; transform: none; }
  80.7% { opacity: 0; }
  81.3% { opacity: 0.6; transform: none; }
  81.9% { opacity: 0; }
}

/* Disturbo forte: quattro tagli, uno scossone con lo sdoppiamento pieno, un calo di luce,
   poi un secondo e mezzo di quiete. Le due copie si dividono il testo: una sopra il taglio, una sotto. */
@keyframes cg-firma-forte {
  0% { -webkit-text-fill-color: transparent; transform: none; text-shadow: none; opacity: 1; }
  18% { -webkit-text-fill-color: currentColor; transform: skewX(-14deg); text-shadow: -0.09em 0 var(--cg-firma-a, #ff4a36), 0.09em 0 var(--cg-firma-b, #17b3d6); }
  21% { transform: none; text-shadow: 0.05em 0 var(--cg-firma-a, #ff4a36), -0.05em 0 var(--cg-firma-b, #17b3d6); opacity: 0.55; }
  24%, 100% { -webkit-text-fill-color: currentColor; transform: none; text-shadow: none; opacity: 1; }
}

@keyframes cg-firma-forte-a {
  0% { opacity: 1; clip-path: inset(0 -1em 54% -1em); transform: translate3d(-0.3em, 0, 0); }
  4% { opacity: 1; clip-path: inset(0 -1em 36% -1em); transform: translate3d(0.14em, 0, 0); }
  9% { opacity: 1; clip-path: inset(0 -1em 60% -1em); transform: translate3d(0.36em, 0, 0); }
  13% { opacity: 1; clip-path: inset(0 -1em 44% -1em); transform: translate3d(-0.08em, 0, 0); }
  18%, 100% { opacity: 0; clip-path: inset(0 -1em 54% -1em); transform: none; }
}

@keyframes cg-firma-forte-b {
  0% { opacity: 1; clip-path: inset(46% -1em 0 -1em); transform: translate3d(0.1em, 0, 0); }
  4% { opacity: 1; clip-path: inset(64% -1em 0 -1em); transform: translate3d(-0.34em, 0, 0); }
  9% { opacity: 1; clip-path: inset(40% -1em 0 -1em); transform: translate3d(-0.06em, 0, 0); }
  13% { opacity: 1; clip-path: inset(56% -1em 0 -1em); transform: translate3d(0.3em, 0, 0); }
  18%, 100% { opacity: 0; clip-path: inset(46% -1em 0 -1em); transform: none; }
}

/* Movimento fermato dalla pagina (Strati, Filo, Acqua), stampa e colori forzati: nessun disturbo. */
:is(.motion-paused, .fermo, .movimento-fermo) .cg-firma .cg-firma__testo,
:is(.motion-paused, .fermo, .movimento-fermo) .cg-firma .cg-firma__testo::before,
:is(.motion-paused, .fermo, .movimento-fermo) .cg-firma .cg-firma__testo::after {
  animation: none !important;
}

@media print, (forced-colors: active) {
  .cg-firma .cg-firma__testo,
  .cg-firma .cg-firma__testo::before,
  .cg-firma .cg-firma__testo::after {
    animation: none !important;
  }

  .cg-firma .cg-firma__testo::before,
  .cg-firma .cg-firma__testo::after {
    content: none !important;
  }
}

/* Riga dei dati dell'azienda nei piè di pagina (Strati, Filo, Acqua, dossier): sul telefono i tre gruppi
   «ragione sociale», «P.IVA e REA», «Privacy…» vanno a capo interi, così nessun punto di separazione
   resta appeso a fine riga. Da 541 px in su la riga sta intera come prima. */
@media (max-width: 540px) {
  .legale-sep { display: none; }
  .legale-gruppo { display: block; }
}

/* Parole che non vanno spezzate a fine riga: orari, codici, sigle con il trattino */
.unito { white-space: nowrap; }