/* ====================================================================
   LA SCENA - versione 4: le luci e l'interfaccia sono INCOLLATE
   alla fotografia
   Banco di prova. Non fa parte del sito.

   COSA E' CAMBIATO DALLA PRIMA. Prima le luci erano DENTRO le
   immagini: due strisce LED fotografate, ferme, che non potevano fare
   niente. Adesso sono strati di luce in CSS sopra la fotografia, con i
   colori della palette: possono respirare, salire di intensita' con la
   barra di generazione, esplodere e inondare lo schermo.
   Ed e' stato aggiunto il colpo che mancava: il LAMPO nel momento in
   cui si entra nel monitor.

   La linea del tempo di tutto e' lo scorrimento, non l'orologio
   (animation-timeline). Zero JavaScript: la CSP non si tocca.

   I TEMPI, in percentuale della corsa:
      0 - 10   la scrivania. I LED respirano piano, il cursore batte.
     10 - 24   la barra si riempie. I LED salgono, il bagliore dello
               schermo cresce, una lama di luce attraversa la scena.
     24 - 32   il guasto: i canali si separano, l'interfaccia si
               sfascia, i pezzi volano via.
     32 - 42   si precipita dentro lo schermo, accelerando.
     40 - 46   IL LAMPO. Bianco, poi turchese. E' il taglio.
     44 - 62   il volo dentro la rete, con le scie di velocita'.
     60 - 70   l'inondazione: turchese e viola invadono tutto e si
               ritirano lasciando la rete.
     68 -100   la rete si assesta, il titolo arriva riga per riga, i
               dati entrano da destra.

   SENZA scroll-driven animations, o con meno movimento chiesto dal
   telefono: non parte niente e si vede lo stato FINALE, cioe' la rete
   col titolo e i dati. Non una pagina rotta: la stessa pagina, ferma.
   ================================================================= */

:root{
  --fondo:#08080A;
  --testo:#F4F4F6;
  --soft:#A9A9B4;
  --tenue:#6C6C78;
  --teal:#31E0C0;
  --teal-rgb:49,224,192;
  --violet:#8B5CF6;
  --violet-rgb:139,92,246;
  --linea:rgba(255,255,255,.10);
  --m:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --s:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}

*{box-sizing:border-box}
html{background:var(--fondo)}
body{margin:0; background:var(--fondo); color:var(--testo);
  font-family:var(--s); overflow-x:clip}

/* ---------- la corsa ---------- */
.palco{
  position:relative;
  height:640vh; height:640lvh;
  view-timeline-name:--corsa;
  view-timeline-axis:block;
}
.fisso{
  position:sticky; top:0;
  height:100vh; height:100lvh;
  overflow:hidden;
  background:var(--fondo);
  isolation:isolate;          /* le fusioni restano dentro la scena */
}

/* Tutto cio' che ha una classe che comincia per a- si muove sulla
   stessa linea del tempo e nella stessa finestra: i tempi stanno nei
   fotogrammi chiave, non qui. Una regola sola, e non ci si perde. */
.fisso [class*="a-"]{
  animation-timeline:--corsa;
  animation-range:entry 100% exit 0%;
  animation-fill-mode:both;
  animation-timing-function:linear;
}

/* ---------- gli strati fotografici ---------- */
.strato{
  position:absolute; inset:0;
  background-size:cover; background-position:50% 50%;
}
.scrivania{
  opacity:0; background:none;
  display:grid; place-items:center; overflow:hidden;
}

/* IL QUADRO. La fotografia sta SEMPRE intera: lei, il monitor e le due
   strisce sono la composizione, tagliarne meta' non ha senso. Quindi
   niente "cover" - si incastra per larghezza e, se la finestra e' piu'
   alta, sopra e sotto resta nero. Che e' gia' il colore della scena,
   quindi non si vede.
   Serve anche a un'altra cosa: dentro il quadro ci stanno le luci e
   l'interfaccia, e le loro percentuali devono essere percentuali DELLA
   FOTOGRAFIA. Altrimenti a ogni schermo diverso si scollano. */
.quadro{
  position:relative;
  width:min(100%, calc(100lvh * 2752 / 1536));
  aspect-ratio:2752 / 1536;
  container-type:inline-size;
  --spinta:3.4;                 /* quanto si entra nel monitor */
}

/* IN VERTICALE. Su un telefono 9:19,5 una fotografia 16:9 intera resta
   un francobollo in mezzo a due bandoni neri: la scena non arriva.
   Quindi ci si avvicina: la foto si allarga fino a portare il monitor
   da un bordo all'altro, e quello che avanza ai lati - le due strisce -
   esce dall'inquadratura. Sotto si rimettono al loro posto, appoggiate
   ai bordi dello schermo: la palette resta, e sembra che la stanza
   continui fuori dal telefono. */
@media (max-aspect-ratio: 1/1){
  .quadro{ width:max(100%, calc(62lvh * 2752 / 1536)) }
  .quadro .led{ display:none }
}

/* le strisce sganciate: stanno ai bordi della finestra, non della
   fotografia, quindi non se ne vanno mentre ci si avvicina */
.led-fuori{ position:absolute; inset:0; pointer-events:none; display:none }
.led-fsx, .led-fdx{ top:24%; height:34% }
.led-fsx{
  left:0; width:16%;
  background:
    radial-gradient(60% 50% at 55% 50%, rgba(var(--teal-rgb),.5), transparent 74%),
    linear-gradient(90deg, rgba(var(--teal-rgb),.35) 12%, rgba(var(--teal-rgb),.95) 28%, transparent 52%);
}
.led-fdx{
  right:0; width:16%;
  background:
    radial-gradient(60% 50% at 45% 50%, rgba(var(--violet-rgb),.5), transparent 74%),
    linear-gradient(270deg, rgba(var(--violet-rgb),.35) 12%, rgba(var(--violet-rgb),.95) 28%, transparent 52%);
}
/* e questa DOPO la regola generale, se no se la mangia lei */
@media (max-aspect-ratio: 1/1){
  .led-fuori{ display:block }
}
.foto{ display:block; width:100%; height:100% }
.volo{ background-image:url(/foto/volo.jpg); opacity:0 }
.rete{ background-image:url(/foto/rete.jpg); opacity:1 }

/* ---------- LE LUCI, che non stanno piu' nella fotografia --------
   Due sorgenti alle stesse coordinate delle strisce LED del monitor:
   turchese a sinistra, viola a destra. In fusione per schiarimento,
   quindi il nero della foto non si sporca: si accende soltanto. */
.led{
  position:absolute; top:1.2%; height:55%;
  mix-blend-mode:screen; pointer-events:none;
  opacity:0; filter:blur(2px);
}
.led-sx{
  left:3%; width:12%;
  background:
    radial-gradient(46% 52% at 50% 50%, rgba(var(--teal-rgb),.5), transparent 72%),
    linear-gradient(90deg, transparent 44%, rgba(var(--teal-rgb),.95) 50%, transparent 56%);
}
.led-dx{
  left:85%; width:12%;
  background:
    radial-gradient(46% 52% at 50% 50%, rgba(var(--violet-rgb),.5), transparent 72%),
    linear-gradient(90deg, transparent 44%, rgba(var(--violet-rgb),.95) 50%, transparent 56%);
}

/* il bagliore che esce dallo schermo mentre genera */
.bagliore{
  position:absolute; left:57%; top:44.25%;
  width:48%; aspect-ratio:1.3; transform:translate(-50%,-50%) scale(.4);
  border-radius:50%;
  background:radial-gradient(closest-side,
    rgba(var(--teal-rgb),.55), rgba(var(--violet-rgb),.28) 45%, transparent 72%);
  mix-blend-mode:screen; pointer-events:none; opacity:0; filter:blur(14px);
}

/* la lama di luce che attraversa la scena mentre si genera */
.lama{
  position:absolute; inset:0; pointer-events:none; opacity:0;
  mix-blend-mode:screen;
  background:linear-gradient(100deg,
    transparent 46%,
    rgba(var(--teal-rgb),.10) 48%,
    rgba(255,255,255,.85) 50%,
    rgba(var(--violet-rgb),.10) 52%,
    transparent 54%);
  background-size:300% 100%;
}

/* IL LAMPO: bianco al centro, turchese ai bordi. Il taglio. */
.lampo{
  position:absolute; inset:0; pointer-events:none; opacity:0;
  background:radial-gradient(60% 60% at 50% 60%,
    #FFFFFF 0%, rgba(var(--teal-rgb),.9) 32%, rgba(var(--violet-rgb),.5) 62%, transparent 80%);
  mix-blend-mode:screen;
}

/* L'INONDAZIONE: la palette invade tutto e si ritira */
.onda{
  position:absolute; inset:0; pointer-events:none; opacity:0;
  background:linear-gradient(120deg,
    rgba(var(--teal-rgb),.85) 0%,
    rgba(var(--violet-rgb),.85) 100%);
  mix-blend-mode:screen;
}

/* le scie della velocita', durante il volo */
.velocita{
  position:absolute; left:50%; top:50%; width:180%; aspect-ratio:1;
  transform:translate(-50%,-50%) scale(.2);
  pointer-events:none; opacity:0; mix-blend-mode:screen;
  background:repeating-conic-gradient(from 0deg at 50% 50%,
    transparent 0deg 2.2deg,
    rgba(var(--teal-rgb),.55) 2.2deg 2.6deg,
    transparent 2.6deg 5deg,
    rgba(var(--violet-rgb),.4) 5deg 5.3deg,
    transparent 5.3deg 9deg);
  -webkit-mask-image:radial-gradient(closest-side, transparent 12%, #000 34%, #000 70%, transparent 92%);
  mask-image:radial-gradient(closest-side, transparent 12%, #000 34%, #000 70%, transparent 92%);
  filter:blur(.6px);
}

/* la tinta della palette, sempre accesa un filo: e' quella che tiene
   insieme le tre fotografie, che nascono da tre generazioni diverse */
.tinta{
  position:absolute; inset:0; pointer-events:none;
  mix-blend-mode:soft-light; opacity:.55;
  background:linear-gradient(115deg,
    rgba(var(--teal-rgb),.55), transparent 42%, rgba(var(--violet-rgb),.6));
}
.vignetta{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 100% at 50% 45%, transparent 44%, rgba(0,0,0,.72) 100%);
}

/* ---------- l'interfaccia sul monitor ----------
   La fotografia ha gia' il codice e il pannello chat accesi: qui sopra
   ci va soltanto la parte VIVA, cioe' le righe che compaiono una alla
   volta, il cursore che batte e la barra che genera. Sta esattamente
   sopra il pannello laterale destro del monitor - misurato sul file -
   quindi non copre i capelli e sembra parte dello schermo.
   Le misure sono in cqw: 1cqw = 1% della larghezza della fotografia,
   cosi' il testo resta in proporzione al monitor su qualsiasi schermo. */
.schermo{
  position:absolute;
  left:56.4%; top:23.6%; width:14.8%; height:38%;
  display:flex; flex-direction:column; gap:.8cqw;
  font-family:var(--m);
  font-size:.55cqw; line-height:1.45;
  color:var(--soft);
  opacity:0;
}
.riga-chat{
  background:rgba(10,12,20,.72); border-radius:.5cqw;
  padding:.5cqw .6cqw;
  border:1px solid rgba(var(--teal-rgb),.22);
  box-shadow:0 0 1.4cqw rgba(var(--teal-rgb),.18);
}
.chi{
  display:block; color:var(--violet); font-weight:700;
  font-size:.5cqw; letter-spacing:.14em; text-transform:uppercase;
  margin-bottom:.18cqw;
}
.cursore{
  display:inline-block; width:.34cqw; height:.7cqw; margin-left:.14cqw;
  background:var(--teal); vertical-align:-.06cqw;
  box-shadow:0 0 .5cqw rgba(var(--teal-rgb),.95);
  animation:batte 1.1s steps(1,end) infinite;
}
@keyframes batte{0%,49%{opacity:1}50%,100%{opacity:.05}}

/* la barra di generazione, sul bordo basso del monitor */
.barra{
  position:absolute; left:43.4%; top:63.4%; width:27%; height:.34%;
  border-radius:1cqw; opacity:0;
  background:rgba(255,255,255,.14); overflow:hidden;
}
.barra i{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--violet),var(--teal));
  box-shadow:0 0 1cqw rgba(var(--teal-rgb),.95);
}

/* ---------- il titolo e i dati ---------- */
.testo{
  position:absolute; left:6vw; right:6vw; top:50%;
  transform:translateY(-50%);
}
/* La misura va sul TITOLO e non sul contenitore: ch e' la larghezza
   dello zero del carattere CORRENTE, e sul contenitore il carattere
   corrente e' quello del corpo. 15ch diventavano 144 pixel e il
   titolo andava a capo a ogni parola. */
.titolo{
  margin:0; max-width:14ch;
  font-family:var(--m); font-weight:700;
  font-size:clamp(26px,5.2vw,58px); line-height:1.1;
  letter-spacing:-.03em;
  text-shadow:0 2px 40px rgba(8,8,10,.95), 0 0 30px rgba(8,8,10,.8);
}
.titolo span{display:block}
.titolo em{
  font-style:normal; color:var(--teal);
  text-shadow:0 0 22px rgba(var(--teal-rgb),.55), 0 2px 40px rgba(8,8,10,.95);
}

.dati{
  position:absolute; right:5vw; bottom:8vh;
  display:grid; gap:8px; text-align:right;
}
.dato{
  border:1px solid rgba(var(--teal-rgb),.28); border-radius:10px;
  padding:8px 14px; background:rgba(8,8,10,.55);
  backdrop-filter:blur(8px);
  box-shadow:0 0 26px rgba(var(--teal-rgb),.10) inset;
}
.dato b{
  display:block; font-family:var(--m); font-weight:700;
  font-size:clamp(15px,2.4vw,24px); color:var(--teal);
  letter-spacing:-.02em; text-shadow:0 0 14px rgba(var(--teal-rgb),.6);
}
.dato i{
  font-style:normal; font-family:var(--m); font-size:9px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--tenue);
}

/* ================================================================
   I TEMPI
   ================================================================ */

/* --- la stanza compare, e IL QUADRO entra nel monitor ---
   Due cose separate apposta: la luminosita' sta sulla stanza, la corsa
   sta sul quadro. Cosi' l'origine dell'ingrandimento e' il centro del
   monitor MISURATO SULLA FOTO (49,75% - 45,65%) e non un punto della
   finestra che cambia a ogni telefono. */
.a-scrivania{ animation-name:stanza }
@keyframes stanza{
  0%   { opacity:1; filter:brightness(.78) }
  22%  { opacity:1; filter:brightness(1) }
  40%  { opacity:1; filter:brightness(1.12) }
  52%  { opacity:1; filter:brightness(1.45) }
  58%  { opacity:0; filter:brightness(2.2) }
  100% { opacity:0 }
}

.a-quadro{ animation-name:quadro; transform-origin:57% 44.25% }
@keyframes quadro{
  0%   { transform:scale(1.03) }
  10%  { transform:scale(1.02) }
  40%  { transform:scale(1.16) }
  52%  { transform:scale(var(--spinta)) }
  58%  { transform:scale(calc(var(--spinta) * 1.75)) }
  100% { transform:scale(calc(var(--spinta) * 1.75)) }
}

/* --- i LED: respirano, poi salgono, poi esplodono --- */
.a-led{ animation-name:led }
@keyframes led{
  0%   { opacity:.28 }
  14%  { opacity:.42 }
  20%  { opacity:.85 }
  /* LO SFARFALLIO: i colpi stanno mezzo punto l'uno dall'altro, cosi'
     la rampa fra un fotogramma e l'altro e' troppo corta per vedersi
     e resta lo scatto. */
  23%  { opacity:.85 }
  23.5%{ opacity:.08 }
  24%  { opacity:1 }
  24.5%{ opacity:.12 }
  25%  { opacity:.95 }
  26%  { opacity:.2 }
  26.5%{ opacity:1 }
  27.5%{ opacity:.35 }
  28%  { opacity:1 }
  44%  { opacity:1 }
  52%  { opacity:1 }
  58%  { opacity:0 }
  100% { opacity:0 }
}
/* respiro lento sopra l'intensita' guidata dallo scorrimento */
.led{ animation-name:led, respiraLed }
@keyframes respiraLed{
  0%,100%{ filter:blur(2px) brightness(1) }
  50%    { filter:blur(3px) brightness(1.35) }
}
.led{ animation-duration:auto, 3.4s }
.led{ animation-iteration-count:1, infinite }
.led{ animation-timing-function:linear, ease-in-out }

/* --- il bagliore dello schermo --- */
.a-bagliore{ animation-name:bagliore }
@keyframes bagliore{
  0%,18%{ opacity:0;  transform:translate(-50%,-50%) scale(.3) }
  28%  { opacity:.35; transform:translate(-50%,-50%) scale(.55) }
  42%  { opacity:.8;  transform:translate(-50%,-50%) scale(1) }
  52%  { opacity:1;   transform:translate(-50%,-50%) scale(2.4) }
  58%  { opacity:0;   transform:translate(-50%,-50%) scale(3.2) }
  100% { opacity:0 }
}

/* --- la lama di luce che attraversa mentre si genera --- */
.a-lama{ animation-name:lama }
@keyframes lama{
  0%,29%{ opacity:0;  background-position:-60% 0 }
  32%  { opacity:.9 }
  42%  { opacity:.9; background-position:160% 0 }
  45%  { opacity:0;  background-position:160% 0 }
  100% { opacity:0 }
}

/* --- il guasto: i canali si separano --- */
.a-guasto{ animation-name:guasto }
@keyframes guasto{
  0%,42%{ filter:none; transform:none }
  44%   { filter:drop-shadow(6px 0 rgba(var(--violet-rgb),.9)) drop-shadow(-6px 0 rgba(var(--teal-rgb),.9));
          transform:translate3d(-7px,0,0) skewX(-1.2deg) }
  46%   { filter:none; transform:translate3d(5px,0,0) }
  48%   { filter:drop-shadow(-9px 0 rgba(var(--violet-rgb),.9)) drop-shadow(9px 0 rgba(var(--teal-rgb),.9));
          transform:translate3d(4px,0,0) skewX(1deg) }
  50%   { filter:none; transform:none }
  100%  { filter:none; transform:none }
}

/* --- l'interfaccia: compare, scrive, si sfascia ---
   Niente scala qui dentro: la scala arriva dal quadro, che se la porta
   dietro. Una proprieta' sola per elemento, e non si litiga. */
.a-schermo{ animation-name:schermoOpaco }
@keyframes schermoOpaco{
  0%,26%{ opacity:0 }
  33%  { opacity:1 }
  46%  { opacity:1 }
  56%  { opacity:0 }
  100% { opacity:0 }
}

.a-barra{ animation-name:carica }
@keyframes carica{
  0%,34%{ width:0% }
  44%  { width:100% }
  100% { width:100% }
}

.a-p1{ animation-name:pezzo1 }
.a-p2{ animation-name:pezzo2 }
.a-p3{ animation-name:pezzo3 }
@keyframes pezzo1{
  0%,43%{ transform:none; opacity:1; filter:none }
  50%   { transform:translate(-170%,-120%) rotate(-16deg); opacity:0; filter:blur(7px) }
  100%  { transform:translate(-170%,-120%) rotate(-16deg); opacity:0 }
}
@keyframes pezzo2{
  0%,44%{ transform:none; opacity:1; filter:none }
  51%   { transform:translate(190%,50%) rotate(13deg); opacity:0; filter:blur(7px) }
  100%  { transform:translate(190%,50%) rotate(13deg); opacity:0 }
}
@keyframes pezzo3{
  0%,45%{ transform:none; opacity:1; filter:none }
  52%   { transform:translate(-70%,210%) rotate(9deg); opacity:0; filter:blur(7px) }
  100%  { transform:translate(-70%,210%) rotate(9deg); opacity:0 }
}

/* --- IL LAMPO --- */
.a-lampo{ animation-name:lampo }
@keyframes lampo{
  0%,51%{ opacity:0; transform:scale(.6) }
  55%   { opacity:1; transform:scale(1.1) }
  57%   { opacity:.55; transform:scale(1.5) }
  62%   { opacity:0; transform:scale(2) }
  100%  { opacity:0 }
}

/* --- il volo, e le scie --- */
.a-volo{ animation-name:volo; transform-origin:50% 50% }
@keyframes volo{
  0%,54%{ opacity:0; transform:scale(2.1); filter:brightness(1.6) }
  59%   { opacity:1; transform:scale(1.5); filter:brightness(1.2) }
  72%   { opacity:1; transform:scale(1.04); filter:brightness(1) }
  79%   { opacity:0; transform:scale(1) }
  100%  { opacity:0 }
}
.a-velocita{ animation-name:velocita; transform-origin:50% 50% }
@keyframes velocita{
  0%,53%{ opacity:0; transform:translate(-50%,-50%) scale(.15) rotate(0deg) }
  59%   { opacity:.9; transform:translate(-50%,-50%) scale(1) rotate(6deg) }
  70%   { opacity:.4; transform:translate(-50%,-50%) scale(2.6) rotate(14deg) }
  78%   { opacity:0; transform:translate(-50%,-50%) scale(3.4) rotate(18deg) }
  100%  { opacity:0 }
}

/* --- L'INONDAZIONE --- */
.a-onda{ animation-name:onda }
@keyframes onda{
  0%,68%{ opacity:0 }
  73%   { opacity:.8 }
  79%   { opacity:.3 }
  85%   { opacity:0 }
  100%  { opacity:0 }
}

/* --- la rete si assesta --- */
.a-rete{ animation-name:rete; transform-origin:50% 50% }
@keyframes rete{
  0%,70%{ opacity:0; transform:scale(1.5); filter:saturate(1.6) brightness(1.4) }
  80%   { opacity:1; transform:scale(1.12); filter:saturate(1.25) brightness(1.1) }
  100%  { opacity:1; transform:scale(1); filter:saturate(1.05) brightness(.9) }
}

/* --- il titolo, riga per riga --- */
.a-t1{ animation-name:riga1 }
.a-t2{ animation-name:riga2 }
.a-t3{ animation-name:riga3 }
@keyframes riga1{
  0%,78%{ opacity:0; transform:translateY(30px); filter:blur(8px) }
  84%,100%{ opacity:1; transform:none; filter:none }
}
@keyframes riga2{
  0%,81%{ opacity:0; transform:translateY(30px); filter:blur(8px) }
  87%,100%{ opacity:1; transform:none; filter:none }
}
@keyframes riga3{
  0%,84%{ opacity:0; transform:translateY(30px); filter:blur(8px) }
  90%,100%{ opacity:1; transform:none; filter:none }
}

/* --- i dati, da destra --- */
.a-d1{ animation-name:dato1 }
.a-d2{ animation-name:dato2 }
.a-d3{ animation-name:dato3 }
@keyframes dato1{
  0%,85%{ opacity:0; transform:translateX(46px) }
  92%,100%{ opacity:1; transform:none }
}
@keyframes dato2{
  0%,88%{ opacity:0; transform:translateX(46px) }
  95%,100%{ opacity:1; transform:none }
}
@keyframes dato3{
  0%,91%{ opacity:0; transform:translateX(46px) }
  98%,100%{ opacity:1; transform:none }
}

/* ---------- il ripiego ----------
   Niente si muove: resta lo stato finale, che e' quello scritto nelle
   regole normali. La rete, il titolo, i dati. */
@media (prefers-reduced-motion: reduce){
  .fisso [class*="a-"]{ animation:none !important }
  .cursore,.led{ animation:none }
  .scrivania,.volo,.schermo,.led,.bagliore,.lama,.lampo,.onda,.velocita{ opacity:0 }
  .rete{ opacity:1 }
  .titolo span,.dato{ opacity:1; transform:none; filter:none }
  .barra i{ width:100% }
}

/* ---------- contorno ---------- */
.quale{
  position:fixed; left:16px; bottom:14px; z-index:9;
  font-family:var(--m); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--tenue);
  background:rgba(8,8,10,.82); border:1px solid var(--linea);
  border-radius:999px; padding:6px 12px;
}
.scorri{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  font-family:var(--m); font-size:10px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--tenue);
  animation:respira 2.4s ease-in-out infinite;
}
@keyframes respira{0%,100%{opacity:.3}50%{opacity:.9}}
.dopo{
  padding:60px 6vw 100px; max-width:60ch; margin:0 auto;
  color:var(--soft); line-height:1.65;
}
.dopo h2{font-family:var(--m); font-size:18px; color:var(--testo); margin:0 0 12px}
.dopo a{color:var(--teal)}

/* ================================================================
   VERSIONE 3 - si parte da lei, e si finisce sulla mappa
   ================================================================ */

/* --- LA CITAZIONE ---------------------------------------------
   E' la prima cosa che si vede, e non aspetta lo scorrimento: si
   scrive da sola appena la pagina apre. Percio' ha DUE linee del
   tempo diverse nella stessa dichiarazione - l'orologio per scriversi,
   il dito per andarsene - ed e' per questo che animation-timeline qui
   e' una lista di due valori.
   Il guasto, il cursore e il carattere sono quelli della home: la
   frase deve essere riconoscibile come la stessa. */
.citazione{
  position:absolute; left:5vw; bottom:9vh;
  width:min(34vw,400px);
  font-family:var(--m); font-weight:700; letter-spacing:-.025em;
  font-size:clamp(18px,2vw,28px); line-height:1.24;
  z-index:4;
  text-shadow:0 2px 40px rgba(8,8,10,.98), 0 0 18px rgba(8,8,10,.9);
  animation:guastoFrase 7s steps(1,end) 1.1s infinite;
}
.citazione .riga{ display:block; overflow:hidden }
.citazione .due{ color:var(--soft); font-weight:500; margin-top:.55em;
  font-size:.8em; line-height:1.3 }

/* si scrivono: una fetta che avanza, a scatti, come una macchina */
.citazione .riga{
  animation-name:scriveRiga, esceFrase;
  animation-duration:1s, auto;
  animation-timing-function:steps(24,end), linear;
  animation-timeline:auto, --corsa;
  animation-range:normal, entry 100% exit 0%;
  animation-fill-mode:both, both;
  animation-delay:.25s, 0s;
}
.citazione .due{ animation-delay:1.15s, 0s }
@keyframes scriveRiga{
  from{ clip-path:inset(0 100% 0 0) }
  to  { clip-path:inset(0 0 0 0) }
}
@keyframes esceFrase{
  0%,14%{ opacity:1; transform:none; filter:none }
  22%   { opacity:0; transform:translateY(-26px); filter:blur(8px) }
  100%  { opacity:0 }
}
.cursore-frase{
  display:inline-block; width:.5em; height:.86em; margin-left:.12em;
  background:var(--teal); vertical-align:-.08em;
  box-shadow:0 0 10px rgba(var(--teal-rgb),.9);
  animation:batte 1.05s steps(2) 2.1s infinite both;
}
/* lo stesso guasto della home: due scatti brevi, poi piu' niente
   per un pezzo. Uno solo e' un segno, ripetuto e' un fastidio. */
@keyframes guastoFrase{
  0%   {transform:translate(0,0); text-shadow:none; clip-path:none}
  1.4% {transform:translate(-9px,0) skewX(-1.4deg);
        text-shadow:7px 0 var(--teal), -7px 0 var(--violet);
        clip-path:inset(6% 0 62% 0)}
  2.6% {transform:translate(11px,0) skewX(1deg);
        text-shadow:-6px 0 var(--teal), 6px 0 var(--violet);
        clip-path:inset(48% 0 18% 0)}
  3.6% {transform:translate(-4px,0);
        text-shadow:4px 0 var(--violet), -4px 0 var(--teal);
        clip-path:inset(22% 0 40% 0)}
  4.6% {transform:translate(0,0); text-shadow:none; clip-path:none}
  46%  {transform:translate(0,0); text-shadow:none; clip-path:none}
  47.2%{transform:translate(8px,0) skewX(1.6deg);
        text-shadow:-8px 0 var(--violet), 8px 0 var(--teal);
        clip-path:inset(70% 0 6% 0)}
  48.4%{transform:translate(0,0); text-shadow:none; clip-path:none}
  100% {transform:translate(0,0); text-shadow:none; clip-path:none}
}
@media (max-aspect-ratio: 1/1){
  .citazione{
    left:6vw; right:6vw; width:auto; top:3.5vh; bottom:auto;
    font-size:clamp(18px,5vw,28px);
    animation:none;
  }
}

/* --- IL VELO: la scena parte abbassata, poi si accende --- */
.velo{
  position:absolute; inset:0; pointer-events:none;
  background:rgba(4,4,7,.34);
}
.a-velo{ animation-name:velo }
@keyframes velo{
  0%,10%{ opacity:1 }
  22%   { opacity:0 }
  100%  { opacity:0 }
}

/* --- LA MAPPA: le sezioni come nodi della rete --- */
.mappa{
  position:absolute; inset:0; pointer-events:none;
}
.mappa svg{
  position:absolute; inset:0; width:100%; height:100%;
  overflow:visible;
}
.filo{
  /* queste due si ereditano, e servono al disegno progressivo */
  stroke-dasharray:1; stroke-dashoffset:1;
}
/* Queste invece NON si ereditano: vanno sui path, non sul gruppo.
   vector-effect e' quella che conta: il viewBox 100x100 e' stirato su
   tutto lo schermo, e senza di lei la stessa linea viene un capello in
   un verso e una trave nell'altro. */
.filo path{
  vector-effect:non-scaling-stroke;
  stroke:rgba(170,255,238,.92); stroke-width:2.4; fill:none;
  stroke-linecap:round;
  filter:drop-shadow(0 0 7px rgba(49,224,192,.95))
         drop-shadow(0 0 18px rgba(49,224,192,.5));
}
/* i collegamenti non compaiono: si DISEGNANO, uno dopo l'altro,
   come se la rete stesse tirando i fili fra una sezione e l'altra */
.a-filo{ animation-name:filo }
@keyframes filo{
  0%,74%{ opacity:0; stroke-dashoffset:1 }
  77%   { opacity:1; stroke-dashoffset:1 }
  92%,100%{ opacity:1; stroke-dashoffset:0 }
}

.nodo{
  position:absolute; transform:translate(-50%,-50%);
  pointer-events:auto; text-decoration:none;
  display:grid; justify-items:center; gap:7px;
}
.nodo b{
  width:15px; height:15px; border-radius:50%;
  background:var(--teal);
  box-shadow:0 0 0 5px rgba(49,224,192,.14), 0 0 22px rgba(49,224,192,.9);
  animation:pulsaNodo 2.6s ease-in-out infinite;
}
.nodo span{
  font-family:var(--m); font-size:clamp(10px,1.35vw,15px); font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--testo);
  text-shadow:0 2px 14px rgba(8,8,10,.95);
  white-space:nowrap;
}
.nodo.viola b{
  background:var(--violet);
  box-shadow:0 0 0 5px rgba(139,92,246,.14), 0 0 22px rgba(139,92,246,.9);
}
@keyframes pulsaNodo{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}

.a-n1{ animation-name:nodo1 }
.a-n2{ animation-name:nodo2 }
.a-n3{ animation-name:nodo3 }
.a-n4{ animation-name:nodo4 }
.a-n5{ animation-name:nodo5 }
@keyframes nodo1{0%,80%{opacity:0;transform:translate(-50%,-50%) scale(.4)}87%,100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes nodo2{0%,83%{opacity:0;transform:translate(-50%,-50%) scale(.4)}90%,100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes nodo3{0%,86%{opacity:0;transform:translate(-50%,-50%) scale(.4)}93%,100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes nodo4{0%,89%{opacity:0;transform:translate(-50%,-50%) scale(.4)}96%,100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes nodo5{0%,92%{opacity:0;transform:translate(-50%,-50%) scale(.4)}99%,100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}

@media (prefers-reduced-motion: reduce){
  .nodo b{animation:none}
  .citazione span{opacity:0}
  .nodo,.filo{opacity:1; transform:translate(-50%,-50%)}
}

/* le posizioni dei cinque nodi sulla mappa */
.a-n1{ left:22%; top:26% }
.a-n2{ left:78%; top:30% }
.a-n3{ left:16%; top:68% }
.a-n4{ left:84%; top:66% }
.a-n5{ left:50%; top:84% }

/* ---------------------------------------------------------------
   DUE ANIMAZIONI SULLO STESSO ELEMENTO.
   Su un elemento solo, due regole che dicono animation-name NON si
   sommano: la seconda cancella la prima. E anche scrivendole insieme,
   se toccano la STESSA proprieta' vince l'ultima della lista - percio'
   il guasto, che muove transform, avrebbe azzerato l'ingrandimento.
   Soluzione: il guasto sta su elementi che non ingrandiscono (la
   fotografia dentro il quadro e l'interfaccia), e dove convivono due
   animazioni queste toccano proprieta' diverse.
   --------------------------------------------------------------- */
.a-schermo.a-guasto{ animation-name:schermoOpaco, guasto }

/* --- il ripiego, aggiornato alla nuova impalcatura --- */
@media (prefers-reduced-motion: reduce){
  .quadro,.foto{ transform:none !important }
  .barra{ opacity:0 }
}

/* ================================================================
   L'ANTEPRIMA SUL NODO
   Passandoci sopra - col mouse o col dito - il nodo si apre: una
   raggiera che esplode e una scheda con dentro cosa c'e' in quella
   sezione. Serve a far capire dove si va PRIMA di andarci.
   Tutto in CSS: :hover e :focus-visible, niente script.
   ================================================================ */
.nodo{ isolation:isolate }

/* la raggiera che esplode dal punto */
.nodo::after{
  content:""; position:absolute; left:50%; top:0;
  width:120px; aspect-ratio:1; margin:-53px 0 0 -60px;
  border-radius:50%; pointer-events:none; z-index:-1;
  background:repeating-conic-gradient(from 0deg at 50% 50%,
    rgba(var(--teal-rgb),.85) 0deg 1.6deg, transparent 1.6deg 9deg);
  -webkit-mask-image:radial-gradient(closest-side, transparent 22%, #000 44%, transparent 78%);
  mask-image:radial-gradient(closest-side, transparent 22%, #000 44%, transparent 78%);
  opacity:0; transform:scale(.3) rotate(0deg);
  transition:opacity .25s ease, transform .55s cubic-bezier(.16,1,.3,1);
}
.nodo.viola::after{
  background:repeating-conic-gradient(from 0deg at 50% 50%,
    rgba(var(--violet-rgb),.85) 0deg 1.6deg, transparent 1.6deg 9deg);
}
.nodo:hover::after,.nodo:focus-visible::after{
  opacity:.9; transform:scale(1) rotate(24deg);
}

/* la scheda */
.anteprima{
  position:absolute; left:50%; top:calc(100% + 12px);
  width:max-content; max-width:min(52vw,250px);
  font-style:normal; font-family:var(--s); font-weight:600;
  font-size:clamp(11px,1.05vw,13px); line-height:1.35;
  letter-spacing:0; text-transform:none; color:var(--testo);
  text-align:center; white-space:normal;
  background:rgba(8,8,10,.88); backdrop-filter:blur(10px);
  border:1px solid rgba(var(--teal-rgb),.38); border-radius:12px;
  padding:10px 14px;
  box-shadow:0 0 34px rgba(var(--teal-rgb),.20), 0 14px 44px rgba(0,0,0,.65);
  opacity:0; pointer-events:none;
  transform:translate(-50%,-8px) scale(.86);
  transition:opacity .2s ease, transform .38s cubic-bezier(.16,1,.3,1);
}
.nodo.viola .anteprima{
  border-color:rgba(var(--violet-rgb),.42);
  box-shadow:0 0 34px rgba(var(--violet-rgb),.22), 0 14px 44px rgba(0,0,0,.65);
}
.anteprima em{
  display:block; font-style:normal; font-weight:400;
  color:var(--soft); font-size:.88em; margin-top:4px;
}
.nodo:hover .anteprima,.nodo:focus-visible .anteprima{
  opacity:1; transform:translate(-50%,0) scale(1);
}
.nodo:hover b,.nodo:focus-visible b{
  box-shadow:0 0 0 9px rgba(var(--teal-rgb),.16), 0 0 34px rgba(var(--teal-rgb),1);
}
.nodo.viola:hover b,.nodo.viola:focus-visible b{
  box-shadow:0 0 0 9px rgba(var(--violet-rgb),.16), 0 0 34px rgba(var(--violet-rgb),1);
}

/* i due nodi in basso aprono la scheda verso l'alto, se no esce fuori */
.a-n5 .anteprima{ top:auto; bottom:calc(100% + 12px) }

@media (prefers-reduced-motion: reduce){
  .nodo::after,.anteprima{ transition:none }
}