/* ====================================================================
   BANCO DI PROVA DELLE TRANSIZIONI FRA PAGINE
   Non fa parte del sito. Vive solo sul ramo prove-transizioni e su un
   progetto Cloudflare Pages usa-e-getta.

   REGOLA DEL BANCO: qui dentro non c'e' UNA riga di JavaScript, e la
   CSP di _headers dice script-src 'none'. Quindi tutto cio' che si
   muove si muove per forza in CSS: se funziona qui, funziona anche
   sotto la CSP del sito vero, che e' meno stretta di questa.

   Le misure sono quelle del telefono di Barbara: 412 punti di
   larghezza, schermo alto circa 1075 con la barra del browser
   ritirata.
   ================================================================= */

/* ---------- l'interruttore generale ------------------------------
   Cross-document: va scritto su TUTTE E DUE le pagine, quella da cui
   si parte e quella in cui si arriva. Se manca su una delle due, non
   succede niente e la navigazione resta quella di sempre. */
@view-transition { navigation: auto; }

/* Il ripiego. Chi ha chiesto meno movimento naviga come oggi: la
   pagina si carica e basta. Non e' una versione degradata, e' la
   stessa cosa senza il passaggio. */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ---------- gli stessi colori e le stesse curve del sito ---------- */
:root{
  --fondo:#08080A;
  --sup-1:#0E0E12;
  --sup-2:#131319;
  --testo:#F4F4F6;
  --soft:#A9A9B4;
  --tenue:#6C6C78;
  --linea:rgba(255,255,255,.10);
  --teal:#31E0C0;
  --violet:#8B5CF6;
  --m:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --s:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  /* le stesse di base.css nel sito */
  --d4:.9s;
  --curva-entra:cubic-bezier(.16,1,.3,1);
  --pad:20px;
}

*{box-sizing:border-box}
html{background:var(--fondo)}
body{
  margin:0; padding:0;
  background:var(--fondo); color:var(--testo);
  font-family:var(--s); line-height:1.6;
  /* niente scorrimento orizzontale, come sul sito */
  overflow-x:clip;
}

/* la barra in alto, finta ma delle misure giuste */
.barra{
  position:sticky; top:0; z-index:5;
  height:56px; display:flex; align-items:center; gap:14px;
  padding:0 var(--pad);
  background:rgba(10,10,14,.86); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--linea);
}
.barra b{
  font-family:var(--m); font-size:13px; letter-spacing:-.02em; font-weight:700;
}
.barra i{
  font-style:normal; font-family:var(--m); font-size:9px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--violet);
}

.dentro{max-width:var(--max,1100px); margin:0 auto; padding:0 var(--pad)}

/* l'etichetta in piccolo che dice quale proposta si sta guardando */
.quale{
  position:fixed; left:var(--pad); 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;
  backdrop-filter:blur(8px);
}

h1{
  font-family:var(--m); font-weight:700; letter-spacing:-.025em;
  font-size:clamp(26px,7vw,44px); line-height:1.14; margin:0 0 10px;
  text-wrap:balance;
}
.sommario{margin:0; color:var(--soft); max-width:34ch; text-wrap:pretty}
.occhiello{
  font-family:var(--m); font-size:10px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--teal);
  margin:0 0 12px;
}

/* ================================================================
   L'INDICE
   ================================================================ */
.apre{padding:38px 0 26px}
.elenco{display:grid; gap:18px; padding:8px 0 90px}

.voce{
  display:block; text-decoration:none; color:inherit;
  border:1px solid var(--linea); border-radius:16px; overflow:hidden;
  background:linear-gradient(180deg,var(--sup-2),var(--sup-1));
}
.voce-testo{padding:16px 18px 18px}
.voce-eti{
  margin:0; font-family:var(--m); font-size:9.5px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--violet);
}
.voce-titolo{
  font-family:var(--m); font-weight:700; font-size:19px;
  letter-spacing:-.015em; margin:6px 0 6px;
}
.voce-riga{margin:0; color:var(--soft); font-size:14.5px; text-wrap:pretty}
.voce-vai{
  margin:12px 0 0;
  font-family:var(--m); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--teal);
}
/* i riquadri fotografici sono blocchi: un <span> non prende
   aspect-ratio, e la carta veniva alta ottantasei pixel */
.voce-foto{display:block}

/* ================================================================
   PROPOSTA A - LA PORTA SI APRE
   La carta dell'indice diventa la fascia della testata di arrivo.
   Sul sito vero: .porta (home.tpl.html) -> .pagina-testa
   (sezione.tpl.html).
   ================================================================ */
.voce-a .voce-foto{
  aspect-ratio:16/9; background-size:cover; background-position:50% 42%;
  background-image:url(/foto/a.jpg);
  view-transition-name: apre-a;
}
.testa-a{
  position:relative; min-height:clamp(220px,42vh,340px);
  display:flex; align-items:flex-end;
  padding:0 var(--pad) 26px;
  background-image:url(/foto/a.jpg);
  background-size:cover; background-position:50% 42%;
  view-transition-name: apre-a;
}
/* il velo che rende leggibile il titolo sopra la foto, come sul sito */
.testa-a::after,.testa-c::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(8,8,10,.5) 0%,rgba(8,8,10,.1) 40%,
             rgba(8,8,10,.86) 88%,var(--fondo) 100%);
}
.testa-a > *,.testa-c > *{position:relative; z-index:1}

/* ================================================================
   PROPOSTA B - IL NOME CHE CRESCE
   La parola nel menu diventa il titolo della pagina.
   Sul sito vero: nav.menu a (barra.html) -> .pagina-titolo.
   Funziona da QUALSIASI pagina a qualsiasi altra, non solo dalla
   home: e' l'unica delle tre che copre anche sezione -> sezione.
   ================================================================ */
.voce-b .voce-titolo{ view-transition-name: nome-b; }
.titolo-b{ view-transition-name: nome-b; }

/* ================================================================
   PROPOSTA C - LA SCENA CONTINUA
   La fascia fotografica dell'indice diventa la fascia fotografica
   della pagina di arrivo: stessa forma, stessa natura.
   Sul sito vero: .scena#scatto (home) o .testa-scena (sezione)
   -> .testa-scena della destinazione.
   ================================================================ */
.voce-c .voce-foto{
  aspect-ratio:16/9; background-size:cover; background-position:50% 40%;
  background-image:url(/foto/c.jpg);
  view-transition-name: scena-c;
}
.testa-c{
  position:relative; min-height:clamp(260px,52vh,420px);
  display:flex; align-items:flex-end;
  padding:0 var(--pad) 26px;
  background-image:url(/foto/c.jpg);
  background-size:cover; background-position:50% 40%;
  view-transition-name: scena-c;
}

/* ---------- come si muovono, tutte e tre -------------------------
   Una durata sola e una curva sola, quelle del sito: --d4 e
   --curva-entra. Se il passaggio non ha il ritmo del resto, si sente
   che e' appiccicato. */
::view-transition-group(apre-a),
::view-transition-group(nome-b),
::view-transition-group(scena-c){
  animation-duration: var(--d4);
  animation-timing-function: var(--curva-entra);
}
/* Il contenuto dei due riquadri si scambia piu' in fretta della
   forma: cosi' si guarda la FORMA che cresce, non l'incrocio delle
   due immagini. E' la differenza fra "entrare" e "dissolvenza". */
::view-transition-old(apre-a),
::view-transition-new(apre-a),
::view-transition-old(scena-c),
::view-transition-new(scena-c){
  animation-duration: calc(var(--d4) * .55);
  animation-timing-function: var(--curva-entra);
}

/* Tutto il resto della pagina - quello che NON ha un nome - entra ed
   esce con una dissolvenza breve, cosi' non ruba la scena. */
::view-transition-old(root),
::view-transition-new(root){
  animation-duration: calc(var(--d4) * .5);
  animation-timing-function: var(--curva-entra);
}

/* ================================================================
   LE PAGINE DI ARRIVO
   ================================================================ */
.corpo{padding:26px 0 110px}
.corpo p{color:var(--soft); max-width:56ch; text-wrap:pretty}
.corpo h2{
  font-family:var(--m); font-size:17px; letter-spacing:-.01em;
  margin:26px 0 8px;
}
.finto{
  margin-top:24px; display:grid; gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
}
.finto div{
  aspect-ratio:4/3; border-radius:12px; border:1px solid var(--linea);
  background:linear-gradient(180deg,var(--sup-2),var(--sup-1));
}
.torna{
  display:inline-block; margin-top:30px;
  font-family:var(--m); font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--teal); text-decoration:none;
  border:1px solid rgba(49,224,192,.4); border-radius:999px;
  padding:11px 18px;
}
.nota{
  margin-top:34px; padding-top:18px; border-top:1px solid var(--linea);
  color:var(--tenue); font-size:13.5px; max-width:56ch;
}
.nota b{color:var(--soft); font-weight:600}


/* ================================================================
   IL SEMAFORO
   Barbara dice che non vede niente muoversi. Prima di dare la colpa
   al codice, la pagina deve dire da sola se le animazioni sono
   accese o se e' il telefono a spegnerle. Tutto in CSS: nessuno
   script, quindi nessun dubbio su cosa lo stia facendo.

   Sui telefoni Samsung basta il RISPARMIO ENERGETICO, o
   "Rimuovi animazioni" nelle impostazioni di accessibilita', per
   accendere prefers-reduced-motion. Da quel momento il browser
   spegne OGNI animazione di OGNI sito - comprese tutte quelle che
   il sito ha gia'.
   ================================================================ */
.semaforo{
  margin:0 0 26px; padding:16px 18px;
  border:1px solid var(--linea); border-radius:14px;
  background:linear-gradient(180deg,var(--sup-2),var(--sup-1));
}
.semaforo b{
  display:block; font-family:var(--m); font-size:13px; margin-bottom:8px;
}
.semaforo p{margin:0; font-size:14px; color:var(--soft)}

.stato{
  display:inline-block; font-family:var(--m); font-size:12px;
  font-weight:700; letter-spacing:.08em;
  padding:6px 12px; border-radius:999px;
}
.stato::after{ content:"ANIMAZIONI ACCESE"; }
.stato{ color:#0A0A0C; background:var(--teal); }

/* Una striscia che va e viene, per sempre. Se sta ferma, le
   animazioni sono spente: non c'e' altra spiegazione. */
.pendolo{
  position:relative; height:6px; margin-top:14px;
  border-radius:99px; background:rgba(255,255,255,.08); overflow:hidden;
}
.pendolo i{
  position:absolute; top:0; bottom:0; left:0; width:38%;
  border-radius:99px;
  background:linear-gradient(90deg,var(--violet),var(--teal));
  animation:vaevieni 1.9s ease-in-out infinite alternate;
}
@keyframes vaevieni{ to{ transform:translateX(163%) } }

@media (prefers-reduced-motion: reduce){
  .stato{ color:#0A0A0C; background:#F0B429; }
  .stato::after{ content:"ANIMAZIONI SPENTE DAL TUO TELEFONO"; }
  .pendolo i{ animation:none; width:100% }
  .semaforo{ border-color:#F0B429 }
}

/* ---------- le transizioni si guardano meglio se sono lente -----
   Un secondo e mezzo non e' la durata definitiva: e' la durata per
   CAPIRE cosa sta succedendo. Sul sito vero si torna a --d4. */
::view-transition-group(apre-a),
::view-transition-group(nome-b),
::view-transition-group(scena-c){
  animation-duration: 1.5s;
}
::view-transition-old(apre-a),
::view-transition-new(apre-a),
::view-transition-old(scena-c),
::view-transition-new(scena-c){
  animation-duration: .75s;
}
::view-transition-old(root),
::view-transition-new(root){
  animation-duration: .6s;
}