/* ═══════════════════════════════════════════════════════════════════════════
   MOVIMENTO (5/10) — tutto vale solo sotto html.movimento
   ───────────────────────────────────────────────────────────────────────────
   La classe la mette js/movimento.js, e non la mette a chi ha chiesto «riduci
   il movimento». Senza classe la pagina è ferma e completa: niente qui dentro
   nasconde contenuti a chi non vedrà l'animazione.

   Tre momenti, valori della skill di Emil Kowalski (curva d'uscita decisa,
   solo transform e opacity):
     1. l'ENTRATA dell'apertura, una volta sola: i due elementi della croce si
        ricompongono attorno alla foto, il titolo sale riga per riga;
     2. le COMPARSE allo scorrimento: salgono di poco e si accendono, una volta;
     3. le SCENE: la croce della chiusura che si monta, l'evidenziatore di «Chi
        siamo» che stende le fasce, la foto della promo che entra.
   Fra una pagina e l'altra, una dissolvenza breve (View Transitions); la
   testata resta ferma.

   Scartate apposta: contatori sui numeri, parallasse, animazioni a ogni tasto,
   movimenti sui controlli usati spesso. È un sito da leggere, anche per
   persone anziane.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 0. Fra le pagine ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; animation-timing-function: var(--nl-esce); }
  .testata { view-transition-name: testata; }
}

/* ── 1. Entrata dell'apertura ─────────────────────────────────────────────
   Parte quando i testi ci sono (testi.js mette .testi-pronti): prima l'apertura
   resta nascosta, così non si vede il titolo comparire a metà salita. */
@keyframes nl-sale    { from { opacity: 0; transform: translateY(.45em); } }
@keyframes nl-sale-px { from { opacity: 0; transform: translateY(1.5rem); } }
@keyframes nl-accende { from { opacity: 0; } }
@keyframes nl-trattino { from { transform: scaleX(0); } }
@keyframes nl-azzurro { from { opacity: 0; transform: translate(-9%, -9%) scale(.94); } }
@keyframes nl-accento { from { opacity: 0; transform: translate(16%, 16%) scale(.9); } }
@keyframes nl-foto    { from { transform: scale(1.12); } }

.movimento:not(.testi-pronti) .apertura,
.movimento:not(.testi-pronti) .apertura-pagina { visibility: hidden; }

.movimento .apertura h1 > span,
.movimento .apertura-pagina h1 > span { display: inline-block; animation: nl-sale .9s var(--nl-esce) both; }
.movimento .apertura h1 > .leggero,
.movimento .apertura-pagina h1 > .leggero { display: block; animation-delay: .12s; }
.movimento .apertura h1.trattino::after,
.movimento .apertura-pagina h1.trattino::after { transform-origin: left; animation: nl-trattino .7s var(--nl-esce) .45s both; }

.movimento .apertura .lead,
.movimento .apertura-pagina :is(.lead, .sottotitolo, .etichetta, .briciole) { animation: nl-sale-px .8s var(--nl-esce) .28s both; }
.movimento .apertura .azioni,
.movimento .apertura-pagina .azioni { animation: nl-sale-px .8s var(--nl-esce) .4s both; }
.movimento .apertura .apertura-paziente { animation: nl-sale-px .8s var(--nl-esce) .52s both; }

/* La croce di foto si monta: l'elemento azzurro (la foto) arriva dall'alto a
   sinistra, l'accento dal basso a destra, come i due pezzi del simbolo. */
.movimento .croce-foto-el--foto    { animation: nl-azzurro 1.1s var(--nl-esce) .05s both; }
.movimento .croce-foto-el--accento { animation: nl-accento 1.1s var(--nl-esce) .22s both; }
.movimento .croce-foto-el--foto img { animation: nl-foto 1.8s var(--nl-esce) .05s both; }
.movimento .apertura::before { animation: nl-accende 1.6s ease-out .3s both; }
.movimento .apertura-pagina-foto { animation: nl-accende 1s var(--nl-esce) .2s both; }

/* ── 2. Comparse allo scorrimento ────────────────────────────────────────── */
.movimento .rivela {
  opacity: 0; transform: translateY(1.75rem);
  transition: opacity .8s var(--nl-esce), transform .8s var(--nl-esce);
  transition-delay: var(--ritardo, 0s);
}
.movimento .rivela.in-vista { opacity: 1; transform: none; }

/* Il filetto arancione delle fasce dei check-up si stende da sinistra. */
.movimento .fascia-titolo.rivela::after { transform: scaleX(0); transform-origin: left; transition: transform 1s var(--nl-esce) .2s; }
.movimento .fascia-titolo.in-vista::after { transform: none; }

/* ── 3. Scene ────────────────────────────────────────────────────────────── */

/* La chiusura: la croce della vetrofania si monta quando entra. */
.movimento .chiusura.scena::before { opacity: 0; transform: translate(-14%, -14%); transition: opacity .9s var(--nl-esce), transform 1.3s var(--nl-esce); }
.movimento .chiusura.scena::after  { opacity: 0; transform: translate(18%, 18%);   transition: opacity .9s var(--nl-esce) .18s, transform 1.3s var(--nl-esce) .18s; }
.movimento .chiusura.scena .chiusura-dentro > * { opacity: 0; transform: translateY(1.5rem); transition: opacity .8s var(--nl-esce), transform .8s var(--nl-esce); }
.movimento .chiusura.scena .chiusura-dentro > :nth-child(2) { transition-delay: .15s; }
.movimento .chiusura.scena .chiusura-dentro > :nth-child(3) { transition-delay: .28s; }
.movimento .chiusura.in-vista::before,
.movimento .chiusura.in-vista::after,
.movimento .chiusura.in-vista .chiusura-dentro > * { opacity: 1; transform: none; }

/* «Chi siamo»: l'evidenziatore stende le fasce blu una dopo l'altra, poi
   compare la scritta, come un pennarello sulla foto. */
.movimento .chi-siamo-foto.scena img { transform: scale(1.06); transition: transform 1.6s var(--nl-esce); }
.movimento .chi-siamo-foto.scena .evidenzia {
  background: linear-gradient(var(--nl-blu-ink), var(--nl-blu-ink)) no-repeat left / 0% 100%;
  color: transparent;
  transition: background-size .7s var(--nl-esce), color .4s ease-out;
}
.movimento .chi-siamo-foto.scena .evidenzia:nth-child(2) { transition-delay: .14s, .5s; }
.movimento .chi-siamo-foto.scena .evidenzia:nth-child(3) { transition-delay: .28s, .64s; }
.movimento .chi-siamo-foto.scena .evidenzia:nth-child(1) { transition-delay: 0s, .36s; }
.movimento .chi-siamo-foto.in-vista img { transform: none; }
.movimento .chi-siamo-foto.in-vista .evidenzia { background-size: 100% 100%; color: var(--nl-bianco); }

/* La promo: la foto della campagna entra da destra e si posa. */
.movimento .promo-foto.scena img { opacity: 0; transform: translateX(8%) scale(1.04); transition: opacity 1s var(--nl-esce) .15s, transform 1.2s var(--nl-esce) .15s; }
.movimento .promo-foto.scena::after { transform: translate(40%, 40%); transition: transform 1s var(--nl-esce) .45s; }
.movimento .promo-foto.in-vista img { opacity: 1; transform: none; }
.movimento .promo-foto.in-vista::after { transform: none; }