/* ANIMAZIONI */
/* ------------------------------------------------ */
/* Sedici sequenze. Quattordici vengono dall'export della vetrina, che
   ne dichiarava sedici: due — haloDrift e textGlow — erano definite e
   mai usate, e un binding di animazione valeva sempre 'none', quindi
   non sono state portate. Le ultime due, entrata-breve e apri,
   arrivano dall'export dell'area clienti.

   I ritardi scaglionati (i quattro nodi del percorso, le nove gocce)
   stanno qui agganciati con :nth-child, non in attributi di stile:
   cosi' la Content-Security-Policy puo' vietare style= senza spegnere
   niente.

   In fondo al file c'e' il blocco che spegne tutto quando il sistema
   dichiara prefers-reduced-motion. Nell'export non c'era, con 46
   animazioni infinite attive contemporaneamente. */


/* LE SEQUENZE */
/* ------------------------------------------------ */

/* Il riflesso che attraversa il testo dorato. */
@keyframes riflesso {
  from { background-position: 200% 50%; }
  to   { background-position: 0% 50%; }
}

/* La rotazione lentissima degli anelli di sfondo. */
@keyframes giro {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* L'entrata dal basso, una sola volta, al caricamento. */
@keyframes entrata {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* La stessa entrata, ma corta: quattordici pixel invece di
   ventiquattro. Serve all'area clienti, dove la stessa sequenza gira
   anche a diciotto centesimi di secondo sulla tendina del profilo, e
   a quella durata ventiquattro pixel scattano invece di scorrere. */
@keyframes entrata-breve {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* L'apertura di un pannello a fisarmonica: scende dall'alto di pochi
   pixel, il contrario dell'entrata. E' il dettaglio dei piani
   nell'area clienti. */
@keyframes apri {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Lo scorrimento della fascia certificazioni. Il -50% e' esatto:
   l'elenco e' scritto due volte, e meta' pista e' una copia. */
@keyframes scorrimento {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* La goccia che cade da sopra lo schermo fino a sotto. */
@keyframes caduta {
  0%   { opacity: 0; transform: translateY(-15vh); }
  12%  { opacity: .8; }
  80%  { opacity: .5; }
  100% { opacity: 0; transform: translateY(105vh); }
}

/* Il pallino che pulsa con un'onda intorno. */
@keyframes pulsazione-punto {
  0%, 100% { box-shadow: 0 0 0 0 rgb(var(--rgb-accento) / .5); transform: scale(1); }
  50%      { box-shadow: 0 0 0 6px rgb(var(--rgb-accento) / 0); transform: scale(1.25); }
}

/* La linea del percorso che si allunga e poi si spegne. */
@keyframes linea-viva {
  0%   { width: 0; opacity: 1; }
  75%  { width: var(--percorso-tratto); opacity: 1; }
  92%  { width: var(--percorso-tratto); opacity: 0; }
  100% { width: 0; opacity: 0; }
}

/* La lama di luce che attraversa una superficie. */
@keyframes lampo {
  0%   { opacity: 0; transform: translateX(-105%); }
  8%   { opacity: 1; }
  26%  { opacity: 1; transform: translateX(105%); }
  34%  { opacity: 0; transform: translateX(105%); }
  100% { opacity: 0; transform: translateX(105%); }
}

/* L'onda che scende lungo il racconto di «chi siamo». Stessa forma di
   linea-viva ma sull'altezza, e con il tratto passato dall'esterno:
   qui non e' una percentuale del blocco, e' la distanza fra il primo
   e l'ultimo nodo, che solo racconto.js conosce. */
@keyframes racconto-onda {
  0%   { height: 0; opacity: 1; }
  75%  { height: var(--racconto-tratto, 0); opacity: 1; }
  92%  { height: var(--racconto-tratto, 0); opacity: 0; }
  100% { height: 0; opacity: 0; }
}

/* Il nodo del percorso che si accende al passaggio dell'onda. */
@keyframes nodo-acceso {
  0%, 100% {
    background: var(--superficie-chiara);
    color: var(--accento-su-chiaro);
    box-shadow: 0 0 0 0 rgb(var(--rgb-accento) / 0);
  }
  6%, 16% {
    background: var(--accento);
    color: var(--testo-su-scuro);
    box-shadow: 0 0 26px 4px rgb(var(--rgb-accento) / .55);
  }
  30% {
    background: var(--superficie-chiara);
    color: var(--accento-su-chiaro);
    box-shadow: 0 0 0 0 rgb(var(--rgb-accento) / 0);
  }
}

/* La scatola del conto alla rovescia che pulsa piano. */
@keyframes pulsazione-scatola {
  0%, 100% { box-shadow: 0 0 6px 0 rgb(var(--rgb-accento) / .25); }
  50%      { box-shadow: 0 0 22px 4px rgb(var(--rgb-accento) / .75); }
}

/* Il chiarore che appare e svanisce. */
@keyframes velatura {
  0%, 100% { opacity: 1; }
  50%      { opacity: .55; }
}


/* DOVE SI APPLICANO */
/* ------------------------------------------------ */

/* Il riflesso dorato. Nell'export girava a 6 secondi in tredici punti
   e a 7 in altri sei, senza una ragione visibile: uniformato a 6. */
.oro {
  animation: riflesso 6s linear infinite;
}

/* Le due targhette dell'eroe galleggiavano, 10 pixel su sei e sette
   secondi. Ferme dal 31 agosto 2026, per una ragione nata lo stesso
   giorno: da quando stanno a cavallo dei bordi della fotografia, il
   loro riferimento e' una linea immobile, e un elemento che oscilla
   contro una linea immobile non si legge come vivo — si legge come
   instabile. Sopra la corsa sporgeva di piu' fuori dall'immagine,
   sotto rientrava, e il rapporto col bordo cambiava di continuo.

   C'e' anche una ragione di bilancio: nella prima schermata si
   muovono il pallino dell'evento, il riflesso sulle parole in oro, la
   fascia che scorre, il conto alla rovescia e l'alone che vaga. Le
   targhette erano le uniche il cui movimento non diceva niente.

   Sul telefono non cambia nulla: li' erano gia' dentro il bordo, e
   restano dove sono — vedi telefono.css. */

.eroe__titolo {
  animation: entrata .9s ease both;
}

.eroe__citazione,
.eroe__corpo {
  animation: entrata 1.1s .15s ease both;
}

/* Quarantotto secondi e non piu' trentadue: una fascia che corre
   sembra pubblicita', e a quella velocita' una voce lunga come
   «Autorizzazione Banca d'Italia n. 5010251» attraversava lo schermo
   in meno del tempo che serve a leggerla. Si ferma comunque appena il
   puntatore la sfiora — vedi .fascia:hover in componenti.css. */
.fascia__pista {
  animation: scorrimento 48s linear infinite;
}

.pillola__punto {
  animation: pulsazione-punto 2.2s ease-in-out infinite;
}

.conto__unita {
  animation: pulsazione-scatola 3s ease-in-out infinite;
}

.conto__unita:nth-child(2) { animation-delay: .5s; }
.conto__unita:nth-child(3) { animation-delay: 1s; }
.conto__unita:nth-child(4) { animation-delay: 1.5s; }

.conto__data {
  animation: velatura 2.2s ease-in-out infinite;
}

.percorso__linea--viva {
  animation: linea-viva 10s linear infinite;
}

/* --- Gli anelli di sfondo --- */

.anello {
  position: absolute;
  border-radius: var(--raggio-cerchio);
  pointer-events: none;
  animation: giro 90s linear infinite;
}

.anello--esterno {
  top: -250px;
  right: -170px;
  width: 560px;
  height: 560px;
  border: 1px solid var(--bordo-su-chiaro-tenue);
  animation-duration: 120s;
}

.anello--interno {
  top: -160px;
  right: -120px;
  width: 520px;
  height: 520px;
  border: 1px dashed var(--bordo-su-chiaro);
}

/* --- I quattro nodi del percorso --- */
/* Ogni nodo si accende quando la linea lo raggiunge, e i ritardi non
   sono scelti a occhio: sono calcolati.

   La linea copre tutto il tratto fra il primo e il quarto nodo nel
   75% di un giro da dieci secondi, cioe' in 7,5 secondi, a velocita'
   costante. I nodi sono equidistanti, quindi il fronte arriva sul
   secondo a 2,5 secondi, sul terzo a 5, sul quarto a 7,5. Il nodo si
   accende al 6% del proprio giro, cioe' 0,6 secondi dopo il suo
   ritardo: da qui i quattro valori, arrivo meno 0,6. Il primo e'
   negativo perche' a tempo zero la linea e' gia' su di lui.

   Erano 0,1 / 1,1 / 3,1 / 5,2, i valori dell'export, che non avevano
   alcun rapporto con la velocita' della linea: il quarto nodo si
   accendeva 1,7 secondi prima di essere raggiunto.

   Se cambia la durata dell'animazione, o il 75% nel fotogramma di
   linea-viva, questi quattro numeri vanno rifatti. */

.passo__nodo {
  animation: nodo-acceso 10s ease-in-out infinite;
}

.passo:nth-child(1) .passo__nodo { animation-delay: -0.6s; }
.passo:nth-child(2) .passo__nodo { animation-delay: 1.9s; }
.passo:nth-child(3) .passo__nodo { animation-delay: 4.4s; }
.passo:nth-child(4) .passo__nodo { animation-delay: 6.9s; }

/* --- La stessa onda dentro il racconto di «chi siamo» --- */
/* Qui i quattro ritardi NON sono scritti: li calcola racconto.js con
   la stessa formula — arrivo dell'onda meno sei decimi — perche' i
   capitoli cadono dove li porta il testo e non a distanze uguali.
   L'icona dentro al cerchio eredita currentColor, quindi cambia tinta
   con lui: una sola animazione muove entrambi. */

.racconto[data-racconto-attivo]::after {
  animation: racconto-onda 10s linear infinite;
}

.racconto__nodo {
  animation: nodo-acceso 10s ease-in-out infinite;
}

/* --- Le nove gocce di Gold Rain --- */
/* Posizione, altezza, durata e ritardo erano nove attributi di stile
   diversi. Qui sono nove righe, e il disegno resta identico. */

.goccia {
  position: absolute;
  top: 0;
  width: 1px;
  color: var(--accento-tenue);
  background: var(--grad-divisore);
  pointer-events: none;
  animation: caduta 6s linear infinite;
}

.goccia:nth-child(1) { left:  8%; height: 70px; animation-duration: 6s;   animation-delay: 0s; }
.goccia:nth-child(2) { left: 18%; height: 50px; animation-duration: 8s;   animation-delay: 2.2s; color: var(--accento); }
.goccia:nth-child(3) { left: 28%; height: 90px; animation-duration: 5.2s; animation-delay: 1.1s; }
.goccia:nth-child(4) { left: 38%; height: 44px; animation-duration: 9s;   animation-delay: 3.6s; color: var(--testo-su-scuro-tenue); }
.goccia:nth-child(5) { left: 50%; height: 64px; animation-duration: 7s;   animation-delay: 0.6s; }
.goccia:nth-child(6) { left: 62%; height: 52px; animation-duration: 6.4s; animation-delay: 2.8s; color: var(--accento); }
.goccia:nth-child(7) { left: 72%; height: 80px; animation-duration: 5.6s; animation-delay: 1.8s; }
.goccia:nth-child(8) { left: 84%; height: 46px; animation-duration: 8.4s; animation-delay: 4.4s; color: var(--testo-su-scuro-tenue); }
.goccia:nth-child(9) { left: 93%; height: 66px; animation-duration: 7.4s; animation-delay: 3.1s; }

/* --- La lama di luce sulle card --- */
/* Resta sulle due card dei profili e non piu' sulla card del piano in
   evidenza. Li' erano tre animazioni continue sovrapposte — la lama
   obliqua, l'alone che respirava e il bordo che si accendeva ogni sei
   secondi — e la lama, partendo dal bordo sinistro della card,
   sembrava una fascia dorata che attraversava la sezione dal piano
   2.0 al 4.0. Le prime due davano anche un secondo effetto, meno
   visibile e piu' fastidioso: un'animazione su box-shadow vince
   sempre sulla stessa proprieta' dichiarata in :hover, quindi la card
   dorata era l'unica delle tre a non rispondere al passaggio del
   puntatore. Tolte tutte e tre, .piano:hover vale per tutte e tre le
   card. */

.profilo {
  position: relative;
  overflow: hidden;
}

.profilo::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: var(--z-sfondo);
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--grad-luccichio);
  opacity: 0;
  pointer-events: none;
  animation: lampo 6s ease-in-out infinite;
}


/* GLI ELEMENTI CHE SCOPRONO IL FIORE */
/* ------------------------------------------------ */
/* Nell'export erano quattro ascoltatori di mousemove che scrivevano
   transform e mask-image a ogni singolo evento, senza mai
   rimuoversi. Qui c'e' un ascoltatore solo, limitato a un fotogramma,
   che aggiorna due variabili: --mx e --my. Il resto lo fa il CSS.

   Le coppie sono due, e non condividono nulla oltre alla forma:
   quella in --segui insegue il puntatore, quella in --vagante
   rimbalza da sola sui bordi della sezione come un salvaschermo di
   una volta. Ognuna ha il proprio strato di fiore, cosi' ognuna
   scrive le proprie --mx e --my senza pestare i piedi all'altra:
   mask-composite, che permetterebbe due fori sulla stessa maschera,
   ha ancora due sintassi diverse fra i motori.

   Senza JavaScript le due variabili non esistono, i valori di riserva
   mettono l'alone al centro e la maschera fuori campo, e la pagina
   resta perfettamente leggibile. */

.alone {
  position: absolute;
  top: 0;
  left: 0;
  width: 640px;
  height: 640px;
  margin: -320px 0 0 -320px;
  border-radius: var(--raggio-cerchio);
  background: var(--alone);
  filter: blur(30px);
  pointer-events: none;
  transform: translate(var(--mx, 50%), var(--my, 40%));
  will-change: transform;
}

/* La rincorsa morbida vale solo per chi insegue: l'alone vagante
   riceve una posizione nuova a ogni fotogramma, e una transizione da
   nove decimi la trasformerebbe in un ritardo costante. */
.alone--segui {
  transition: transform .9s var(--curva-uscita);
}

.fiore {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(1150px, 92vw);
  aspect-ratio: 1;
  background: url("../media/fiore.svg") no-repeat center / contain;
  mix-blend-mode: multiply;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: opacity var(--durata-lenta) ease;
  -webkit-mask-image: radial-gradient(circle 300px at var(--mx, -9999px) var(--my, -9999px),
    rgb(0 0 0 / .75) 0%, rgb(0 0 0 / .32) 45%, rgb(0 0 0 / 0) 72%);
  mask-image: radial-gradient(circle 300px at var(--mx, -9999px) var(--my, -9999px),
    rgb(0 0 0 / .75) 0%, rgb(0 0 0 / .32) 45%, rgb(0 0 0 / 0) 72%);
}

/* Su fondo scuro la moltiplicazione annerirebbe il fiore. */
.contesto-scuro .fiore {
  mix-blend-mode: screen;
}

/* L'alone e' tarato sul fondo chiaro dell'eroe e della chiusura. Sul
   marrone del Perche' lo stesso chiarore ha molto piu' contrasto da
   attraversare e si legge come una macchia, non come una luce: qui
   scende a poco piu' di un terzo. E' l'unica sezione scura che ne ha
   uno — nelle altre due il fiore non c'e' proprio. */
.perche .alone {
  opacity: .35;
}

/* Nell'eroe il fiore e' piu' grande della sezione, di proposito: deve
   esserci dovunque passi l'alone, non solo dietro al testo. Quel
   che esce dai bordi lo taglia la sezione, e lo strato che lo
   contiene lo sfuma sopra e sotto. */
.eroe__pattern .fiore {
  width: min(1500px, 120vw);
}

/* Il fiore del puntatore compare quando il puntatore c'e'. Quello del
   vagante lo accende alone.js appena la sezione entra in vista: non
   basta una regola statica, perche' senza JavaScript la maschera
   resterebbe a -9999px e il fiore sarebbe acceso ma invisibile — e
   un mix-blend-mode acceso a vuoto e' comunque un livello da
   comporre a ogni fotogramma. */
[data-alone-attivo] .fiore--segui,
[data-alone-vagante] .fiore--vagante {
  opacity: 1;
}


/* MOVIMENTO RIDOTTO */
/* ------------------------------------------------ */
/* Chi ha chiesto al proprio sistema di ridurre le animazioni ha una
   ragione per farlo, e spesso e' una ragione medica. Qui si spegne
   tutto cio' che si muove da solo, e restano le sole transizioni al
   passaggio del puntatore, accorciate. */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  /* La linea del percorso resta disegnata invece che sparire. */
  .percorso__linea--viva {
    width: var(--percorso-tratto);
    opacity: 1;
  }

  /* La fascia si ferma e mostra la prima copia. */
  .fascia__pista {
    transform: none;
  }

  /* Le gocce non cadono: non si vedono affatto. */
  .goldrain__pioggia {
    display: none;
  }

  /* alone.js non parte affatto, quindi l'alone vagante resterebbe
     fermo nella sua posizione di riserva: un secondo chiarore immobile
     accanto al primo, senza la ragione che lo giustifica. Resta solo
     quello del puntatore, che fermo ha sempre avuto senso. */
  .alone--vagante {
    display: none;
  }

  /* Gli elementi che entrano dal basso partono gia' a posto. */
  .eroe__titolo,
  .eroe__citazione,
  .eroe__corpo {
    opacity: 1;
    transform: none;
  }
}