/* ============================================================
   Transizione di pagina con preloader (derivata da "Page Transitions"
   di Elementor Pro). Per disattivarla basta togliere dall'HTML
   la riga <link rel="stylesheet" href="/css/transizione.css">,
   lo <script src="/js/transizione.js"> e il blocco
   <div class="transizione" id="transizione">…</div>.

   Sfondo #38B7BF e logo largo il 40 % della finestra come l'originale.
   Tempi accorciati su decisione di Lorenzo il 24/10/2026, due volte
   (l'originale aspettava 3,4 s prima di cambiare pagina e dissolveva
   in 3,5 s all'arrivo), e di nuovo il 26-27/10/2026: ora un clic
   costa circa 1,1 s + 0,5 s.

   Il logo è un SVG inline (sito/img non serve) che "si disegna":
   prima le quattro barre, poi le lettere L Q U A D R O, ogni forma
   con il contorno bianco che si chiude e poi si riempie (1,25 s
   all'entrata diretta, 0,85 s all'uscita).
   - Uscita (clic su un link): la schermata scende in 0,4 s e dopo
     0,2 s il logo comincia a comporsi; a 1,05 s è completo e a 1,1 s
     si va alla nuova pagina.
   - Entrata dopo un clic: il logo svanisce in 0,2 s; la schermata si
     dissolve in 0,4 s dopo 0,1 s.
   - Entrata diretta (indirizzo digitato, segnalibro, motore di
     ricerca, ricarica): il logo si disegna mentre la pagina si carica
     (finito a 1,4 s), poi la schermata svanisce in 0,4 s dopo 0,1 s.
   Il momento in cui la schermata se ne va lo decide transizione.js.
   L'animazione si vede anche con "riduci movimento" attivo nel sistema
   (Windows: Accessibilità → Effetti di animazione), come tutte le altre
   animazioni del sito.
   ============================================================ */

.transizione {
  --tr-ritardo-preloader: 50ms;    /* uscita: pausa a logo composto prima di cambiare pagina */
  --tr-dissolvenza: .2s;           /* entrata dopo un clic: il logo svanisce */
  --tr-entrata-attesa: .1s;        /* entrata: attesa prima che la schermata si dissolva */
  --tr-entrata-dissolvenza: .4s;   /* dissolvenza della schermata all'entrata */
  --tr-discesa: .4s;               /* discesa della schermata all'uscita */
  --tr-disegno-inizio: .15s;       /* entrata diretta: quando parte il disegno del logo */
  --tr-disegno-passo: 50ms;        /* distanza tra una forma e la successiva (11 forme) */
  --tr-disegno-tratto: .45s;       /* durata del contorno di ogni forma */
  --tr-disegno-riempimento: .3s;   /* durata del riempimento di ogni forma */
  --tr-disegno-contorno-via: .2s;  /* il contorno sparisce, a riempimento finito */
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  background: #38B7BF;
  animation-fill-mode: both;
}

.transizione__logo {
  position: absolute;
  display: block;
  width: 40%;
  height: auto;
  overflow: visible;
}

/* Ogni forma del logo parte invisibile: contorno "non ancora tracciato" e senza riempimento */
.transizione__forma {
  fill: #fff;
  fill-opacity: 0;
  stroke: #fff;
  stroke-width: 1.5px;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

/* Logo che si disegna (uscita ed entrata diretta): --i è il numero d'ordine della forma, 0-10.
   Tre animazioni per forma: il contorno si traccia, il riempimento compare, poi il contorno sparisce
   (il tratto lasciato sopra il riempimento sporcava i bordi di qualche pixel). */
.transizione--disegna .transizione__forma {
  animation:
    transizione-tratto var(--tr-disegno-tratto) ease-out forwards,
    transizione-riempimento var(--tr-disegno-riempimento) ease-out forwards,
    transizione-contorno-via var(--tr-disegno-contorno-via) ease-out forwards;
  animation-delay:
    calc(var(--tr-disegno-inizio) + var(--i) * var(--tr-disegno-passo)),
    calc(var(--tr-disegno-inizio) + var(--i) * var(--tr-disegno-passo) + var(--tr-disegno-tratto) * .6),
    calc(var(--tr-disegno-inizio) + var(--i) * var(--tr-disegno-passo) + var(--tr-disegno-tratto) * .6 + var(--tr-disegno-riempimento));
}

/* Logo già completo (entrata dopo un clic su un link): solo riempimento, senza contorno */
.transizione--completo .transizione__forma {
  fill-opacity: 1;
  stroke: none;
}

/* Entrata: la schermata svanisce (all'entrata diretta transizione.js aggiunge la classe solo a logo disegnato) */
.transizione--entering {
  animation-name: transizione-fade-out;
  animation-delay: var(--tr-entrata-attesa);
  animation-duration: var(--tr-entrata-dissolvenza);
}
/* Entrata dopo un clic: il logo completo svanisce nel primo mezzo secondo (come nell'originale),
   poi la schermata si dissolve sulla pagina senza il logo sopra i testi */
.transizione--entering.transizione--completo .transizione__logo {
  animation: transizione-fade-out var(--tr-dissolvenza) both;
}

/* Uscita (clic su un link): la schermata scende dall'alto e intanto il logo si compone, più in fretta
   che all'entrata diretta (finito a 1,05 s dal clic; transizione.js cambia pagina 50 ms dopo) */
.transizione--exiting {
  --tr-disegno-inizio: .2s;
  --tr-disegno-passo: 30ms;
  --tr-disegno-tratto: .35s;
  --tr-disegno-riempimento: .2s;
  animation-name: transizione-fade-in-down;
  animation-duration: var(--tr-discesa);
}

.transizione--entered {
  display: none;
}

@keyframes transizione-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@keyframes transizione-fade-in-down {
  from { opacity: 0; transform: translate3d(0, -100%, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes transizione-tratto {
  to { stroke-dashoffset: 0; }
}
@keyframes transizione-riempimento {
  to { fill-opacity: 1; }
}
@keyframes transizione-contorno-via {
  to { stroke-opacity: 0; }
}