/* ==================================================================
   LE DUE STANZE
   Stesso testo, stesso stile, due modi opposti di ospitarlo.

   STANZA A - si resta dentro la scena. Il fondale non cambia mai: lei
   continua a ruotare, e il testo sale sopra di lei dentro una colonna
   di vetro. Il movimento viene dal fondale che si avvicina piano
   mentre leggi: la stanza non e' ferma, ma non e' nemmeno un'altra.

   STANZA B - si passa attraverso il pannello e si finisce altrove. Il
   pannello si allarga fino a riempire lo schermo, il mozzo sfuma, e
   dietro c'e' la rete: un'altra stanza, con la sua luce e il suo
   ritmo. Il testo vive li', su lastre sospese lungo un corridoio.

   Nessuna riga di JavaScript: la CSP del banco lo vieta, e non serve.
   ================================================================== */

:root{
  --teal:#31E0C0;   --teal-rgb:49,224,192;
  --violet:#8B5CF6; --violet-rgb:139,92,246;
  --testo:#F4F4F6;  --soft:#A9A9B4;
  --fondo:#05060B;
  --s: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --m: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
/* ==================================================================
   QUANDO VALE "SIAMO SU UN TELEFONO".

   Non basta guardare la larghezza. Chrome su Android ha una voce che
   si chiama "sito desktop": il telefono resta un telefono, ma il
   browser dichiara di essere largo circa 980 punti e tutte le regole
   scritte per il piccolo si spengono in blocco. Il risultato e' la
   pagina da monitor rimpicciolita dentro un palmo: le schede tornano
   appese alle coordinate della scena, larghe un francobollo, con
   scritte che non si leggono. E' esattamente quello che si vedeva.

   La forma dello schermo pero' non mente. Un monitor e' piu' largo
   che alto; un telefono, anche quando dice di essere largo 980, resta
   molto piu' alto che largo. Quindi da qui in avanti il layout del
   piccolo si accende in due casi: schermo stretto OPPURE schermo
   molto piu' alto che largo. Un desktop vero non ricade mai nel
   secondo, un telefono non sfugge mai a tutti e due.
   ================================================================== */
*{ box-sizing:border-box }
html{ scroll-behavior:smooth }
body{
  margin:0; background:var(--fondo); color:var(--testo);
  font-family:var(--s); -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* --- IL FONDALE. Fermo dietro tutto, a schermo pieno, sempre. --- */
.fondale{
  position:fixed; inset:0; z-index:0; overflow:hidden;
  background:#05060B;
}
.fondale video{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  /* il fondale si avvicina pianissimo per tutta la pagina: e' quello
     che tiene viva la stanza anche quando non cambia */
  transform-origin:52% 45%;
  animation:avvicina linear both;
  animation-timeline:scroll(root block);
}
/* PROVA 3, APPROVATA: IL FONDALE CAMBIA STATO, NON SI AVVICINA E BASTA.
   Prima faceva una cosa sola - si ingrandiva del sedici per cento in
   tutta la pagina - e da fermo sembrava comunque una fotografia
   appesa. Adesso cambia anche luce e colore mentre scendi: entra
   scuro, si accende a meta' dove si legge, e si spegne di nuovo verso
   il fondo. Piu' un mezzo punto di spostamento laterale, che basta a
   togliere l'idea che sia incollato.
   Sulla home questo NON si fa: quella non si tocca. Qui si', perche'
   il fondale di una stanza e' un fondale e basta. */
@keyframes avvicina{
  0%  { scale:1;    filter:brightness(.70) saturate(.95); translate:0 0 }
  38% { scale:1.07; filter:brightness(1.02) saturate(1.16); translate:-1.4% 0 }
  72% { scale:1.12; filter:brightness(.86) saturate(1.06); translate:1% 0 }
  100%{ scale:1.16; filter:brightness(.58) saturate(.9);  translate:0 0 }
}

/* ==================================================================
   PROVA 5, APPROVATA: IL SIPARIO DI SCHEGGE FRA UN BLOCCO E L'ALTRO
   Il passaggio da un contenuto al successivo era un vuoto da
   attraversare. Adesso e' un evento: una tendina di vetro passa nello
   stacco, e le schegge VIAGGIANO con lo scorrimento invece di
   accendersi e spegnersi sul posto.
   Due strati a velocita' diverse - uno scende, uno sale - perche' una
   cosa sola che si sposta sembra un fondale che scorre; due
   diventano spazio.
   Sta sul secondo blocco in poi (blocco + blocco): sopra il primo non
   c'e' nessun passaggio da segnare, si e' appena arrivati.
   ================================================================== */
.lettura .blocco{ position:relative }
.lettura .blocco + .blocco::before,
.lettura .blocco + .blocco::after{
  content:""; position:absolute; z-index:1; pointer-events:none;
  left:-8vw; right:-8vw; height:30vh;
  background-size:cover; background-position:center;
  background-repeat:no-repeat;
  mix-blend-mode:screen;
  animation-timeline:view(block);
  animation-range:cover 0% cover 100%;
  animation-timing-function:linear;
  animation-fill-mode:both;
}
.lettura .blocco + .blocco::before{
  top:-16vh; opacity:.8;
  background-image:url(/foto/elementi/schegge-1.webp);
  animation-name:siparioScende;
}
.lettura .blocco + .blocco::after{
  top:-9vh; opacity:.45;
  background-image:url(/foto/elementi/schegge-2.webp);
  animation-name:siparioSale;
}
@keyframes siparioScende{
  from{ translate:0 -26%; scale:1.06 }
  to  { translate:0  30%; scale:1 }
}
@keyframes siparioSale{
  from{ translate:0  24%; scale:1 }
  to  { translate:0 -24%; scale:1.08 }
}

/* OGNI PASSAGGIO E' DIVERSO DAL PRECEDENTE, DAL PRIMO ALL'ULTIMO.
   Il primo tentativo prendeva "dal terzo blocco in poi", quindi i due
   passaggi iniziali restavano identici fra loro: la ripetizione si
   vedeva comunque, ed era proprio quella che Barbara ha notato prima
   nel prompt e poi nel blog.
   Adesso i tre modi si alternano a rotazione - uno ogni tre blocchi -
   quindi due passaggi vicini non sono MAI uguali, e in una stanza
   lunga il ciclo ricomincia abbastanza lontano da non accorgersene.
   Cambia l'immagine, il verso, la misura, l'inclinazione e l'altezza:
   resta la stessa idea, il vetro che passa, mai la stessa cosa. */

/* modo B: ribaltato, con la scia al posto del secondo strato */
.lettura .blocco:nth-of-type(3n) + .blocco::before{
  background-image:url(/foto/elementi/schegge-2.webp);
  scale:-1 1; opacity:.62; height:26vh;
}
.lettura .blocco:nth-of-type(3n) + .blocco::after{
  background-image:url(/foto/elementi/04-scia-particelle-B.webp);
  background-size:auto 130%; opacity:.34;
}

/* modo C: piu' basso, inclinato, con lo schermo rotto intero */
.lettura .blocco:nth-of-type(3n+1) + .blocco::before{
  background-image:url(/foto/elementi/02-schermo-rotto-A.webp);
  background-size:auto 92%;
  rotate:-3deg; height:21vh; opacity:.5;
}
.lettura .blocco:nth-of-type(3n+1) + .blocco::after{
  background-image:url(/foto/elementi/schegge-1.webp);
  background-size:auto 108%;
  rotate:2deg; opacity:.28;
}

@media (prefers-reduced-motion: reduce){
  .lettura .blocco + .blocco::before,
  .lettura .blocco + .blocco::after{ animation:none; opacity:0 }
}

/* un velo che si addensa solo dove passano le parole, mai su di lei */
.velo{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg,
    rgba(4,5,10,.80) 0%, rgba(4,5,10,.55) 34%,
    rgba(4,5,10,.10) 56%, rgba(4,5,10,0) 72%);
}

/* --- L'ARRIVO: il titolone e l'invito, come nella scena --- */
/* L'INGRESSO STA SOPRA LE SCHEDE, NON SOTTO.
   Le schede di vetro sono fisse e disegnate al livello 3. L'ingresso
   stava al 2, quindi entrando nella stanza una scheda passava davanti
   al titolo e, peggio, davanti alla riga che spiega la sezione: si
   leggeva mezza frase e l'altra meta' era coperta dal vetro.
   Le schede non si spostano - devono atterrare dove stavano nella
   scena, ed e' giusto cosi'. E' l'ingresso che sale sopra di loro.
   Sale il CONTENITORE, che e' trasparente: le schede continuano a
   vedersi dappertutto, solo non piu' sopra le parole. */
.entrata{
  position:relative; height:190vh; height:190lvh; z-index:4;
  view-timeline-name:--arrivo; view-timeline-axis:block;
}
.entrata-dentro{
  position:sticky; top:0; height:100lvh; overflow:hidden;
}
.titolone{
  position:absolute; left:3.5vw; top:var(--tt,26vh); margin:0;
  font-size:clamp(52px,11vw,190px); line-height:.88; letter-spacing:-.045em;
  font-weight:800; color:#fff;
  text-shadow:0 3px 0 rgba(4,5,9,.82), 0 14px 30px rgba(4,5,9,.96),
              0 30px 72px rgba(4,5,9,.82), 0 0 130px rgba(4,5,9,.6);
}
.occhiello{
  position:absolute; left:3.7vw; top:62vh; max-width:min(520px,86vw); margin:0;
  font-size:clamp(15px,1.5vw,20px); line-height:1.55; color:#E2E2E9;
  text-shadow:0 2px 10px rgba(4,5,9,1), 0 0 24px rgba(4,5,9,.9);
}
/* L'ALONE DIETRO LA DESCRIZIONE.
   Salire sopra le schede risolve l'ordine ma non il contrasto: una
   riga chiara sopra il vetro chiaro di una scheda si legge male lo
   stesso. Qui non c'e' un blocco nero - sotto si continua a vedere
   la scena - ma una macchia morbida che si spegne prima di finire,
   quindi non ha bordi e non taglia niente. E' la stessa cura che ha
   il testo delle sezioni nella scena. */
.occhiello::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  left:-8%; right:-8%; top:-42%; bottom:-42%;
  background:radial-gradient(58% 62% at 50% 50%,
    rgba(4,5,9,.82), rgba(4,5,9,.6) 44%, rgba(4,5,9,.26) 68%,
    rgba(4,5,9,.08) 84%, transparent 94%);
}
/* ==================================================================
   IL VERDE VUOL DIRE "SI VA AVANTI".
   Tutto il vetro del sito e' viola. In un posto dove ogni cosa ha lo
   stesso colore, un colore diverso non e' una decorazione: e' un
   segnale. Il verde acqua sta addosso a un gesto solo, sempre lo
   stesso - andare avanti - e sta addosso a tutti e tre i punti in cui
   si avanza: entrare nella sezione, tornare nella scena, e proseguire
   verso la sezione dopo.
   Chi ha imparato il verde nella scena lo ritrova identico nelle
   stanze, e non deve rileggere niente per sapere dove si preme.
   Pulsano tutti allo stesso ritmo, 1,9 secondi, come nella scena.
   ================================================================== */
.avanza,
/* ==================================================================
   I BOTTONI DELLE STANZE SONO UN SISTEMA SOLO
   Erano quattro cose scollegate: 14px, 12px e 11,5px di corpo, tre
   spaziature interne diverse, l'altezza da dito su uno solo dei
   quattro e due famiglie di colore usate a caso. Messi nella stessa
   pagina sembravano presi da tre siti diversi.
   Adesso la forma e' UNA - stesso corpo, stessa spaziatura, stessa
   altezza minima da cinquanta punti, che e' un bersaglio da dito - e
   l'unica cosa che cambia e' il colore, perche' qui il colore non
   decora: dice che ruolo ha quel bottone.
     verde acqua pieno  = l'azione della stanza    (.scendi)
     verde acqua tenue  = navigazione              (.continua, .torna-casa)
     viola              = porta fuori di qui       (.fuori)
   ================================================================== */
.scendi, .continua, .torna-casa, .fuori{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--m); font-weight:700;
  font-size:13px; letter-spacing:.12em; text-transform:uppercase;
  text-decoration:none;
  min-height:50px; padding:15px 26px; border-radius:999px;
  transition:border-color .25s ease, background .25s ease,
             color .25s ease, transform .25s ease;
}

.scendi, .continua{
  position:relative;
  font-family:var(--m); font-weight:700;
  text-transform:uppercase; text-decoration:none;
  color:#EAFFFA;
  border:1px solid rgba(var(--teal-rgb),.9);
  background:linear-gradient(180deg, rgba(var(--teal-rgb),.26), rgba(5,10,12,.72));
  text-shadow:0 1px 6px rgba(4,5,9,1);
}
.scendi:hover, .continua:hover{
  border-color:rgba(var(--teal-rgb),1);
}
/* l'alone che batte: uno strato sopra, che muove solo l'opacita' -
   l'unico modo di far pulsare una luce sopra un filmato senza pagarla
   in fotogrammi */
.scendi::after, .continua::after{
  content:""; position:absolute; inset:-3px; border-radius:inherit;
  pointer-events:none;
  border:1px solid rgba(var(--teal-rgb),1);
  box-shadow:0 0 28px rgba(var(--teal-rgb),.8),
             inset 0 0 18px rgba(var(--teal-rgb),.22);
  opacity:.22;
  animation:battitoAvanza 1.9s ease-in-out infinite;
}
@keyframes battitoAvanza{ 0%,100%{ opacity:.22 } 50%{ opacity:1 } }

/* IL GUASTO SI FA SULLE LETTERE, NON SULLA FORMA.
   La prima versione tagliava il pulsante in due con una maschera: il
   risultato non si leggeva come un effetto, si leggeva come un
   pulsante rotto a meta' - un errore di disegno, non una scelta.
   Adesso la pastiglia resta sempre intera e a guastarsi e' il testo:
   i canali si separano per un istante, uno verso il viola e uno verso
   il verde, esattamente come fa la frase in home e come fanno i
   titoloni delle sezioni. E' la stessa lingua, ed e' riconoscibile
   come voluta.
   L'andatura resta a gradini di uno: niente passaggi intermedi, il
   guasto o c'e' o non c'e'. */
.scendi,
.continua{ animation:guastoPulsante 3.4s steps(1,end) infinite }
@keyframes guastoPulsante{
  0%,44%  { translate:0 0;
            text-shadow:0 1px 6px rgba(4,5,9,1) }
  46%     { translate:-3px 0;
            text-shadow: 3px 0 0 rgba(var(--violet-rgb),.95),
                        -3px 0 0 rgba(var(--teal-rgb),.95),
                         0 1px 6px rgba(4,5,9,1) }
  48%     { translate:3px 0;
            text-shadow:-4px 0 0 rgba(var(--violet-rgb),.9),
                         4px 0 0 rgba(var(--teal-rgb),.9),
                         0 1px 6px rgba(4,5,9,1) }
  50%     { translate:-1px 0;
            text-shadow:0 1px 6px rgba(4,5,9,1) }
  52%,84% { translate:0 0;
            text-shadow:0 1px 6px rgba(4,5,9,1) }
  86%     { translate:2px 0;
            text-shadow:-3px 0 0 rgba(var(--violet-rgb),.9),
                         3px 0 0 rgba(var(--teal-rgb),.9),
                         0 1px 6px rgba(4,5,9,1) }
  88%     { translate:-2px 0;
            text-shadow: 3px 0 0 rgba(var(--teal-rgb),.9),
                        -3px 0 0 rgba(var(--violet-rgb),.9),
                         0 1px 6px rgba(4,5,9,1) }
  90%,100%{ translate:0 0;
            text-shadow:0 1px 6px rgba(4,5,9,1) }
}


.scendi:hover::after, .continua:hover::after,
.scendi:focus-visible::after, .continua:focus-visible::after{
  opacity:1; animation:none;
}
.scendi{
  /* le misure stanno nel sistema qui sopra: qui solo dove sta */
  position:absolute; left:3.7vw; top:76vh;
}

/* --- IL VETRO: una materia sola per tutte e due le stanze --- */
.vetro{
  position:relative;
  background:linear-gradient(180deg,
    rgba(225,215,255,.10) 0%, rgba(150,120,255,.035) 30%,
    rgba(7,6,14,.46) 56%, rgba(5,4,11,.76) 100%);
  border:1px solid rgba(var(--violet-rgb),.55);
  border-radius:16px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 22px 60px rgba(0,0,0,.55);
}
.vetro::after{
  content:""; position:absolute; inset:-1px; border-radius:inherit;
  pointer-events:none; border:1px solid rgba(var(--violet-rgb),.9);
  box-shadow:0 0 30px rgba(var(--violet-rgb),.55),
             inset 0 0 26px rgba(var(--violet-rgb),.14);
  opacity:.30;
}
.vetro:hover::after{ animation:battito 2s ease-in-out infinite }
@keyframes battito{ 0%,100%{ opacity:.42 } 50%{ opacity:1 } }

/* --- IL TESTO, identico nelle due stanze --- */
.eti{
  margin:0 0 10px; font-family:var(--m); font-size:11px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--violet);
  text-shadow:0 0 10px rgba(var(--violet-rgb),.6), 0 1px 5px rgba(4,5,9,1);
}
.tit{
  margin:0 0 16px; font-size:clamp(24px,2.6vw,38px); line-height:1.08;
  letter-spacing:-.03em; font-weight:800; color:#fff;
  text-shadow:0 2px 10px rgba(4,5,9,1), 0 0 28px rgba(4,5,9,.95);
}
.riga{
  margin:0 0 14px; font-size:clamp(14px,1.08vw,16.5px); line-height:1.62;
  color:#E4E4EB;
  text-shadow:0 1px 4px rgba(4,5,9,1), 0 2px 12px rgba(4,5,9,.98);
}
.tecnica, .fonte{
  margin:14px 0 0; font-family:var(--m); font-size:12px; line-height:1.5;
  color:#B9B9C6; text-shadow:0 1px 6px rgba(4,5,9,1);
}
.fonte{ color:#8E8E9C }
.chiusa .tit{ margin-bottom:8px }

/* ==================================================================
   STANZA A - LA COLONNA DI LETTURA
   Sta a sinistra, dove lei non c'e' mai: nel filmato lei tiene il
   centro e la destra, e la fascia sinistra resta libera per tutto il
   giro. Cosi' si legge senza coprirla.
   ================================================================== */
/* ==================================================================
   LE SCHEDE SONO TRE, E SONO SEMPRE LE STESSE.
   Non ce n'e' un secondo gruppo per la lettura: sono queste tre, e
   fanno tutto il viaggio. Per questo stanno FISSE rispetto allo
   schermo invece che dentro il testo - solo cosi' una scheda puo'
   restare ferma davanti a te mentre sotto scorre il suo paragrafo.

   Ogni scheda ha due animazioni che si danno il cambio:
   1. l'ARRIVO, sulla linea del tempo della prima schermata: sboccia
      dove stava nella scena;
   2. il VIAGGIO, sulla linea del tempo del SUO blocco di testo: si
      sgancia, si rimpicciolisce, si va a mettere a destra, resta li'
      finche' il suo paragrafo scorre, e poi se ne va in alto.
   Fra le due c'e' un tratto in cui non comanda nessuna delle due, e
   la scheda sta ferma al suo posto nella scena: e' l'attesa. Le altre
   due aspettano li' il loro turno.
   La prima riempie all'indietro (prima di sbocciare non c'e'), la
   seconda riempie in avanti (dopo essersene andata, resta andata).
   ================================================================== */
/* OGNI SCHEDA STA DENTRO IL SUO BLOCCO DI TESTO.
   Prima stavano tutte e tre in un contenitore fisso, fuori dal testo.
   Sul telefono quello e' stato un disastro: il testo e' largo quanto
   lo schermo, non esiste nessuna fascia libera dove mettersi, e la
   scheda ingrandita finiva sopra le parole.
   Adesso ogni scheda e' figlia del suo blocco. Sul largo resta fissa
   rispetto allo schermo e va dove vuole - la posizione fissa la stacca
   dal flusso, quindi dove sta nel codice non conta. Sul telefono
   smette di essere fissa e torna dov'e' scritta: sopra il suo testo.
   Stessa scheda, due comportamenti, nessun doppione. */
.scheda{
  /* LA LARGHEZZA E' QUELLA DELLA LASTRA NELLA SEZIONE.
     Prima era 10.5vw per tutte, mentre nella scena ogni sezione ha
     la sua misura (13, 14, 15, 16 per cento). Entrando, la scheda si
     ritrovava piu' piccola di quella che avevi appena guardato: lo
     stesso oggetto che cambia taglia nel passaggio da una stanza
     all'altra si legge come un altro oggetto. */
  position:fixed; left:var(--x); top:var(--y); width:var(--w,13vw); z-index:3;
  /* LA POSA A RIPOSO E' ESATTAMENTE QUELLA DI FINE SEZIONE.
     Nella scena le lastre finiscono di sbocciare dritte - scale(1),
     nessuna rotazione - nel loro punto. Questa riga dice la stessa
     cosa, e siccome l'animazione di arrivo riempie all'indietro con
     il proprio primo fotogramma, e' anche quello che si vede
     nell'istante in cui si mette piede nella stanza. */
  transform:perspective(1400px) translate(-50%,-50%) scale(1) rotateY(0deg);
  padding:9px 9px 11px; border-radius:13px;
  pointer-events:auto;
  transform-origin:50% 50%;
  /* IL POSTO DAVANTI. Non e' un angolino a destra: e' il punto in cui
     la scheda si mette quando tocca a lei, accanto al testo e piu'
     avanti di tutto il resto. */
  --sx:70vw; --sy:40vh;
  --dx:calc(var(--sx) - var(--x));
  --dy:calc(var(--sy) - var(--y));
  /* Le schede in attesa restano al loro posto: non c'e' piu' nessun
     angolo dove andare, e quindi nessuno spostamento da spiegare. */
  /* TRE ANIMAZIONI INSIEME, e non si pestano i piedi perche' toccano
     proprieta' diverse: le prime due muovono "translate" e "scale", la
     terza muove "transform". In CSS sono cose distinte e si sommano,
     quindi una scheda puo' galleggiare mentre viaggia.
     Il galleggiamento e' l'unico a tempo: gli altri due sono mossi dal
     dito. */
  animation-name: posaArrivo, viaggia, galleggia;
  animation-timeline: --arrivo, var(--mio), auto;
  animation-fill-mode: both, forwards, none;
  animation-timing-function: cubic-bezier(.4,0,.3,1), cubic-bezier(.5,0,.3,1), ease-in-out;
  /* IL TRATTO DEL VIAGGIO E' LEGATO ALLE FASI, NON A UNA PERCENTUALE.
     Prima era "cover 0% - cover 100%", cioe' tutto il passaggio del
     blocco davanti allo schermo, e i momenti chiave erano percentuali
     fisse di quel tratto. Ma i blocchi non sono alti uguali: uno di
     quattro paragrafi e uno di due hanno tratti diversi, e la stessa
     percentuale cade in due momenti diversi. Risultato: in un blocco
     la scheda se ne andava mentre il testo era ancora li', in un altro
     restava quando il testo era gia' uscito.
     "entry" e "exit" sono i nomi delle fasi: entry e' mentre il blocco
     entra dal basso, exit e' mentre esce dall'alto. Legandosi a quelle,
     la scheda arriva SEMPRE mentre il suo testo entra e se ne va SEMPRE
     mentre il suo testo esce, qualunque sia la sua altezza. */
  animation-range: var(--r-arrivo), entry 25% exit 25%, normal;
  animation-duration: auto, auto, 3.6s;
  animation-iteration-count: 1, 1, infinite;
  animation-direction: normal, normal, alternate;
  animation-delay: 0s, 0s, var(--ritardo, 0s);
}
/* L'AMPIEZZA DEL GALLEGGIO E' UN NUMERO CHE SI PUO' ANIMARE.
   Serve perche' la scheda deve fluttuare quando aspetta e stare
   ferma quando e' agganciata al testo: e' il viaggio stesso a
   portare l'ampiezza a zero mentre la scheda si mette in posizione.
   Senza la dichiarazione @property il numero salterebbe da nove a
   zero di colpo invece di scendere piano. */
/* Il valore di partenza e' ZERO, e non e' un dettaglio: e' quello che
   vale quando nessuna animazione sta dicendo il contrario - a
   schermo fermo, prima che il tratto cominci, o su un browser che
   le animazioni legate allo scorrimento non le sa fare. In tutti
   quei casi la scheda deve stare esattamente dove stava nella
   sezione, ferma. Il respiro lo chiedono i fotogrammi che lo
   vogliono, uno per uno. */
@property --gal{ syntax:'<length>'; inherits:false; initial-value:0px }
/* IL GALLEGGIO USA "translate", IL VIAGGIO USA "transform".
   Sono due proprieta' distinte e si sommano, quindi una scheda puo'
   ondeggiare mentre viaggia. Se usassero la stessa, la seconda
   cancellerebbe la prima. */
@keyframes galleggia{
  from{ translate:0 calc(var(--gal) * -1) }
  to  { translate:0 var(--gal) }
}
.scheda .num{
  position:absolute; left:14px; top:12px; z-index:3;
  font-family:var(--m); font-size:9px; font-weight:700;
  letter-spacing:.14em; color:var(--violet);
  text-shadow:0 1px 6px rgba(4,5,9,1);
}
.scheda .foto{
  display:block; width:100%; aspect-ratio:16/10; border-radius:8px;
  background-size:cover; background-position:50% 45%; background-color:#070911;
}
.scheda .nome{
  display:block; margin-top:9px; padding:0 4px;
  /* piccola apposta: quando la scheda va in primo piano tutto viene
     ingrandito due volte e mezzo, scritta compresa */
  font-weight:600; font-size:clamp(10px,.7vw,12px); line-height:1.25;
  color:#fff; text-shadow:0 1px 4px rgba(4,5,9,1), 0 2px 12px rgba(4,5,9,1);
}
/* L'ARRIVO, E POI LA CODA. Sboccia dove stava nella scena, resta li'
   un po' a galleggiare, e poi va a mettersi nel suo angolo ad
   aspettare il turno. */
@keyframes posaArrivo{
  /* SI ENTRA E LE SCHEDE SONO GIA' LI'.
     Prima questa animazione le faceva sbocciare da mezza misura e da
     trasparenti: siccome comincia subito, nell'istante dell'approdo
     erano al settanta per cento e sbiadite. Chi entrava vedeva tre
     oggetti diversi da quelli che aveva appena lasciato.
     Adesso il primo fotogramma E' la posa di fine sezione - stesso
     punto, stessa misura, dritte, piene - e il riempimento
     all'indietro fa si' che quella posa valga anche prima che il
     tratto cominci. Il movimento non e' piu' un ingresso: e' il
     passo indietro che fanno DOPO, per lasciare parlare il testo. */
  /* --gal e' l'ampiezza del respiro. All'approdo vale zero: la scheda
     sta esattamente dove stava a fine sezione, ferma. Il respiro
     nasce mentre si ritira, che e' anche l'unico momento in cui ha
     un senso - una cosa che aspetta il suo turno. */
  0%  { opacity:1; --gal:0px;
        transform:perspective(1400px) translate(-50%,-50%) scale(1) rotateY(0deg) }
  30% { opacity:1; --gal:0px;
        transform:perspective(1400px) translate(-50%,-50%) scale(1) rotateY(0deg) }
  /* RESTA DOVE SI E' POSATA. NON VA IN NESSUN ANGOLO.
     Prima, finito l'arrivo, le tre schede scivolavano in tre angoli
     scelti da me. Chi entrava nella sezione le vedeva posarsi dove
     stavano nella scena e un attimo dopo spostarsi altrove senza un
     motivo leggibile: un movimento che non racconta niente e' solo
     un'incongruenza.
     Adesso ognuna resta esattamente dove stava alla fine della
     presentazione. Quello che cambia mentre aspetta non e' il posto:
     e' la presenza. Si ritira - piu' piccola, piu' spenta - e continua
     a fluttuare li'. Quando tocca a lei viene avanti da quel punto. */
  100%{ opacity:.34; --gal:15px;
        transform:perspective(1400px) translate(-50%,-50%)
                  scale(.84) rotateY(var(--incl,0deg)) }
}
/* IL VIAGGIO. La scheda AVANZA: viene avanti verso di te e si fa
   grande, quasi il doppio, e si raddrizza. Non arretra e non si
   rimpicciolisce mai - quello faceva sembrare che si togliesse di
   mezzo, e invece e' il contrario: e' il suo turno, ed e' lei la cosa
   da guardare mentre a sinistra scorre il suo testo.
   Resta grande e ferma per meta' del tratto - e' li' che "scorre
   insieme" al testo - e poi continua ad avanzare e sfuma, come una
   cosa che ti passa accanto e va oltre. */
/* IL TEMPO DEL VIAGGIO, e perche' questi numeri e non altri.
   I blocchi di testo sono attaccati uno all'altro, quindi il blocco
   dopo comincia a passare quando il suo precedente e' ancora a meta'
   del tratto: nella misura di questa pagina, il tratto del blocco che
   segue parte al 51 per cento del tratto di quello prima.
   Da qui la regola: una scheda deve essersene andata PRIMA che la
   successiva arrivi al posto in primo piano, cioe' prima del 51 piu'
   il momento in cui arriva. Arrivo al 22, sparita al 70, la
   successiva arriva al 73: restano tre punti di margine, e il cambio
   si vede pulito invece che con due schede sovrapposte.
   Prima arrivava al 30 e spariva al 100: per questo restava li'
   mentre il testo dopo era gia' salito. */
@keyframes viaggia{
  /* parte da dove sta, non da un angolo */
  0%  { opacity:.34; --gal:15px; z-index:3;
        transform:perspective(1400px) translate(-50%,-50%)
                  scale(.84) rotateY(var(--incl,0deg)) }
  10% { opacity:1 }
  18% { opacity:1; --gal:0px; z-index:7;
        transform:perspective(1400px)
                  translate(calc(-50% + var(--dx)), calc(-50% + var(--dy)))
                  scale(var(--grande,2.35)) rotateY(0deg) }
  82% { opacity:1; --gal:0px; z-index:7;
        transform:perspective(1400px)
                  translate(calc(-50% + var(--dx)), calc(-50% + var(--dy)))
                  scale(var(--grande,2.35)) rotateY(0deg) }
  100%{ opacity:0; --gal:0px; z-index:7;
        transform:perspective(1400px)
                  translate(calc(-50% + var(--dx)), calc(-50% + var(--dy) - 13vh))
                  scale(calc(var(--grande,2.35) + .25)) rotateY(0deg) }
}
/* dove stanno nella scena, e a quale blocco di testo appartengono */
/* dove stanno nella scena, a quale blocco appartengono, e con che
   sfasamento galleggiano: se respirassero all'unisono sembrerebbero
   un oggetto solo */
.sch1{ --x:62vw; --y:74vh; --qx:72vw; --qy:78vh; --incl:  9deg; --mio:--b1;
        --r-arrivo:contain  8% contain 46%; --ritardo:0s }
.sch2{ --x:88vw; --y:20vh; --qx:89vw; --qy:78vh; --incl:-11deg; --mio:--b2;
        --r-arrivo:contain 14% contain 52%; --ritardo:-1.2s }
.sch3{ --x:75vw; --y:47vh; --qx:89vw; --qy:19vh; --incl:-13deg; --mio:--b3;
        --r-arrivo:contain 20% contain 58%; --ritardo:-2.4s }

/* LA LETTURA.
   Il testo tiene la fascia sinistra, le schede quella destra, e in
   mezzo resta libero un terzo di schermo: e' li' che sta lei. */
.lettura{ position:relative; z-index:2; padding:0 0 26vh }
.blocco{ padding:0 4vw }
/* LA MISURA DELLA RIGA.
   Sessantacinque battute e' la larghezza in cui l'occhio ritrova da
   solo l'inizio della riga dopo: piu' larga e ci si perde, piu'
   stretta e si spezza. Il limite in "ch" tiene quella misura anche
   quando lo schermo cresce, invece di allargare il testo all'infinito
   solo perche' c'e' spazio. */
.blocco .testo{ width:min(65ch, 44vw) }
/* IL BLOCCO DEVE ESSERE PIU' ALTO DELLA SCHERMATA, se no la scheda si
   sgancia e si riaggancia troppo in fretta e il gancio non si legge. */
.b1{ view-timeline-name:--b1 }
.b2{ view-timeline-name:--b2 }
.b3{ view-timeline-name:--b3 }
.b4{ view-timeline-name:--b4 }
.b1,.b2,.b3,.b4{ view-timeline-axis:block; min-height:104lvh; padding-bottom:8vh }
body{ timeline-scope:--arrivo, --b1, --b2, --b3, --b4 }

/* le fotografie delle schede, una per stanza */
.of-orange1{ background-image:url(/foto/l-orange1.webp) }
.of-sanfront{ background-image:url(/foto/l-sanfront.webp) }
.of-amalur{ background-image:url(/foto/l-amalur.webp) }
/* LE QUATTRO SCHEDE DI PROMPT.
   Erano definite solo nel foglio della scena, e le stanze usano le
   stesse classi: la scheda esisteva, il riquadro c'era, ma dentro non
   c'era nessuna immagine - un rettangolo nero col nome sotto. Le
   immagini erano gia' sul banco: mancava la riga che le nomina. */
.im-personaggio{ background-image:url(/foto/t-scheda-personaggio.webp) }
.im-guardaroba{ background-image:url(/foto/t-scheda-guardaroba.webp) }
.im-location{ background-image:url(/foto/t-scheda-location.webp) }
.im-blog{ background-image:url(/foto/t-blog.webp) }
.im-press{ background-image:url(/foto/t-press.webp) }
/* LA BIOGRAFIA NON DEVE GALLEGGIARE DA SOLA.
   Era l'unico blocco della stanza senza niente accanto: un pannello
   di testo sospeso nel vuoto, mentre tutti gli altri hanno una scheda
   che li ancora. Un ritratto e' anche la cosa giusta da mettere
   accanto a una biografia - e' letteralmente di chi si sta parlando.
   La fotografia si cambia toccando solo questa riga. */
.im-bio{ background-image:url(/foto/barbara-largo.webp) }
.im-contatti{ background-image:url(/foto/t-contatti.webp) }
.foglio{
  padding:30px 30px 34px; margin:0 0 4.5vh;
  animation:saleFoglio linear both;
  animation-timeline:view(block);
  animation-range:entry 4% entry 62%;
}
/* DENTRO NON SI DISSOLVE PIU'.
   Era opacity 0->1 con quarantasei punti di salita: la stessa
   dissolvenza che fuori abbiamo tolto, e per lo stesso motivo la
   stanza sembrava un'altra cosa rispetto alla sezione da cui si
   entra. Adesso il foglio si SCOPRE dall'alto - come se il vetro
   venisse calato - e sale appena. */
@keyframes saleFoglio{
  0%  { opacity:0; translate:0 30px; clip-path:inset(0 0 100% 0) }
  22% { opacity:1 }
  100%{ opacity:1; translate:0 0;    clip-path:inset(0 0 0 0) }
}

/* ==================================================================
   LA SCHEGGIA VIVE QUI, NON PIU' SULLA SEZIONE
   Sulla sezione del portfolio l'evento e' la crepa che attraversa lo
   schermo: mettere anche un pezzo di vetro fermo li' accanto voleva
   dire due oggetti della stessa materia che chiedono attenzione nello
   stesso istante. La scheggia si e' spostata dentro, dove non ha
   concorrenza: sta sul fondo della colonna, grande, e scende piano
   mentre si legge - due velocita' diverse, quella del testo e quella
   del vetro, che e' il modo piu' semplice di dare profondita' senza
   disegnare niente in piu'.
   Sta molto indietro, spenta: deve accompagnare, non farsi guardare.
   ================================================================== */
.lettura{ position:relative }
.lettura::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  /* IN FONDO, NON IN CIMA.
     Stava all'inizio della colonna, dove pero' lo spazio a destra e'
     gia' occupato dalle schede. Il vuoto vero e' in fondo: accanto al
     pannello che chiede "c'e' qualcosa che vorresti creare" resta
     mezza pagina di niente, ed e' li' che un pezzo di vetro ha senso.
     Ancorata al fondo della colonna, non alla cima: cosi' resta
     accanto alla chiusa qualunque sia la lunghezza della stanza. */
  right:-4%; top:auto; bottom:14vh;
  width:min(52vw,720px); aspect-ratio:384/510;
  background:url(/foto/schegge/scheggia-01.webp) center/contain no-repeat;
  /* QUANTO SI DEVE VEDERE.
     Al 22 per cento era quasi invisibile: sul fondo scuro della
     stanza un vetro semitrasparente sparisce, perche' e' fatto di
     luce debole e sotto non c'e' niente che la rimandi indietro.
     A meta' si vede che c'e' senza rubare la riga che stai leggendo,
     e il bagliore attorno lo stacca dal fondo invece di lasciarlo
     annegare. */
  opacity:.5;
  filter:drop-shadow(0 0 60px rgba(var(--teal-rgb),.45))
         drop-shadow(0 18px 50px rgba(0,0,0,.5))
         brightness(1.12);
  animation:scheggiaScende linear both;
  animation-timeline:scroll(root block);
}
@keyframes scheggiaScende{
  from{ translate:0 -12vh; rotate:-6deg }
  to  { translate:0 26vh;  rotate:5deg }
}
/* ==================================================================
   LE RIGHE DI PROMPT, DIETRO IL TESTO
   Qui prima c'erano i fili di luce (fuori tema) e poi tre schegge che
   si muovevano in blocco (ripetitive). Adesso ci sono le RIGHE: glifi
   luminosi disposti come un testo vero, con le righe di lunghezza
   diversa. E' l'unico elemento che dice "prompt" senza doverlo
   spiegare, ed e' nella stanza che parla di prompt.
   Stanno molto indietro e molto spente: sono la materia dell'aria di
   questa stanza, non un oggetto da guardare. Scendono piu' lente del
   testo, che e' quello che le mette dietro invece che sopra.
   Due copie a velocita' diverse, una ribaltata: cosi' non si
   riconosce la ripetizione della stessa immagine.
   ================================================================== */
.r-prompt .lettura{ position:relative }
.r-prompt .lettura::after{
  content:""; position:absolute; inset:0; z-index:0;
  pointer-events:none;
  background:
    url(/foto/elementi/codici-1.webp) right -6% top 6% / 52% auto no-repeat,
    url(/foto/elementi/codici-2.webp) left -10% top 54% / 44% auto no-repeat;
  opacity:.3;
  filter:drop-shadow(0 0 26px rgba(var(--violet-rgb),.35));
  animation:righeScendono linear both;
  animation-timeline:scroll(root block);
}
@keyframes righeScendono{
  from{ background-position: right -6% top 2%, left -10% top 62% }
  to  { background-position: right -2% top 22%, left -14% top 44% }
}
@media (max-width:900px), (max-aspect-ratio: 3/4){
  /* in colonna il testo occupa tutto: le righe restano ai bordi,
     piccole, o diventano rumore sotto le parole */
  .r-prompt .lettura::after{
    background-size:70% auto, 60% auto;
    opacity:.17;
  }
}
@media (prefers-reduced-motion: reduce){
  .r-prompt .lettura::after{ animation:none }
}

/* Le finestre di interfaccia stavano qui, nella stanza press, e sono
   state tolte: senza riflessi non sembrano vetro, sembrano il disegno
   di un vetro - e in una scena dove tutto il resto e' vetro vero la
   differenza si sente subito. I file restano in
   prove/foto/elementi/finestre-1.webp: se un giorno ne arriva una
   versione con i riflessi, il posto e' gia' deciso. */

/* ==================================================================
   IL CURSORE, UNA VOLTA SOLA, DOVE SI CHIEDE DI SCRIVERE
   Di tutti gli elementi nuovi questo e' il piu' riconoscibile in un
   decimo di secondo, ed e' proprio per questo che ne basta uno: un
   simbolo forte ripetuto smette di essere un simbolo e diventa una
   texture.
   Sta nella stanza dei contatti, accanto al pannello che chiede di
   scrivere. Non decora la pagina: dice "qui si scrive", ed e' l'unico
   punto del sito in cui quella frase e' vera.
   Lampeggia come un cursore vero - acceso, spento - e il tempo e'
   quello di un cursore di sistema, poco piu' di un secondo.
   ================================================================== */
.r-contatti .lettura .blocco:last-of-type{ position:relative }
.r-contatti .lettura .blocco:last-of-type::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  right:6%; top:18%;
  width:min(9vw,120px); aspect-ratio:1;
  background:url(/foto/elementi/cursore-1.webp) center/contain no-repeat;
  opacity:.75;
  filter:drop-shadow(0 0 34px rgba(var(--teal-rgb),.6));
  animation:cursoreBatte 1.15s steps(1,end) infinite;
}
@keyframes cursoreBatte{
  0%,55%  { opacity:.75 }
  56%,100%{ opacity:.12 }
}
@media (max-width:900px), (max-aspect-ratio: 3/4){
  /* in colonna finirebbe sopra le parole: si sposta in alto a destra
     e si fa piccolo */
  .r-contatti .lettura .blocco:last-of-type::before{
    right:2%; top:-4%; width:min(18vw,70px); opacity:.5;
  }
}
@media (prefers-reduced-motion: reduce){
  .r-contatti .lettura .blocco:last-of-type::before{ animation:none; opacity:.6 }
}

/* le altre stanze hanno gia' il loro elemento sul foglio: qui no */
.r-prompt .lettura::before,
.r-blog .lettura::before,
.r-press .lettura::before,
.r-contatti .lettura::before{ display:none }

@media (max-width:900px), (max-aspect-ratio: 3/4){
  /* in colonna il vetro passerebbe dietro il testo per tutta la
     pagina: si fa piu' piccolo e resta appoggiato al bordo */
  .lettura::before{ width:min(70vw,380px); right:-16%; opacity:.34 }
}
@media (prefers-reduced-motion: reduce){
  .lettura::before{ animation:none; translate:none; rotate:none }
}

/* ==================================================================
   LA STESSA MATERIA DELLA SEZIONE, DENTRO LA STANZA
   Fuori, alla porta, arriva un pezzo di vetro. Dentro, quel vetro
   continua: si incrina sul foglio mentre lo leggi, e sparisce.
   Non e' una decorazione ripetuta - e' la stessa cosa che ti ha
   accompagnato fin qui, che fa il passo successivo.
   Ogni stanza ha il suo elemento, come ogni sezione: se fosse lo
   stesso in tutte e cinque diventerebbe carta da parati.
   Si fonde per schiarimento: questi file sono luce su trasparenza,
   e il nero non deve coprire il vetro sotto, deve solo accendersi.
   ================================================================== */
.foglio::before{
  content:""; position:absolute; inset:0; z-index:3;
  pointer-events:none; border-radius:inherit;
  background:var(--dentro) center/cover no-repeat;
  mix-blend-mode:screen; opacity:0;
  animation:incrina linear both;
  animation-timeline:view(block);
  animation-range:entry 8% entry 74%;
}
@keyframes incrina{
  0%  { opacity:0;   scale:1.10 }
  38% { opacity:.78; scale:1 }
  68% { opacity:.5 }
  100%{ opacity:0;   scale:.97 }
}
/* ognuna la sua, e continua quella della sua sezione */
.stanza-a           { --dentro:url(/foto/elementi/crepe-1.webp) }
/* LA LASTRA SCRITTA, SUI PANNELLI DEL PROMPT.
   E' l'unico elemento che unisce le due materie del sito - il vetro e
   i caratteri - in un oggetto solo: un pezzo di schermo rotto con il
   codice inciso sopra. Passando sul pannello mentre entra, dice
   quello che la stanza contiene senza scriverlo.
   Il nastro resta fuori, all'arrivo della sezione: dentro serviva
   qualcosa che si posasse, non che attraversasse. */
.stanza-a.r-prompt  { --dentro:url(/foto/elementi/lastra-codici-1.webp) }
/* nel blog il sipario usa gia' le schegge: se anche i pannelli
   avessero la stessa immagine, la stessa cosa comparirebbe due volte
   in ogni schermata. Qui passa la scia, che e' l'elemento della sua
   sezione. */
.stanza-a.r-blog    { --dentro:url(/foto/elementi/04-scia-particelle-A.webp) }
.stanza-a.r-press   { --dentro:url(/foto/elementi/crepe-2.webp) }
.stanza-a.r-contatti{ --dentro:url(/foto/elementi/schizzo-1.webp) }

@media (prefers-reduced-motion: reduce){
  .foglio::before{ animation:none; opacity:0 }
  .foglio{ animation:none; opacity:1; translate:none; clip-path:none }
}

/* ==================================================================
   STANZA B - IL PASSAGGIO E IL CORRIDOIO
   Il pannello parte piccolo, grande quanto una lastra, e si allarga
   fino a riempire lo schermo. Dentro il pannello c'e' gia' l'altra
   stanza: quando ha finito di allargarsi, l'altra stanza E' lo schermo.
   Non e' un cambio di pagina travestito: e' lo stesso scorrimento.
   ================================================================== */
.passaggio{ position:relative; height:230vh; height:230lvh; z-index:2 }
.passaggio-dentro{
  position:sticky; top:0; height:100lvh; overflow:hidden;
  display:grid; place-items:center;
  perspective:1500px;
}
/* il mozzo si spegne mentre il pannello si apre */
.mozzo{
  position:absolute; inset:0; overflow:hidden;
  animation:spegniMozzo linear both;
  animation-timeline:view(block); animation-range:contain 0% contain 58%;
}
.mozzo video{ width:100%; height:100%; object-fit:cover }
@keyframes spegniMozzo{ 0%,55%{ opacity:1 } 100%{ opacity:0 } }

.varco{
  position:relative; z-index:3;
  width:17vw; aspect-ratio:16/10; border-radius:14px; overflow:hidden;
  animation:apriVarco cubic-bezier(.5,0,.35,1) both;
  animation-timeline:view(block); animation-range:contain 0% contain 72%;
}
.varco video{ width:100%; height:100%; object-fit:cover }
@keyframes apriVarco{
  0%  { width:17vw;  border-radius:14px }
  100%{ width:150vw; border-radius:0 }
}
.varco-bordo{
  position:absolute; inset:0; z-index:4; pointer-events:none;
  border:1px solid rgba(var(--violet-rgb),.95); border-radius:inherit;
  box-shadow:0 0 40px rgba(var(--violet-rgb),.6),
             inset 0 0 40px rgba(var(--violet-rgb),.16);
  animation:sfuma linear both;
  animation-timeline:view(block); animation-range:contain 40% contain 78%;
}
@keyframes sfuma{ from{ opacity:1 } to{ opacity:0 } }
.dicitura{
  position:absolute; z-index:5; left:50%; bottom:9vh; translate:-50% 0;
  margin:0; font-family:var(--m); font-size:12px; letter-spacing:.22em;
  text-transform:uppercase; color:#CFC3FF; white-space:nowrap;
  text-shadow:0 1px 8px rgba(4,5,9,1);
  animation:sfuma linear both;
  animation-timeline:view(block); animation-range:contain 26% contain 56%;
}

/* il corridoio: le lastre si alternano, una a sinistra e una a destra,
   e arrivano da lontano invece che dal basso. Qui non si scorre una
   pagina: si attraversa uno spazio. */
.corridoio{ position:relative; z-index:2; padding:8vh 0 24vh; perspective:1500px }
.lastra{
  width:min(560px,86vw); padding:28px 28px 32px; margin:0 0 12vh;
  animation:arrivaDaLontano linear both;
  animation-timeline:view(block); animation-range:entry 2% entry 66%;
}
.lastra.sx{ margin-left:5vw; rotate:y 8deg }
.lastra.dx{ margin-left:auto; margin-right:5vw; rotate:y -8deg }
@keyframes arrivaDaLontano{
  from{ opacity:0; scale:.72; translate:0 60px; filter:blur(6px) }
  to  { opacity:1; scale:1;   translate:0 0;    filter:blur(0) }
}

/* --- il ritorno, e la targhetta del banco --- */
/* IL TASTO DELLA FINE. Chi ha letto tutto non deve cercare niente:
   sta li', grande, dove finisce l'ultima riga. */
.continua{
  /* le misure stanno nel sistema: qui solo lo stacco dal testo */
  margin:2vh 0 0;
}
.quale{
  position:fixed; left:14px; bottom:12px; z-index:9; margin:0;
  font-family:var(--m); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:#9A9AA8;
  background:rgba(6,6,14,.7); padding:7px 12px; border-radius:999px;
}

/* ==================================================================
   IL TELEFONO E' UN'ALTRA STANZA, NON LA STESSA PIU' STRETTA.
   Sul largo si legge a sinistra e si guarda a destra, e in mezzo resta
   lei. Su uno schermo di trecentonovanta punti quella fascia in mezzo
   non esiste: il testo occupa tutto, e qualunque cosa "fissa" ci
   finisce sopra.
   Quindi qui si cambia impianto, non misure: le schede smettono di
   essere fisse, tornano nel flusso, e ognuna sta SOPRA il suo testo.
   Si scorre e si incontrano una alla volta - che e' esattamente lo
   stesso racconto, raccontato in verticale.
   ================================================================== */
@media (max-width:900px), (max-aspect-ratio: 3/4){
  .scheda{
    position:static; width:auto; max-width:none;
    transform:none; translate:none; scale:none;
    animation:none; opacity:1;
    margin:0 0 2.2vh; padding:8px 8px 12px;
  }
  .scheda .foto{ aspect-ratio:16/9 }
  .scheda .nome{
    font-size:clamp(15px,4.4vw,20px); line-height:1.25; margin-top:10px;
  }
  .scheda .num{ left:16px; top:14px; font-size:11px }

  .blocco{ padding:0 4vw }
  /* sul telefono il vetro si assottiglia: meno bordo, meno imbottitura,
     piu' spazio alle parole. E la riga resta sotto le 42 battute, che
     e' la misura in cui su uno schermo stretto si legge senza fatica. */
  /* UNO STACCO FRA LA SCHEDA E IL SUO TESTO.
     Le due lastre si toccavano per una manciata di punti e sembravano
     una incollata all'altra. Ventisei punti di aria bastano perche' si
     leggano come due oggetti distinti - la cosa, e quello che se ne
     dice. */
  /* MENO ARIA. Fra la fotografia e il pannello c'erano ventinove
     punti, e dentro il pannello ventidue sopra e ventiquattro sotto:
     su uno schermo alto quarantacinque righe ogni spazio si somma, e
     quello che si legge come "vuoto" e' spazio tolto alle parole. */
  .blocco .testo{
    width:auto; max-width:42em;
    margin:16px 0 0; padding:17px 16px 19px;
  }
  /* IL FOGLIO SALE DI MENO.
     Entrando, il testo saliva di quarantasei punti: sul largo parte da
     sotto e non incontra niente, in colonna invece per tutto il tratto
     dell'entrata passa sopra la scheda che ha subito sopra di se'.
     Qui non sale piu' per niente: appare e basta. In verticale il
     movimento ce l'ha gia' lo scorrimento, e un testo che si sovrappone
     all'immagine mentre arriva si legge male anche solo per un
     istante. */
  .foglio{ animation-name:saleFoglioStretto }
  @keyframes saleFoglioStretto{
    from{ opacity:0; scale:.995 }
    to  { opacity:1; scale:1 }
  }
  .riga{ font-size:16px; line-height:1.58 }
  /* un titolo sta vicino a quello che titola, se no non si capisce
     piu' che parla di quello: dieci punti sotto l'occhiello e dodici
     sotto il titolo, invece di sedici */
  .tit{ font-size:clamp(22px,6.4vw,30px); margin-bottom:12px }
  .eti{ font-size:10px; letter-spacing:.16em; margin-bottom:7px }
  .tecnica,.fonte{ font-size:11.5px }
  .b1,.b2,.b3,.b4{ min-height:0; padding-bottom:6vh }
  .lettura{ padding:0 0 16vh }

  .titolone{ top:14vh; font-size:clamp(38px,13vw,78px) }
  .occhiello{ top:auto; bottom:26vh; max-width:92vw }
  .scendi{ top:auto; bottom:12vh }
  .lato-dx .titolone,.lato-dx .occhiello,.lato-dx .scendi{ left:5vw; right:auto }
  .scendi,.continua{ animation-duration:2.8s }
  .lato-dx .occhiello{ text-align:left }
  .lato-dx .blocco .testo{ margin-left:0 }

  /* il velo torna verticale: scuro sopra e sotto, dove passano le
     parole, e trasparente in mezzo dove sta lei */
  .velo, .lato-dx .velo{
    background:linear-gradient(180deg,
      rgba(4,5,10,.72) 0%, rgba(4,5,10,.30) 32%,
      rgba(4,5,10,.30) 62%, rgba(4,5,10,.80) 100%);
  }

  .lastra{ width:90vw; margin-left:5vw; margin-right:5vw; rotate:none }
  .lastra.dx{ margin-left:5vw }
  .varco{ width:44vw }
}
@media (prefers-reduced-motion: reduce){
  .scheda,
  .foglio,.lastra,.varco,.mozzo,.varco-bordo,.dicitura,.fondale video{
    animation:none; opacity:1; scale:none; translate:none; filter:none }
  .varco{ width:100vw }
  .mozzo{ display:none }
  html{ scroll-behavior:auto }
}


/* ==================================================================
   LE ALTRE QUATTRO STANZE
   Stessa macchina, quattro stanze diverse. Quello che cambia e' dove
   ti aspetta la barra di vetro col testo: NON sempre a sinistra, ma
   dalla parte in cui sta il nome della sezione nella scena. Chi entra
   da Prompt trova le parole dove aveva appena letto "Prompt", e non
   deve cercarle dall'altra parte dello schermo.

     Portfolio  nome a sinistra, in mezzo   -> testo a sinistra
     Prompt     nome a destra, in alto      -> testo a DESTRA
     Blog       nome a sinistra, in basso   -> testo a sinistra
     Press      nome al centro-destra       -> testo a DESTRA
     Contatti   nome a sinistra, in cima    -> testo a sinistra

   E siccome quattro stanze uguali sarebbero una sola stanza ripetuta
   quattro volte, in ognuna cambia anche il giro delle schede: da che
   angolo aspettano, dove si mettono quando tocca a loro, e quanto si
   fanno grandi.
   ================================================================== */
.lato-dx .blocco .testo{ margin-left:auto }
.lato-dx .titolone,
.lato-dx .occhiello,
.lato-dx .scendi{ left:auto; right:3.5vw }
.lato-dx .occhiello,
.lato-dx .scendi{ right:3.7vw }
.lato-dx .occhiello{ text-align:right }
/* il velo si specchia: denso dove passano le parole, trasparente dove sta lei */
.lato-dx .velo{
  background:linear-gradient(270deg,
    rgba(4,5,10,.80) 0%, rgba(4,5,10,.55) 34%,
    rgba(4,5,10,.10) 56%, rgba(4,5,10,0) 72%);
}

/* --- PROMPT. Testo a destra, schede a sinistra: aspettano in basso
       e in alto a sinistra, e vengono avanti al centro-sinistra. --- */
.r-prompt{ --tt:26vh }
.r-prompt .scheda{ --sx:30vw; --sy:42vh; --grande:2.2 }

/* --- BLOG. Testo a sinistra e piu' in basso, come il suo nome nella
       scena. Le schede si fanno le piu' grandi di tutte: qui il
       contenuto sono le copertine. --- */
.r-blog{ --tt:40vh }
.r-blog .scheda{ --sx:72vw; --sy:52vh; --grande:2.5 }

/* --- PRESS. Il nome sta al centro-destra e in cima: il testo va a
       destra, e le schede prendono tutta la sinistra. Due aspettano
       in alto affiancate, una in basso: e' una bacheca. --- */
.r-press{ --tt:12vh }
.r-press .scheda{ --sx:26vw; --sy:56vh; --grande:2.3 }

/* --- CONTATTI. Il nome sta in cima a sinistra: il testo resta li', e
       le schede convergono da tre angoli diversi verso destra. --- */
.r-contatti{ --tt:12vh }
.r-contatti .scheda{ --sx:76vw; --sy:44vh; --grande:2.4 }

@media (max-width:900px), (max-aspect-ratio: 3/4){
  .lato-dx .blocco .testo{ margin-left:0 }
  .lato-dx .titolone,.lato-dx .occhiello,.lato-dx .scendi{ left:5vw; right:auto }
  .lato-dx .occhiello{ text-align:left }
  .r-prompt .scheda,.r-blog .scheda,.r-press .scheda,.r-contatti .scheda{
    --sx:50vw; --sy:20vh; --qx:22vw; --qy:88vh }
  .r-prompt .sch2,.r-blog .sch2,.r-press .sch2,.r-contatti .sch2{ --qx:50vw }
  .r-prompt .sch3,.r-blog .sch3,.r-press .sch3,.r-contatti .sch3{ --qx:78vw }
}

@media (prefers-reduced-motion: reduce){
  .scendi::after,.continua::after{ animation:none; opacity:.9 }
}

@media (prefers-reduced-motion: reduce){
  .scendi,.continua{ animation:none; translate:none }
}


/* ==================================================================
   I PULSANTI DEI SOCIAL.
   Niente loghi ridisegnati a mano: un logo storto si nota subito e
   fa sembrare finto tutto il resto. Qui sono pastiglie con il nome
   scritto, nello stesso carattere di tutto il sito, con un punto
   luminoso davanti come i nodi della rete - la stessa lingua che il
   sito parla gia' dappertutto.
   Instagram e' l'unico verde acqua: e' il canale da cui arrivano
   davvero le guide, e il verde in questo sito vuol dire "di qui si
   passa". Gli altri sono viola come tutto il resto del vetro.
   ================================================================== */
.social{
  display:flex; flex-wrap:wrap; gap:8px;
  justify-content:flex-start; align-items:center;
  margin-top:12px;
}
.soc{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--m); font-size:11px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; text-decoration:none;
  padding:7px 13px; border-radius:999px;
  color:#CDBCFF;
  border:1px solid rgba(var(--violet-rgb),.45);
  background:linear-gradient(180deg, rgba(8,7,16,.80), rgba(4,4,10,.90));
  transition:border-color .25s ease, color .25s ease, transform .25s ease;
}
.soc b{
  width:6px; height:6px; border-radius:50%;
  background:currentColor; box-shadow:0 0 9px currentColor;
}
.soc:hover{ transform:translateY(-2px); border-color:rgba(var(--violet-rgb),.95); color:#E4DAFF }
.soc-ig{
  color:#7BFFE4; border-color:rgba(var(--teal-rgb),.6);
}
.soc-ig:hover{ border-color:rgba(var(--teal-rgb),1); color:#B4FFF0 }
.soc-grande{
  margin:2vh 0 0; font-size:13px; padding:15px 24px;
}
@media (max-width:900px), (max-aspect-ratio: 3/4){
  .social{ gap:7px; margin-top:10px; justify-content:flex-start }
  .soc{ font-size:10.5px; padding:9px 13px; gap:7px; letter-spacing:.08em }
  .soc-grande{ font-size:12px; padding:14px 18px }
}


/* ==================================================================
   LE SCHEDE DELLA STANZA SONO LE STESSE DELLA SEZIONE.
   Chi guarda una sezione vede quattro lastre in quattro punti
   precisi. Se entrando nella stanza ne trovasse altre, in altri
   posti, il passaggio non racconterebbe niente: sarebbero due
   stanze diverse messe in fila.
   Qui ogni stanza riceve le coordinate esatte della sua sezione,
   una per una. Si entra, e le schede sono dove le avevi lasciate:
   poi si ritirano sullo sfondo e vengono avanti a turno.
   ================================================================== */
/* BLOG: stesse coordinate delle lastre della sezione */
.r-blog .sch1{ --x:89vw; --y:41vh; --incl:  9deg; --mio:--b1;
              --r-arrivo:contain  8% contain 46%; --ritardo:0s }
.r-blog .sch2{ --x:70vw; --y:66vh; --incl:-11deg; --mio:--b2;
              --r-arrivo:contain 14% contain 52%; --ritardo:-1.2s }
.r-blog .sch3{ --x:47vw; --y:55vh; --incl:-13deg; --mio:--b3;
              --r-arrivo:contain 20% contain 58%; --ritardo:-2.4s }
.r-blog .sch4{ --x:41vw; --y:86vh; --incl:-10deg; --mio:--b4;
              --r-arrivo:contain 26% contain 64%; --ritardo:-3.6s }
/* CONTATTI: stesse coordinate delle lastre della sezione */
.r-contatti .sch1{ --x:56vw; --y:60vh; --incl:  9deg; --mio:--b1;
              --r-arrivo:contain  8% contain 46%; --ritardo:0s }
.r-contatti .sch2{ --x:74vw; --y:52vh; --incl:-11deg; --mio:--b2;
              --r-arrivo:contain 14% contain 52%; --ritardo:-1.2s }
.r-contatti .sch3{ --x:66vw; --y:84vh; --incl:-13deg; --mio:--b3;
              --r-arrivo:contain 20% contain 58%; --ritardo:-2.4s }
.r-contatti .sch4{ --x:89vw; --y:74vh; --incl:-10deg; --mio:--b4;
              --r-arrivo:contain 26% contain 64%; --ritardo:-3.6s }
/* PRESS: stesse coordinate delle lastre della sezione */
.r-press .sch1{ --x:54vw; --y:84vh; --incl:  9deg; --mio:--b1;
              --r-arrivo:contain  8% contain 46%; --ritardo:0s }
.r-press .sch2{ --x:64vw; --y:57vh; --incl:-11deg; --mio:--b2;
              --r-arrivo:contain 14% contain 52%; --ritardo:-1.2s }
.r-press .sch3{ --x:82vw; --y:83vh; --incl:-13deg; --mio:--b3;
              --r-arrivo:contain 20% contain 58%; --ritardo:-2.4s }
.r-press .sch4{ --x:21vw; --y:57vh; --incl:-10deg; --mio:--b4;
              --r-arrivo:contain 26% contain 64%; --ritardo:-3.6s }
/* PROMPT: stesse coordinate delle lastre della sezione */
.r-prompt .sch1{ --x:14vw; --y:48vh; --incl:  9deg; --mio:--b1;
              --r-arrivo:contain  8% contain 46%; --ritardo:0s }
.r-prompt .sch2{ --x:51vw; --y:77vh; --incl:-11deg; --mio:--b2;
              --r-arrivo:contain 14% contain 52%; --ritardo:-1.2s }
.r-prompt .sch3{ --x:64vw; --y:60vh; --incl:-13deg; --mio:--b3;
              --r-arrivo:contain 20% contain 58%; --ritardo:-2.4s }


/* LA MISURA, LASTRA PER LASTRA.
   Nella scena ogni sezione ha lastre di larghezza diversa - il
   portfolio le tiene strette, la stampa le fa larghe - e dentro una
   sezione la prima e' spesso piu' grande delle altre. Se la stanza
   le disegnasse tutte uguali, l'oggetto che hai appena guardato
   cambierebbe taglia mentre ci entri dentro: e' la stessa
   incongruenza del cambio di posto, solo meno evidente da nominare.
   Questi numeri sono, uno per uno, i --w della scena. */
.sch1,.sch2,.sch3{ --w:13vw }                                   /* portfolio */
.r-prompt .sch1{ --w:14vw }
.r-prompt .sch2,.r-prompt .sch3{ --w:13vw }
.r-blog .sch1,.r-blog .sch2,.r-blog .sch3,.r-blog .sch4{ --w:15vw }
.r-press .sch1{ --w:16vw }
.r-press .sch2{ --w:15vw }
.r-press .sch3{ --w:14vw }
.r-press .sch4{ --w:13vw }
.r-contatti .sch1{ --w:13vw }
.r-contatti .sch2{ --w:14vw }
.r-contatti .sch3{ --w:14vw }
.r-contatti .sch4{ --w:12vw }


/* ==================================================================
   IL MENU DELLA STANZA.
   Stesso oggetto del menu della scena, stessa posizione, stesso modo
   di aprirsi: chi l'ha imparato la' lo ritrova identico qui. Dentro ci
   sono le cinque stanze e la home, e la voce della stanza in cui ti
   trovi e' accesa - cosi' si sa sempre dove si e'.
   E' un <details>: si apre al tocco, senza JavaScript.
   ================================================================== */
/* IL TASTO DELLE SEZIONI STA IN ALTO, ED E' GRANDE.
   In basso a destra era piccolo e finiva addosso a tutto quello che
   scorre in fondo allo schermo: e' il tasto che porta da qualsiasi
   parte all'altra del sito, e stava dove non lo trovava nessuno.
   Adesso e' in alto a sinistra - la lingua tiene l'angolo destro,
   cosi' non si pestano - ed e' il bersaglio piu' grande dello
   schermo dopo i contenuti. */
/* ==================================================================
   I DUE TASTI IN ALTO SONO UNA COPPIA, E SI VEDE.

   Erano due oggetti diversi messi vicini: le sezioni una pastiglia
   larga e alta, la lingua una pasticca piccola, e quella piccola
   stava nell'angolo. Due cose che fanno la stessa famiglia di gesti -
   spostarsi - devono avere la stessa forma, se no si leggono come una
   principale e una di servizio.
   Adesso hanno la stessa larghezza e la stessa altezza, scritte una
   volta sola qui sotto, e sono INVERTITI: le sezioni prendono
   l'angolo, la lingua le sta a sinistra. Il tasto che si preme piu'
   spesso sta dove il pollice arriva senza pensarci, cioe' nello
   spigolo.
   ================================================================== */
:root{ --tasto-w:148px; --tasto-h:46px; --tasto-bordo:18px; --tasto-stacco:10px }
.menu{ position:fixed; right:var(--tasto-bordo); top:14px; z-index:40 }
.menu summary{
  list-style:none; cursor:pointer;
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--m); font-size:13px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:#EAFFFA;
  justify-content:center;
  width:var(--tasto-w); min-height:var(--tasto-h);
  padding:0 14px; border-radius:999px;
  border:1px solid rgba(var(--teal-rgb),.55);
  background:linear-gradient(180deg, rgba(8,7,16,.86), rgba(4,4,10,.94));
  box-shadow:0 14px 34px rgba(0,0,0,.55);
}
.menu summary::-webkit-details-marker{ display:none }
.menu summary b{
  width:7px; height:7px; border-radius:50%;
  background:var(--teal); box-shadow:0 0 10px rgba(var(--teal-rgb),.9);
  animation:respiraMenu 2.6s ease-in-out infinite;
}
@keyframes respiraMenu{ 0%,100%{ opacity:.4 } 50%{ opacity:1 } }
.menu[open] summary b{ animation:none; opacity:.45 }
.menu nav{
  /* il tasto sta in alto: la tendina scende, non sale */
  position:absolute; right:0; top:calc(100% + 9px);
  min-width:214px; padding:9px;
  border-radius:16px;
  border:1px solid rgba(var(--violet-rgb),.42);
  /* LEGGERA TRASPARENZA, VOLUTA.
     Era quasi opaco: la tendina sembrava un cartoncino incollato
     sopra il sito. Adesso lascia intravedere quello che copre - la
     scena continua a esistere dietro - e la sfocatura sul fondo tiene
     le voci leggibili lo stesso. Senza sfocatura la trasparenza
     mangia il testo, con la sfocatura no: e' quella a fare il lavoro,
     non l'opacita'. */
  background:linear-gradient(180deg, rgba(8,7,16,.74), rgba(4,4,10,.82));
  backdrop-filter:blur(20px) saturate(1.1);
  -webkit-backdrop-filter:blur(20px) saturate(1.1);
  box-shadow:0 24px 60px rgba(0,0,0,.66);
}
.menu nav a{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:10px;
  font-family:var(--m); font-size:11.5px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; color:#CFCFDA;
}
.menu nav a b{
  width:7px; height:7px; border-radius:50%;
  background:var(--teal); box-shadow:0 0 9px rgba(var(--teal-rgb),.85);
}
.menu nav a b.v{ background:var(--violet); box-shadow:0 0 9px rgba(var(--violet-rgb),.85) }
.menu nav a:hover{ background:rgba(255,255,255,.06); color:#fff }
/* la stanza in cui sei: accesa, e non ci si clicca sopra per sbaglio */
.menu nav a.qui{ color:#fff; background:rgba(var(--teal-rgb),.12) }
/* la home chiude l'elenco ed e' verde come tutto cio' che porta avanti */
.menu .menu-su{
  margin-top:7px; padding-top:12px;
  border-top:1px solid rgba(var(--teal-rgb),.28);
  color:#EAFFFA; background:linear-gradient(180deg, rgba(var(--teal-rgb),.16), transparent);
}
.menu .menu-su:hover{ background:linear-gradient(180deg, rgba(var(--teal-rgb),.3), transparent) }
@media (max-width:900px), (max-aspect-ratio: 3/4){
  :root{ --tasto-w:150px; --tasto-h:50px; --tasto-bordo:14px; --tasto-stacco:10px }
  .menu{ right:var(--tasto-bordo); top:14px; left:auto; bottom:auto }
  .menu summary{ padding:0 12px; font-size:12px }
  .menu nav{ min-width:196px }
  .menu nav a{ font-size:11px; padding:11px 12px }
}
@media (prefers-reduced-motion: reduce){ .menu summary b{ animation:none } }

/* ==================================================================
   LA SCHEDA CHE E' UN FILMATO.
   Un triangolo dentro un cerchio, in mezzo al fotogramma: e' il segno
   che tutti riconoscono, e non ha bisogno di una parola per essere
   capito. Sotto, una riga che dice dove porta.
   Il cerchio respira piano invece di lampeggiare: un video non ha
   fretta, sta li' e aspetta di essere premuto.
   ================================================================== */
.scheda.filmato{ cursor:pointer; text-decoration:none; display:block }
.scheda .foto{ position:relative }
.scheda .play{
  position:absolute; left:50%; top:50%; translate:-50% -50%;
  width:22%; aspect-ratio:1; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(6,10,14,.62);
  border:1px solid rgba(var(--teal-rgb),.9);
  box-shadow:0 0 26px rgba(var(--teal-rgb),.45), 0 6px 20px rgba(0,0,0,.5);
  animation:respiraPlay 3s ease-in-out infinite;
}
.scheda .play::after{
  content:""; display:block;
  width:0; height:0; margin-left:16%;
  border-left:.9rem solid var(--teal);
  border-top:.58rem solid transparent;
  border-bottom:.58rem solid transparent;
}
@keyframes respiraPlay{ 0%,100%{ opacity:.82 } 50%{ opacity:1 } }
.scheda.filmato:hover .play{ background:rgba(6,10,14,.85); animation:none; opacity:1 }
.dicitura-film{
  display:block; margin-top:6px; padding:0 4px;
  font-family:var(--m); font-size:11px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  color:#7BFFE4; text-shadow:0 1px 6px rgba(4,5,9,1);
}
@media (max-width:900px), (max-aspect-ratio: 3/4){
  .scheda .play{ width:19% }
  .scheda .play::after{ border-left-width:.8rem; border-top-width:.52rem; border-bottom-width:.52rem }
  .dicitura-film{ font-size:10.5px }
}
@media (prefers-reduced-motion: reduce){ .scheda .play{ animation:none } }


/* ==================================================================
   IL TEATRO: il filmato a schermo pieno, sopra la scena.
   Fondo quasi nero e nient'altro attorno, perche' quando un video
   parte tutto il resto deve sparire. Si chiude col pulsante, col
   tasto Esc, o cliccando fuori dal quadro - tre strade, cosi' non ci
   si sente chiusi dentro.
   ================================================================== */
.teatro{
  position:fixed; inset:0; z-index:200;
  display:grid; place-items:center;
  padding:clamp(14px,4vw,48px);
  background:rgba(2,3,6,.95);
  animation:apreTeatro .28s ease-out both;
}
@keyframes apreTeatro{ from{ opacity:0 } to{ opacity:1 } }
.teatro-quadro{
  position:relative; width:min(1280px, 96vw); aspect-ratio:16/9;
  border-radius:14px; overflow:hidden;
  border:1px solid rgba(var(--teal-rgb),.5);
  box-shadow:0 0 60px rgba(var(--teal-rgb),.18), 0 34px 90px rgba(0,0,0,.7);
  background:#000;
}
.teatro-quadro iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0; display:block;
}
.teatro-chiudi{
  position:absolute; right:clamp(12px,3vw,28px); top:clamp(12px,3vw,28px);
  font-family:var(--m); font-size:11.5px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  color:#EAFFFA; cursor:pointer;
  padding:11px 18px; border-radius:999px;
  border:1px solid rgba(var(--teal-rgb),.6);
  background:linear-gradient(180deg, rgba(8,7,16,.9), rgba(4,4,10,.96));
}
.teatro-chiudi:hover{ border-color:rgba(var(--teal-rgb),1) }
@media (prefers-reduced-motion: reduce){ .teatro{ animation:none } }

/* ==================================================================
   IL CATALOGO A SCHERMO PIENO.
   Stessa cornice del filmato - stesso fondo, stesso tasto per
   chiudere - perche' e' lo stesso gesto: si preme una miniatura e la
   cosa si apre grande. Cambia solo cosa c'e' dentro: al posto del
   lettore, un foglio che si volta.
   Il foglio tiene la proporzione della pagina e si adatta
   all'altezza, non alla larghezza: un catalogo verticale su un
   monitor largo deve restare leggibile, non riempire lo schermo.
   ================================================================== */
.teatro-sfoglia{ grid-template-rows:1fr auto; gap:clamp(10px,2vh,22px) }
.foglio-grande{
  width:min(1180px, 92vw); height:100%;
  background-repeat:no-repeat; background-position:50% 50%;
  background-size:contain;
  border-radius:10px;
  filter:drop-shadow(0 26px 70px rgba(0,0,0,.75));
  transition:background-image .12s linear;
}
.teatro-sfoglia .sfoglia-barra{
  display:flex; align-items:center; justify-content:center; gap:16px;
}
.teatro-sfoglia .sfoglia-conta{
  font-family:var(--m); font-size:12px; font-weight:700;
  letter-spacing:.12em; color:#CDBCFF; min-width:82px; text-align:center;
}
.teatro-sfoglia .sfoglia-prec,
.teatro-sfoglia .sfoglia-succ{
  width:46px; height:46px; border-radius:999px; cursor:pointer;
  border:1px solid rgba(var(--violet-rgb),.55);
  background:linear-gradient(180deg, rgba(8,7,16,.9), rgba(4,4,10,.96));
  position:relative;
}
/* la freccia e' disegnata con due lati di un quadrato girato: niente
   caratteri, che a questa misura si vedono sfocati */
.teatro-sfoglia .sfoglia-prec::after,
.teatro-sfoglia .sfoglia-succ::after{
  content:""; position:absolute; left:50%; top:50%;
  width:10px; height:10px; margin:-5px 0 0 -5px;
  border-left:2px solid #CDBCFF; border-bottom:2px solid #CDBCFF;
}
.teatro-sfoglia .sfoglia-prec::after{ transform:rotate(45deg) translate(1px,-1px) }
.teatro-sfoglia .sfoglia-succ::after{ transform:rotate(-135deg) translate(1px,-1px) }
.teatro-sfoglia .sfoglia-prec:hover,
.teatro-sfoglia .sfoglia-succ:hover{ border-color:rgba(var(--violet-rgb),1) }
/* Una pagina che non esiste non si preme: il tasto resta al suo posto
   - toglierlo farebbe saltare la barra di lato - ma si spegne. */
.teatro-sfoglia .sfoglia-prec:disabled,
.teatro-sfoglia .sfoglia-succ:disabled{ opacity:.28; cursor:default }

/* IL SEGNO SULLA MINIATURA.
   Sulla scheda del filmato c'e' il triangolo del play. Qui serve la
   stessa promessa, detta per un catalogo: un angolo di pagina che si
   solleva. Chi guarda capisce che sotto ce n'e' un'altra. */
.sfoglia-segno{
  position:absolute; right:8px; bottom:8px; width:26px; height:32px;
  border:1px solid rgba(var(--violet-rgb),.9);
  border-radius:3px;
  background:linear-gradient(180deg, rgba(20,14,38,.86), rgba(6,5,14,.92));
  box-shadow:0 0 14px rgba(var(--violet-rgb),.5);
}
.sfoglia-segno::after{
  content:""; position:absolute; right:-1px; top:-1px;
  width:11px; height:11px;
  background:linear-gradient(225deg, rgba(var(--violet-rgb),.95) 50%, transparent 50%);
}
.scheda.sfogliabile{ cursor:pointer; text-decoration:none; display:block }
.scheda.sfogliabile:hover .sfoglia-segno{
  border-color:rgba(var(--violet-rgb),1);
  box-shadow:0 0 22px rgba(var(--violet-rgb),.85);
}

@media (max-width:900px), (max-aspect-ratio: 3/4){
  .foglio-grande{ width:96vw }
  .teatro-sfoglia .sfoglia-prec,
  .teatro-sfoglia .sfoglia-succ{ width:52px; height:52px }
  .sfoglia-segno{ width:30px; height:37px; right:10px; bottom:10px }
}


/* ==================================================================
   IL MODULO DENTRO LA STANZA.
   Sono le stesse regole del sito, riscritte con i colori del banco:
   qui non esistono le variabili di misura del sito (--s4, --t-m e
   compagnia) e copiarle avrebbe voluto dire trascinarsi dietro mezzo
   foglio di stile per un modulo solo.
   Il vetro e' quello di tutta la scena - viola, scuro, trasparente -
   e il verde acqua resta dov'e' sempre: sul gesto che manda avanti.
   ================================================================== */
.blocco-modulo .testo{ max-width:min(680px, 92vw) }
.modulo{
  display:grid; gap:20px;
  margin-top:22px; padding-top:22px;
  border-top:1px solid rgba(var(--violet-rgb),.28);
}
.campo{ display:grid; gap:7px; position:relative }
.campo label{
  font-family:var(--m); font-size:10.5px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--soft);
  transition:color .25s ease;
}
.campo:focus-within label{ color:var(--teal) }

.campo input,.campo textarea,.campo select{
  width:100%; font-family:var(--s); font-size:15px; color:var(--testo);
  background:rgba(4,5,11,.62);
  border:1px solid rgba(var(--violet-rgb),.34);
  border-radius:10px; padding:13px 15px;
  transition:border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.campo textarea{ resize:vertical; min-height:130px; line-height:1.55 }
.campo input::placeholder,.campo textarea::placeholder{ color:rgba(169,169,180,.6) }
/* la stessa luce dei pulsanti, portata sui campi */
.campo input:focus,.campo textarea:focus,.campo select:focus{
  outline:none;
  border-color:rgba(var(--teal-rgb),.7);
  background:rgba(4,5,11,.85);
  box-shadow:0 0 0 3px rgba(var(--teal-rgb),.13), 0 0 26px -10px rgba(var(--teal-rgb),.55);
}

/* la tendina: la freccia e' nostra, quella di sistema sparisce */
.scelta{ position:relative }
.campo select{ appearance:none; -webkit-appearance:none; padding-right:42px; cursor:pointer }
.campo select option{ background:#0B0A16; color:var(--testo) }
.scelta-freccia{
  position:absolute; right:16px; top:50%; width:9px; height:9px;
  margin-top:-6px; pointer-events:none;
  border-right:1.7px solid var(--soft); border-bottom:1.7px solid var(--soft);
  transform:rotate(45deg); transition:border-color .25s ease;
}
.scelta:focus-within .scelta-freccia{ border-color:var(--teal) }

/* il contatore tace finche' non ci si avvicina davvero al limite */
.campo-conta{
  margin:0; justify-self:end;
  font-family:var(--m); font-size:11px; color:rgba(169,169,180,.6);
  opacity:0; transition:opacity .25s ease;
}
.campo-conta[data-vicino]{ opacity:1 }
.campo-conta[data-pieno]{ color:#FFB3A7; opacity:1 }

/* il guasto occupa spazio solo quando parla */
.campo-guasto{
  margin:0; font-family:var(--m); font-size:11px; line-height:1.5;
  color:#FFB3A7; display:none;
}
.campo-guasto[data-dice]{ display:block }
.campo-guasto a{ color:var(--teal) }
.modulo[data-provato] input:invalid,
.modulo[data-provato] textarea:invalid,
.modulo[data-provato] select:invalid{ border-color:rgba(255,120,100,.5) }

/* L'ESCA. Nascosta senza display:none, che certi programmi leggono
   come un segnale: qui e' fuori campo e alta un pixel. */
.esca{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; opacity:0 }

/* la spunta del consenso, disegnata: quella di sistema arriva bianca
   e apre un buco nel buio */
.campo-spunta{ grid-template-columns:auto 1fr; align-items:start; gap:12px }
.campo-spunta input{
  appearance:none; -webkit-appearance:none;
  width:21px; height:21px; margin:1px 0 0; padding:0;
  border:1px solid rgba(var(--violet-rgb),.5);
  border-radius:6px; cursor:pointer; position:relative;
  background:rgba(4,5,11,.62);
}
.campo-spunta input:checked{
  background:var(--teal); border-color:var(--teal);
  box-shadow:0 0 20px -5px rgba(var(--teal-rgb),.8);
}
.campo-spunta input:checked::after{
  content:""; position:absolute; left:6.5px; top:2.5px;
  width:5px; height:10px; border:solid #05060B;
  border-width:0 2.2px 2.2px 0; transform:rotate(43deg);
}
.campo-spunta label{
  font-family:var(--s); font-size:13.5px; font-weight:400;
  letter-spacing:0; text-transform:none; color:var(--soft);
  line-height:1.5; cursor:pointer;
}
.campo-spunta:focus-within label{ color:var(--soft) }
.campo-spunta label a{ color:var(--teal); text-underline-offset:3px }
.campo-spunta .campo-guasto{ grid-column:1 / -1 }

.modulo-fondo{ display:flex; flex-wrap:wrap; align-items:center; gap:16px; padding-top:4px }
/* Il pulsante che manda e' verde acqua e pulsa come gli altri gesti
   che portano avanti: e' la stessa promessa, nello stesso colore. */
.modulo .bottone{
  font-family:var(--m); font-size:12.5px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  padding:15px 24px; border-radius:999px; cursor:pointer;
  color:#EAFFFA;
  border:1px solid rgba(var(--teal-rgb),.9);
  background:linear-gradient(180deg, rgba(var(--teal-rgb),.26), rgba(5,10,12,.72));
  text-shadow:0 1px 6px rgba(4,5,9,1);
  transition:border-color .25s ease, transform .25s ease;
}
.modulo .bottone:hover{ border-color:rgba(var(--teal-rgb),1); transform:translateY(-1px) }
.modulo-stato{
  margin:0; font-family:var(--m); font-size:11.5px; line-height:1.5;
  color:var(--soft); flex:1; min-width:16ch;
}
.modulo-stato[data-esito="ok"]{ color:var(--teal) }
.modulo-stato[data-esito="no"]{ color:#FFB3A7 }
.modulo[data-invio] .bottone{ opacity:.55; pointer-events:none }

/* Riuscito: il modulo si ritira e resta il messaggio. */
.modulo[data-fatto]{
  display:grid; place-items:center; text-align:center;
  min-height:220px; gap:12px;
}
.modulo[data-fatto] > *{ display:none }
.modulo[data-fatto]::before{
  content:"Messaggio partito."; display:block;
  font-family:var(--m); font-size:20px; color:var(--teal);
  text-shadow:0 0 18px rgba(var(--teal-rgb),.35);
}
.modulo[data-fatto]::after{
  content:"Rispondo io, non un programma. Di solito entro un paio di giorni.";
  display:block; max-width:34ch;
  font-family:var(--s); font-size:13.5px; color:var(--soft);
}

@media (max-width:900px), (max-aspect-ratio: 3/4){
  .blocco-modulo .testo{ max-width:none }
  .modulo{ gap:17px }
  .campo input,.campo textarea,.campo select{ font-size:16px }  /* sotto i 16 il telefono ingrandisce da solo */
  .modulo .bottone{ width:100%; text-align:center; justify-content:center }
  .modulo-fondo{ gap:12px }
}
@media (prefers-reduced-motion:reduce){
  .modulo *{ transition:none !important }
}


/* ==================================================================
   LA STANZA DELLA PRIVACY.
   Non ha schede, quindi non deve tenere libera la fascia di destra:
   il testo puo' prendersi la larghezza che gli serve per leggersi
   bene, che resta comunque una misura di riga e non tutto lo schermo.
   Il velo si fa piu' denso: qui si legge parecchio, e sotto lei
   continua a ruotare.
   ================================================================== */
.lettura.larga .blocco .testo{ width:min(72ch, 62vw) }
.r-privacy .velo{
  background:linear-gradient(90deg,
    rgba(4,5,10,.88) 0%, rgba(4,5,10,.74) 46%,
    rgba(4,5,10,.30) 74%, rgba(4,5,10,.05) 100%);
}
/* Il titolone della privacy sta piu' in basso: sopra non c'e' niente
   da annunciare, e cosi' non finisce addosso al suo viso. */
.r-privacy{ --tt:30vh }

/* I DATI OBBLIGATORI, IN COLONNA.
   Etichetta a sinistra, valore a destra: si scorrono con l'occhio
   senza leggerli tutti, che e' il modo in cui questi dati vengono
   davvero consultati. */
.dati-legali{ display:grid; gap:2px; margin:16px 0 4px }
.dato{
  display:grid; grid-template-columns:minmax(96px, 26%) 1fr;
  gap:14px; margin:0; padding:9px 0;
  border-top:1px solid rgba(var(--violet-rgb),.18);
}
.dato:last-child{ border-bottom:1px solid rgba(var(--violet-rgb),.18) }
.dato-eti{
  font-family:var(--m); font-size:10.5px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--soft);
  padding-top:2px;
}
.dato-val{ font-size:14.5px; color:var(--testo); line-height:1.5 }
/* l'indirizzo lo rimette insieme il browser: vedi la nota in stanze.js */
.posta-viva{ color:var(--teal); text-decoration:none; border-bottom:1px solid rgba(var(--teal-rgb),.4) }
.posta-viva:hover{ border-color:var(--teal) }

/* i collegamenti dentro il testo lungo */
.r-privacy .riga a{ color:var(--teal); text-decoration:none; border-bottom:1px solid rgba(var(--teal-rgb),.4) }
.r-privacy .riga a:hover{ border-color:var(--teal) }

@media (max-width:900px), (max-aspect-ratio: 3/4){
  .lettura.larga .blocco .testo{ width:auto }
  .dato{ grid-template-columns:1fr; gap:3px; padding:11px 0 }
  .r-privacy .velo{ background:linear-gradient(180deg, rgba(4,5,10,.78), rgba(4,5,10,.88)) }
}


/* ==================================================================
   IL CONFRONTO PRIMA / DOPO.
   Due immagini nello stesso riquadro. Quella "prima" sta sopra ed e'
   tagliata a --taglio: spostando la leva si scopre quella "dopo".
   Il taglio e' netto, con una riga di luce sul confine - se sfumasse
   non si capirebbe piu' dove finisce una e comincia l'altra, che e'
   l'unica cosa che questo riquadro deve dire.
   ================================================================== */
.confronto{
  --taglio:50%;
  position:relative; margin:18px 0 8px;
  aspect-ratio:4/3; border-radius:12px; overflow:hidden;
  border:1px solid rgba(var(--violet-rgb),.5);
  box-shadow:0 18px 44px rgba(0,0,0,.55);
  background:#070911;
}
.confronto-prima,.confronto-dopo{
  position:absolute; inset:0;
  background-size:cover; background-position:50% 50%;
}
.confronto-dopo{
  background-image:image-set(url(/foto/sanfront-dopo.avif) type("image/avif"),
                             url(/foto/sanfront-dopo.webp) type("image/webp"));
}
.confronto-prima{
  background-image:image-set(url(/foto/sanfront-prima.avif) type("image/avif"),
                             url(/foto/sanfront-prima.webp) type("image/webp"));
  /* si mostra solo la parte a sinistra del taglio */
  clip-path:inset(0 calc(100% - var(--taglio)) 0 0);
}
.confronto-maniglia{
  position:absolute; top:0; bottom:0; left:var(--taglio);
  width:2px; margin-left:-1px; pointer-events:none;
  background:rgba(var(--teal-rgb),.95);
  box-shadow:0 0 18px rgba(var(--teal-rgb),.8);
}
.confronto-maniglia::after{
  content:""; position:absolute; left:50%; top:50%;
  width:34px; height:34px; margin:-17px 0 0 -17px;
  border-radius:999px;
  border:1px solid rgba(var(--teal-rgb),.95);
  background:rgba(5,10,12,.8);
  box-shadow:0 0 22px rgba(var(--teal-rgb),.55);
}
/* La leva e' un cursore vero, invisibile ma tutto suo: si trascina
   col dito, si muove con le frecce, e col tabulatore ci si arriva. */
.confronto-leva{
  position:absolute; inset:0; width:100%; height:100%;
  margin:0; padding:0; appearance:none; -webkit-appearance:none;
  background:transparent; cursor:ew-resize;
}
.confronto-leva::-webkit-slider-thumb{
  -webkit-appearance:none; width:44px; height:100%; cursor:ew-resize; opacity:0;
}
.confronto-leva::-moz-range-thumb{
  width:44px; height:100%; border:0; opacity:0; cursor:ew-resize;
}
.confronto-leva:focus-visible{ outline:2px solid var(--teal); outline-offset:3px }

/* ---------- lo storyboard, da aprire ---------- */
.apri-grande{
  display:grid; grid-template-columns:88px 1fr auto; align-items:center; gap:14px;
  width:100%; margin:16px 0 8px; padding:10px 14px 10px 10px;
  text-align:left; cursor:pointer;
  border:1px solid rgba(var(--violet-rgb),.5); border-radius:12px;
  background:linear-gradient(180deg, rgba(8,7,16,.80), rgba(4,4,10,.90));
  transition:border-color .25s ease, transform .25s ease;
}
.apri-grande:hover{ border-color:rgba(var(--violet-rgb),1); transform:translateY(-1px) }
.apri-grande-foto{
  display:block; width:88px; height:62px; border-radius:8px;
  background-size:cover; background-position:50% 50%; background-color:#070911;
  background-image:image-set(url(/foto/sanfront-storyboard.avif) type("image/avif"),
                             url(/foto/sanfront-storyboard.webp) type("image/webp"));
}
.apri-grande-dice{ display:grid; gap:3px; min-width:0 }
.apri-grande-dice b{ font-size:13.5px; color:#fff; font-weight:600; line-height:1.3 }
.apri-grande-dice i{
  font-style:normal; font-family:var(--m); font-size:10.5px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--soft);
}
/* la lente: un cerchio e un manico, disegnati */
.apri-grande-lente{
  position:relative; width:22px; height:22px; flex:none;
}
.apri-grande-lente::before{
  content:""; position:absolute; left:0; top:0; width:15px; height:15px;
  border-radius:999px; border:1.6px solid rgba(var(--violet-rgb),.95);
}
.apri-grande-lente::after{
  content:""; position:absolute; right:2px; bottom:2px; width:8px; height:1.6px;
  background:rgba(var(--violet-rgb),.95); transform:rotate(45deg);
}

/* ---------- i tre reel ---------- */
.eti-reel{ margin-top:22px }
.reels{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:12px 0 8px }
.reel{
  display:grid; gap:8px; padding:0; text-align:left; cursor:pointer;
  background:none; border:0;
}
.reel-foto{
  position:relative; display:block; width:100%; aspect-ratio:9/16;
  border-radius:10px; background-size:cover; background-position:50% 50%;
  background-color:#070911;
  border:1px solid rgba(var(--violet-rgb),.5);
  box-shadow:0 14px 34px rgba(0,0,0,.5);
  transition:border-color .25s ease, transform .25s ease;
}
.reel:hover .reel-foto{ border-color:rgba(var(--violet-rgb),1); transform:translateY(-2px) }
.rf-1{ background-image:image-set(url(/foto/amalur-reel-1.avif) type("image/avif"), url(/foto/amalur-reel-1.webp) type("image/webp")) }
.rf-2{ background-image:image-set(url(/foto/amalur-reel-2.avif) type("image/avif"), url(/foto/amalur-reel-2.webp) type("image/webp")) }
.rf-3{ background-image:image-set(url(/foto/amalur-reel-3.avif) type("image/avif"), url(/foto/amalur-reel-3.webp) type("image/webp")) }
.reel-dice{ display:grid; gap:2px }
.reel-dice b{ font-size:12.5px; color:#fff; font-weight:600 }
.reel-dice i{
  font-style:normal; font-family:var(--m); font-size:10px;
  letter-spacing:.1em; color:var(--soft);
}

/* ---------- l'immagine a schermo pieno ---------- */
.teatro-figura{ grid-template-rows:1fr auto; gap:14px }
.figura-grande{
  width:min(1180px, 94vw); height:100%;
  background-repeat:no-repeat; background-position:50% 50%; background-size:contain;
  border-radius:10px;
  filter:drop-shadow(0 26px 70px rgba(0,0,0,.75));
}
.figura-dice{
  margin:0; text-align:center;
  font-family:var(--m); font-size:11.5px; letter-spacing:.1em; color:#CDBCFF;
}

@media (max-width:900px), (max-aspect-ratio: 3/4){
  .confronto{ aspect-ratio:3/2 }
  .reels{ grid-template-columns:repeat(3,1fr); gap:7px }
  .reel-dice b{ font-size:11.5px }
  .apri-grande{ grid-template-columns:72px 1fr auto; gap:11px }
  .apri-grande-foto{ width:72px; height:52px }
}


/* ==================================================================
   I GESTI CHE PORTANO FUORI DALLA STANZA.
   Non sono "continua a generare" - quello e' verde e vuol dire
   avanti nel percorso. Questi portano altrove: a un'intervista, a
   Instagram, al modulo. Sono viola come tutto il vetro, e la freccia
   dice dove vanno: obliqua se si esce dal sito, dritta se si resta.
   ================================================================== */
.azione-riga{ display:flex; flex-wrap:wrap; gap:10px; margin:16px 0 6px }
.fuori{
  /* porta fuori di qui: viola, e si vede che e' un'altra cosa */
  cursor:pointer;
  color:#CDBCFF;
  border:1px solid rgba(var(--violet-rgb),.55);
  background:linear-gradient(180deg, rgba(8,7,16,.80), rgba(4,4,10,.90));
}
.fuori:hover{ border-color:rgba(var(--violet-rgb),1); color:#E4DAFF; transform:translateY(-2px) }
.fuori:focus-visible{ outline:2px solid var(--teal); outline-offset:3px }
/* quando ha copiato lo dice, e per un attimo diventa verde: e' una
   cosa riuscita, e in questo sito le cose riuscite sono verdi */
.copia[data-fatto]{ color:#B4FFF0; border-color:rgba(var(--teal-rgb),.9) }

/* ---------- il ritratto per la stampa ---------- */
.ritratto-press{ margin:16px 0 10px }
.ritratto-press-foto{
  width:100%; aspect-ratio:4/5; max-width:280px;
  border-radius:12px; background-size:cover; background-position:50% 22%;
  background-color:#070911;
  border:1px solid rgba(var(--violet-rgb),.5);
  box-shadow:0 18px 44px rgba(0,0,0,.5);
  background-image:image-set(url(/foto/ritratto-press.avif) type("image/avif"),
                             url(/foto/ritratto-press.webp) type("image/webp"));
}
.ritratto-press figcaption{
  margin-top:8px; font-family:var(--m); font-size:10.5px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--soft);
}

/* ---------- i dati della generazione ---------- */
.dati-gen{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(88px, 1fr));
  gap:1px; margin:18px 0 6px;
  border:1px solid rgba(var(--violet-rgb),.4); border-radius:12px;
  overflow:hidden; background:rgba(var(--violet-rgb),.18);
}
.dati-gen span{
  display:grid; gap:3px; padding:13px 10px;
  background:linear-gradient(180deg, rgba(8,7,16,.86), rgba(4,4,10,.94));
  text-align:center;
}
.dati-gen b{
  font-family:var(--m); font-size:clamp(15px,1.5vw,19px); font-weight:700;
  color:#CDBCFF; text-shadow:0 0 16px rgba(var(--violet-rgb),.5);
}
.dati-gen i{
  font-style:normal; font-family:var(--m); font-size:9.5px;
  letter-spacing:.13em; text-transform:uppercase; color:var(--soft);
}

@media (max-width:900px), (max-aspect-ratio: 3/4){
  .fuori{ width:100%; padding:15px 18px }
  .ritratto-press-foto{ max-width:none }
  .dati-gen{ grid-template-columns:repeat(3,1fr) }
}


/* ==================================================================
   I BERSAGLI DA TOCCARE, MISURATI SUL TELEFONO.
   Non era rotto niente: era tutto un po' troppo piccolo per un dito.
   La spunta del consenso stava a 21 pixel - si prende solo di mira, e
   se si sbaglia si e' premuto il vetro; le pastiglie dei social a 33;
   le voci del menu a 35. Sotto i 44 un bersaglio si manca, e ogni
   volta che si manca si crede di aver premuto e non e' successo
   niente: e' il modo piu' silenzioso in cui un sito sembra rotto.
   La spunta cresce insieme al suo segno di spunta, se no il baffo
   resterebbe in un angolo del quadrato.
   ================================================================== */
@media (max-width:900px), (max-aspect-ratio: 3/4){
  .campo-spunta{ gap:14px; align-items:center }
  .campo-spunta input{ width:28px; height:28px; margin:0; border-radius:8px }
  .campo-spunta input:checked::after{ left:9px; top:4px; width:6px; height:13px; border-width:0 2.6px 2.6px 0 }
  .campo-spunta label{ font-size:14px }

  .soc{ min-height:44px; padding:12px 16px }
  .soc-grande{ min-height:48px }

  .menu nav a{ min-height:46px; display:flex; align-items:center }
}


/* ==================================================================
   IN BASSO NON CI SI PESTA I PIEDI.
   Due cose stanno appese in fondo allo schermo: l'etichetta della
   stanza a sinistra e il pulsante del menu a destra. Su un monitor
   c'e' spazio per tutte e due; su un telefono l'etichetta prendeva la
   riga intera e il pulsante ci finiva sopra - il nome della stanza si
   leggeva a meta' e il pulsante sembrava appoggiato sul niente.
   Adesso l'etichetta si ferma prima, e se il nome e' lungo lo taglia
   con tre puntini invece di infilarsi sotto.
   ================================================================== */
@media (max-width:900px), (max-aspect-ratio: 3/4){
  .quale{
    max-width:calc(100% - 150px);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  /* il pulsante del menu e' il gesto piu' usato di una stanza:
     merita un bersaglio da dito, non da mouse */
  .menu summary{ min-height:46px; padding:13px 20px }
}
@media (max-width:900px), (max-aspect-ratio: 3/4){
  /* chiudere e' il gesto che si cerca per primo quando una cosa si
     apre a schermo pieno: deve essere il bersaglio piu' facile */
  .teatro-chiudi{ min-height:46px; padding:14px 20px }
}


/* ==================================================================
   LO STESSO PRINCIPIO DENTRO LE STANZE.
   Vedi la nota per esteso in scena.css: in verticale le misure si
   scrivono in centesimi della larghezza, non in pixel, perche' un
   telefono in modalita' "sito desktop" dichiara 980 punti e poi
   rimpicciolisce tutto di due volte e mezzo. Qui valgono le stesse
   ragioni e gli stessi estremi.
   ================================================================== */
@media (max-width:900px), (max-aspect-ratio: 3/4){
  .titolone{ font-size:clamp(38px, 13vw, 130px) }
  .occhiello{ font-size:clamp(15px, 4.2vw, 36px); line-height:1.5 }
  .scendi, .continua{
    font-size:clamp(13px, 3.5vw, 30px);
    padding:4.5vw 6.4vw; letter-spacing:.08em;
  }

  .scheda .nome{ font-size:clamp(15px, 4.4vw, 38px); line-height:1.25 }
  .scheda .num{ font-size:clamp(11px, 2.9vw, 26px) }
  .scheda .dicitura-film{ font-size:clamp(11px, 3vw, 26px) }

  .eti{ font-size:clamp(10px, 2.7vw, 24px) }
  .tit{ font-size:clamp(26px, 8vw, 70px); line-height:1.12 }
  .riga{ font-size:clamp(15px, 4.2vw, 36px); line-height:1.55 }
  .tecnica, .fonte{ font-size:clamp(11px, 3vw, 26px); line-height:1.5 }

  /* i gesti: fuori dalla stanza, e il menu */
  .fuori{ font-size:clamp(11.5px, 3.1vw, 27px); padding:4.2vw 5.4vw }
  .soc{ font-size:clamp(10.5px, 2.8vw, 24px); padding:3.2vw 4.2vw }
  .menu summary{ font-size:clamp(12px, 3.2vw, 26px); padding:0 3vw }
  .menu nav a{ font-size:clamp(11.5px, 3.1vw, 27px); padding:3.4vw 3.6vw; min-height:0 }
  .quale{ font-size:clamp(10px, 2.6vw, 22px) }
  .teatro-chiudi{ font-size:clamp(11.5px, 3.1vw, 27px); padding:3.7vw 5.3vw; min-height:0 }

  /* il modulo */
  .campo label{ font-size:clamp(10.5px, 2.8vw, 24px) }
  .campo input,.campo textarea,.campo select{ font-size:clamp(16px, 4.3vw, 36px); padding:3.5vw 4vw }
  .campo-spunta label{ font-size:clamp(14px, 3.8vw, 32px) }
  .campo-spunta input{ width:7.5vw; height:7.5vw; min-width:28px; min-height:28px }
  .campo-guasto{ font-size:clamp(11px, 3vw, 26px) }
  .modulo .bottone{ font-size:clamp(12.5px, 3.4vw, 30px); padding:4.5vw 6vw }
  .modulo-stato{ font-size:clamp(11.5px, 3.1vw, 27px) }

  /* i dati, in privacy e in prompt */
  .dato-eti{ font-size:clamp(10.5px, 2.8vw, 24px) }
  .dato-val{ font-size:clamp(14.5px, 3.9vw, 34px) }
  .dati-gen b{ font-size:clamp(15px, 4.6vw, 40px) }
  .dati-gen i{ font-size:clamp(9.5px, 2.6vw, 22px) }
}


/* ==================================================================
   SUL TELEFONO IL MENU STA IN ALTO A DESTRA.

   In basso a destra e' il posto giusto su un monitor: la mano sta sul
   mouse, in fondo alla pagina non c'e' niente, e il pulsante non
   copre nulla. Su un telefono no: in fondo ci sono gia' la barra del
   browser, i tasti di sistema e l'etichetta della stanza, e quel
   pulsante si trova a litigare con tutti e tre per venti punti di
   schermo. In alto a destra invece lo spazio c'e' ed e' libero.
   La tendina, di conseguenza, si apre verso il basso: prima cadeva
   verso l'alto, e da li' sarebbe uscita dallo schermo.
   Sul largo non cambia niente: questa regola vive dentro il blocco
   del piccolo, e li' resta.
   ================================================================== */
@media (max-width:900px), (max-aspect-ratio: 3/4){
  .menu{ top:14px; bottom:auto; right:14px }
  .menu nav{ top:calc(100% + 9px); bottom:auto }
}


/* ==================================================================
   SUL TELEFONO IL VETRO SI FA DENSO.

   Sul largo il testo sta in una colonna che occupa meno di meta'
   schermo, e dietro passa la fascia di filmato piu' scura: il vetro
   puo' restare trasparente e la scena si vede attraverso le parole.
   In verticale non c'e' nessuna fascia scura - il filmato riempie
   tutto, lei ci passa in mezzo con i capelli rossi e i riflessi
   viola - e sotto le stesse parole passa di tutto. Il testo continua
   a esserci ma smette di leggersi, che e' peggio di non averlo messo.
   Qui il vetro diventa quasi opaco: si vede ancora che c'e' una
   lastra e non un rettangolo pieno, ma sotto le righe non passa piu'
   niente che si muova.
   ================================================================== */
@media (max-width:900px), (max-aspect-ratio: 3/4){
  .testo.foglio.vetro{
    background:linear-gradient(180deg, rgba(10,8,20,.93), rgba(5,4,12,.96));
    backdrop-filter:blur(9px);
    -webkit-backdrop-filter:blur(9px);
    border-color:rgba(var(--violet-rgb),.5);
  }
  .scheda.vetro{
    background:linear-gradient(180deg, rgba(12,9,24,.9), rgba(5,4,12,.95));
  }

  /* L'ETICHETTA DELLA STANZA SPARISCE.
     E' un'annotazione da banco - "il testo sta a destra" - e sul
     telefono si stampava sopra l'ultima riga del paragrafo. Il nome
     della stanza sta gia' scritto grande in cima; questa riga non
     aggiunge niente e toglie una riga di testo. */
  .quale{ display:none }
}
@media (max-width:900px), (max-aspect-ratio: 3/4){
  /* vedi la nota in stanze.js: scendendo si toglie, risalendo torna */
  .menu{ transition:transform .3s cubic-bezier(.4,0,.3,1), opacity .3s ease }
  html[data-nascondi] .menu:not([open]){
    transform:translateY(-180%); opacity:0; pointer-events:none;
  }
}
@media (prefers-reduced-motion: reduce){
  .menu{ transition:none }
}


/* ==================================================================
   LE SCHEDE SENZA FOTO.

   Nove schede su ventuno non hanno un'immagine: nella scena sono
   lastre di solo testo, ed e' voluto - non tutto quello che si dice
   ha una fotografia che lo dice meglio.
   Sul monitor funzionano: sono lastre piccole, sospese, e il nome ci
   sta dentro come un'etichetta. Sul telefono pero' la scheda entra
   nel flusso a tutta larghezza, e senza l'immagine dentro non resta
   niente: la lastra si schiaccia sull'altezza di una riga e il nome
   diventa una parola bianca appoggiata sul filmato, senza niente
   attorno che dica che e' una scheda. Nelle prove sembravano
   didascalie perse.
   Qui prendono un corpo loro: il numero in alto, il nome sotto, e una
   barra verticale a sinistra che le lega alla colonna del testo.
   Restano leggere - non hanno un'immagine da mostrare - ma si vede
   che sono oggetti e non parole cadute.
   ================================================================== */
@media (max-width:900px), (max-aspect-ratio: 3/4){
  .scheda.solo-testo{
    display:grid; gap:6px;
    padding:5vw 5vw 5.5vw 6.5vw;
    position:relative;
    border-left:3px solid rgba(var(--violet-rgb),.85);
  }
  .scheda.solo-testo .num{
    position:static; display:block;
    font-size:clamp(11px, 2.9vw, 26px);
    letter-spacing:.2em; color:var(--violet);
  }
  .scheda.solo-testo .nome{
    margin-top:0; padding:0;
    font-size:clamp(17px, 4.8vw, 40px); line-height:1.22; font-weight:600;
  }
  /* le pastiglie dei social stanno dentro una di queste, in contatti:
     non devono toccare il bordo della lastra */
  .scheda.solo-testo .social{ margin-top:4px }
}


/* ==================================================================
   IL PAVIMENTO DELLE ETICHETTE PICCOLE.

   Le misure in vw risolvono il problema della modalita' desktop, ma
   hanno un secondo estremo di cui non avevo tenuto conto: il minimo.
   Scritto "clamp(10px, 2.7vw, 24px)", su un telefono da 375 il conto
   fa 10,1 punti - cioe' il minimo - e l'etichetta resta piccola
   esattamente come prima. Il vw aggiusta il caso grande e lascia
   scoperto quello piccolo.
   Le righe minute di questo sito - il numero della scheda, la riga
   della data, la nota tecnica, la fonte - non sono decorazione: sono
   quelle che dicono per chi e' stato fatto un lavoro e con cosa. Da
   dodici punti in giu' su un telefono si smette di leggerle e si
   comincia a saltarle.
   ================================================================== */
@media (max-width:900px), (max-aspect-ratio: 3/4){
  .eti{ font-size:clamp(12.5px, 3.2vw, 26px); letter-spacing:.14em }
  .scheda .num{ font-size:clamp(12.5px, 3.2vw, 26px) }
  .scheda .dicitura-film{ font-size:clamp(13px, 3.3vw, 27px) }
  .tecnica, .fonte{ font-size:clamp(13px, 3.4vw, 28px); line-height:1.55 }
  .campo label{ font-size:clamp(12.5px, 3.2vw, 26px) }
  .campo-conta, .campo-guasto{ font-size:clamp(12.5px, 3.2vw, 26px) }
  .dato-eti{ font-size:clamp(12.5px, 3.2vw, 26px) }
  .dati-gen i{ font-size:clamp(11.5px, 3vw, 24px) }
  .soc{ font-size:clamp(12px, 3.1vw, 25px) }
  .ritratto-press figcaption{ font-size:clamp(12px, 3.1vw, 25px) }
  .sfoglia-conta{ font-size:clamp(13px, 3.3vw, 27px) }
  /* le voci del menu restano il bersaglio piu' premuto della stanza */
  .menu nav a{ min-height:46px }
  .menu summary{ min-height:46px }
}


/* ==================================================================
   LO SCATTO CHE NON ESISTE.
   L'immagine viene prima e la didascalia dopo, ed e' l'ordine che
   conta: si guarda un servizio fotografico di cosmetica del tutto
   normale, e solo dopo si legge che non e' mai stato fatto. Invertiti,
   non funziona - si sa gia' come va a finire e si guarda l'immagine
   cercando l'errore invece di crederci.
   ================================================================== */
.scatto-vero{ margin:18px 0 10px }
.scatto-vero-foto{
  width:100%; aspect-ratio:4/5; border-radius:12px;
  background-size:cover; background-position:50% 40%;
  background-color:#070911;
  border:1px solid rgba(var(--violet-rgb),.5);
  box-shadow:0 18px 44px rgba(0,0,0,.55);
  background-image:image-set(url(/foto/amalur-scatto.avif) type("image/avif"),
                             url(/foto/amalur-scatto.webp) type("image/webp"));
}
.scatto-vero figcaption{
  margin-top:11px; font-size:14.5px; line-height:1.55; color:var(--soft);
}
.scatto-vero figcaption::first-line{ color:#fff }

@media (max-width:900px), (max-aspect-ratio: 3/4){
  .scatto-vero figcaption{ font-size:clamp(14px, 3.8vw, 32px) }
}


/* ==================================================================
   IL TASTO DELLE SEZIONI SI VEDE.
   Era una pastiglia scura con un filo di bordo verde, appoggiata su
   un filmato che in certi punti e' quasi bianco: spariva dentro.
   Adesso ha il fondo pieno, il bordo doppio e un alone verde acqua -
   lo stesso verde che in questo sito vuol dire "di qui si passa" - e
   il pallino davanti batte piano, come tutti gli altri gesti che
   portano avanti. Resta piccolo di sagoma perche' non deve rubare la
   scena: deve solo essere trovato senza cercarlo.
   ================================================================== */
@media (max-width:900px), (max-aspect-ratio: 3/4){
  .menu summary{
    font-size:clamp(12px, 3.1vw, 26px);
    padding:4vw 5.6vw; min-height:50px;
    border:2px solid rgba(var(--teal-rgb),.85);
    background:linear-gradient(180deg, rgba(10,26,26,.96), rgba(4,8,10,.98));
    box-shadow:0 0 22px rgba(var(--teal-rgb),.42), 0 10px 26px rgba(0,0,0,.6);
    color:#EAFFFA;
  }
  .menu[open] summary{ border-color:rgba(var(--teal-rgb),1) }
  .menu summary b{
    width:9px; height:9px; border-radius:50%;
    background:var(--teal); box-shadow:0 0 12px var(--teal);
  }
}


/* ==================================================================
   ANCHE NELLE STANZE LE IMMAGINI SI VEDONO INTERE.
   Stessa ragione della scena: "cover" riempiva il riquadro buttando
   fuori i bordi, e di una scheda si vedeva il centro. Un provino di
   guardaroba o un marchio hanno il loro senso proprio ai bordi.
   Dove l'immagine non riempie resta il vetro, che e' gia' il fondo
   di tutto il resto.
   ================================================================== */
@media (max-width:900px), (max-aspect-ratio: 3/4){
  .scheda .foto{
    background-size:contain; background-repeat:no-repeat;
    background-position:50% 50%;
    background-color:rgba(4,5,11,.55);
    aspect-ratio:16/10;
  }
  /* il fotogramma di un filmato invece riempie: e' un fermo immagine
     di un video, e un video si guarda a pieno quadro */
  .scheda.filmato .foto{ background-size:cover }
}


/* ==================================================================
   IL VETRO TORNA VETRO: SI LEGGE, MA SOTTO SI VEDE LA SCENA.

   Per far leggere il testo sul filmato avevo chiuso la lastra quasi
   del tutto - novantatre per cento - e il risultato era un rettangolo
   nero appoggiato sopra la scena. Leggibile, e sbagliato: se il fondo
   non si vede piu', tanto vale non metterlo, e tutto il senso di
   questa pagina - le parole dentro la scena, non davanti - se ne va.

   La leggibilita' pero' non viene dall'opacita': viene dallo SFOCATO.
   Sotto un vetro sfocato passa la luce e passa il colore, ma non
   passa il dettaglio - e sono i dettagli, non la luminosita', a
   spezzare le lettere. Quindi qui la lastra torna trasparente e il
   lavoro lo fa un blur largo, con una densita' che cresce dall'alto
   verso il basso: leggera dove il testo e' rado, piu' chiusa in
   fondo dove le righe si infittiscono.
   ================================================================== */
@media (max-width:900px), (max-aspect-ratio: 3/4){
  .testo.foglio.vetro{
    background:linear-gradient(180deg,
      rgba(14,11,28,.58) 0%, rgba(10,8,22,.66) 42%, rgba(6,5,14,.74) 100%);
    backdrop-filter:blur(22px) saturate(1.25);
    -webkit-backdrop-filter:blur(22px) saturate(1.25);
    border-color:rgba(var(--violet-rgb),.55);
  }
  .scheda.vetro{
    background:linear-gradient(180deg, rgba(16,12,32,.52), rgba(7,6,16,.68));
    backdrop-filter:blur(16px) saturate(1.2);
    -webkit-backdrop-filter:blur(16px) saturate(1.2);
  }
  /* NIENTE FASCIA DIETRO LE IMMAGINI.
     Con l'immagine adattata intera, dove non arriva restava un
     rettangolo piu' scuro del vetro: si leggeva come una riga dietro
     la foto. Ora li' sotto c'e' semplicemente la lastra. */
  .scheda .foto{ background-color:transparent }
}


/* ==================================================================
   LA CORNICE DI VETRO TORNA, E STAVOLTA E' SUA.

   Togliendo il fondo scuro dietro le immagini - quello che faceva la
   riga scura - ho tolto anche l'unica cosa che le incorniciava: la
   foto e' rimasta appoggiata sul niente, e nella stanza del blog si
   vedeva. Il fondo scuro non era la cornice, era un ripiego che ne
   faceva le veci.
   Adesso la cornice c'e' davvero ed e' fatta di vetro: un filo viola
   attorno, un riflesso chiaro sul bordo alto - la luce che prende un
   vetro appoggiato - e un fondo appena velato, non nero. Dove
   l'immagine non arriva si intravede la scena, come deve.
   ================================================================== */
.scheda .foto{
  border:1px solid rgba(var(--violet-rgb),.45);
  background-color:rgba(10,8,22,.32);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),
             0 10px 26px rgba(0,0,0,.45);
}
@media (max-width:900px), (max-aspect-ratio: 3/4){
  .scheda .foto{
    border-width:1.5px; border-radius:10px;
    background-color:rgba(10,8,22,.32);
  }

  /* ARIA FRA UN BLOCCO E L'ALTRO.
     I pannelli si susseguivano quasi attaccati e lei restava coperta
     per tutta la lettura. Con uno stacco vero fra un blocco e il
     successivo la scena riappare fra le lastre: si continua a
     leggere, e nel mezzo si vede chi c'e' dietro. */
  .blocco{ padding-bottom:9vh }
  .blocco .testo{ margin-bottom:2vh }
  .scheda{ margin-bottom:3.4vh }
}


/* ==================================================================
   IL PIEDE DELLA STANZA.
   Chiude la lettura come la chiude il sito: i canali dove trovarla e
   le due righe che la legge chiede. Sta nel flusso, in fondo, non
   appeso allo schermo - li' non ingombra niente e lo si trova quando
   si e' finito di leggere, che e' quando serve.
   ================================================================== */
.piede-stanza{
  position:relative; z-index:2;
  display:grid; gap:14px; justify-items:center;
  padding:6vh 5vw 12vh; margin-top:2vh;
  text-align:center;
}
.piede-stanza .social{ justify-content:center }

/* IL RITORNO A CASA STA QUI, NON SOLO NELL'ANGOLO.
   Alla fine della stanza si e' finito di leggere: e' li' che si
   decide se andare avanti o tornare indietro. Il tasto per tornare
   c'era gia', ma dentro il menu appeso a un angolo dello schermo: chi
   arriva in fondo doveva staccare gli occhi da quello che stava
   leggendo e andarselo a cercare di lato. Adesso e' la prima cosa del
   piede, sopra i canali, dove lo sguardo arriva da solo.
   E' verde acqua perche' porta avanti nel percorso - il viola e' delle
   cose che cambiano il modo di leggere, non la strada. */
.torna-casa{
  /* navigazione: stessa forma dell'azione, colore piu' tenue */
  color:#EAFFFA;
  border:1px solid rgba(var(--teal-rgb),.55);
  background:linear-gradient(180deg, rgba(var(--teal-rgb),.18), rgba(4,8,10,.9));
  box-shadow:0 14px 34px rgba(0,0,0,.5);
}
.torna-casa:hover,.torna-casa:focus-visible{
  border-color:rgba(var(--teal-rgb),1);
  background:linear-gradient(180deg, rgba(var(--teal-rgb),.34), rgba(4,8,10,.94));
  transform:translateY(-2px);
}
.torna-casa:focus-visible{ outline:2px solid var(--teal); outline-offset:3px }
.piede-riga{
  margin:0; display:flex; flex-wrap:wrap; gap:14px; justify-content:center;
  font-family:var(--m); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--soft);
}
.piede-riga a{ color:var(--soft); text-decoration:none; border-bottom:1px solid rgba(169,169,180,.4) }
.piede-riga a:hover{ color:var(--teal); border-color:var(--teal) }

@media (max-width:900px), (max-aspect-ratio: 3/4){
  .piede-stanza{ padding:5vh 5vw 14vh; gap:16px }
  .piede-riga{ font-size:clamp(11px, 2.9vw, 24px) }
  /* sul telefono e' il bersaglio piu' grande del piede: e' quello che
     la gente cerca quando ha finito */
  .torna-casa{ font-size:clamp(12px, 3.2vw, 27px); min-height:54px;
    padding:3.8vw 6vw; width:100%; max-width:420px }
}


/* ==================================================================
   DENTRO LA STANZA LEI DEVE RESTARE VISIBILE.

   Sul monitor la colonna del testo e' larga meno della meta' e lei
   sta nella fascia libera accanto: e' tutto l'impianto della scena -
   le parole DENTRO il filmato, non davanti. Sul telefono avevo dato
   ai pannelli tutta la larghezza, e la fascia libera e' sparita:
   scorrendo si legge benissimo e non si vede piu' chi c'e' dietro.
   Tanto valeva un fondo nero.

   Adesso i pannelli si tengono tre quarti di schermo e lasciano una
   striscia libera dalla parte opposta - a destra nelle stanze che
   scrivono a sinistra, a sinistra in quelle che scrivono a destra.
   E l'inquadratura del filmato si sposta verso quella striscia:
   invece di tenerla centrata sotto i pannelli, la porta dove si
   vede. Due mosse che lavorano insieme; una sola non basterebbe.
   ================================================================== */
@media (max-width:900px), (max-aspect-ratio: 3/4){
  /* LA FOTOGRAFIA E IL SUO TESTO SONO LARGHI UGUALE.
     Il 76 per cento non si risolve allo stesso modo per tutti: certe
     schede hanno un contenitore piu' largo delle altre, e la stessa
     percentuale usciva 359 punti invece di 273 - misurato nella
     stanza portfolio, dove la scheda del confronto sbordava di
     ottantasei punti rispetto al testo che le sta sotto.
     Il tetto in vw non dipende dal contenitore: e' lo schermo, che e'
     lo stesso per tutti. Cosi' i due riquadri si incolonnano davvero,
     uno sopra l'altro, con lo stesso bordo a destra e a sinistra. */
  .blocco .testo{ width:min(76%, 70vw); min-width:0; margin-right:auto; margin-left:0 }
  /* IL "display:block" E' QUELLO CHE MANCAVA.
     La larghezza dichiarata era gia' giusta - il valore calcolato
     diceva min(76%, 273px) - e la scheda usciva lo stesso 359 punti,
     ottantasei piu' del testo che le sta sotto. La ragione non era la
     regola ma l'elemento: la scheda e' uno <span>, e su una scatola
     IN LINEA la larghezza non si applica proprio - il browser la
     legge e la butta via. Le altre schede erano larghe giuste solo
     perche' le loro varianti - il filmato, quella sfogliabile - un
     display ce l'avevano gia'.
     Il "min-width:0" resta perche' serve dove la scheda finisce
     dentro una griglia: li' non scenderebbe sotto la larghezza della
     fotografia che contiene. */
  /* LO SCOSTAMENTO DEL LAYOUT LARGO VA AZZERATO, O LA PAGINA SI
     TRASCINA DI LATO.
     Sul monitor le schede volano sparse per la stanza: stanno in
     position:relative con left e top presi da --x e --y. In colonna
     invece devono stare nel flusso, una sotto l'altra - ma il left
     restava. La scheda del terzo blocco aveva 91 punti di margine
     PIU' 337 di scostamento: cominciava a 445 su uno schermo di 412,
     cioe' tutta fuori, e portava la larghezza della pagina a 733.
     Sono i 321 punti che Barbara sentiva trascinando il dito. */
  .scheda{ display:block; width:min(76%, 70vw); min-width:0;
    margin-right:auto; margin-left:0;
    left:auto; top:auto; right:auto; bottom:auto }
  .scheda img,.scheda video,.scheda picture{ max-width:100% }
  /* IN COLONNA NON ESISTE UN "LATO".
     Sul monitor largo alcune stanze scrivono a destra e altre a
     sinistra: e' quello che le distingue, e funziona perche' accanto
     c'e' spazio. Su uno schermo stretto la colonna e' una sola, e
     allineare a destra non distingue niente - butta via soltanto lo
     spazio a sinistra. Nella stanza press erano NOVANTUNO punti su
     quattrocentododici: il 22 per cento della larghezza, sprecato per
     ricordare un lato che li' non si vede.
     Quindi in colonna tutto parte dal margine e arriva all'altro. */
  .blocco .testo,
  .lato-dx .blocco .testo,
  .scheda,
  .lato-dx .scheda{
    width:auto; max-width:none;
    margin-left:0; margin-right:0;
  }

  /* LA PRIMA SCHEDA ENTRA DAL LATO DA CUI L'HAI LASCIATA.
     Nella scena le lastre stanno appoggiate ai due margini e la prima
     e' sempre dal lato opposto al titolo. Entrando nella stanza ci si
     ritrova in cima, quindi l'unica che conta per la continuita' e'
     lei: se la scena la lasciava a destra e la stanza la ridava a
     sinistra, l'occhio la perdeva e sembrava un'altra cosa.
     Le altre restano dove stanno: quando si arriva a loro si sta gia'
     leggendo, e li' comanda la colonna del testo, non il ricordo
     della scena. */
  /* la stanza portfolio non ha una classe "r-" sua: si riconosce
     perche' NON ha le altre. Quindi la regola generale vale per lei e
     per tutte quelle che scrivono a sinistra, e le due che scrivono a
     destra la ribaltano. */
  .blocco .sch1{ margin-left:auto; margin-right:0 }
  .r-prompt .blocco .sch1,
  .r-press .blocco .sch1{ margin-left:0; margin-right:auto }

  /* l'inquadratura si sposta verso la striscia libera */
  .fondale video{ object-position:14% 50% }
  .lato-dx .fondale video{ object-position:86% 50% }

  /* il velo si apre dalla parte in cui lei si vede */
  .velo{
    background:linear-gradient(90deg,
      rgba(4,5,10,.80) 0%, rgba(4,5,10,.62) 52%,
      rgba(4,5,10,.18) 78%, rgba(4,5,10,0) 100%);
  }
  .lato-dx .velo{
    background:linear-gradient(270deg,
      rgba(4,5,10,.80) 0%, rgba(4,5,10,.62) 52%,
      rgba(4,5,10,.18) 78%, rgba(4,5,10,0) 100%);
  }
  /* la privacy non ha schede: il testo puo' prendersi piu' spazio,
     ma la striscia resta */
  .lettura.larga .blocco .testo{ width:84% }
}


/* ==================================================================
   I QUATTRO CANALI, IN FONDO, MESSI COME SI DEVE.

   Erano quattro pastiglie di larghezza diversa che andavano a capo
   dove capitava: tre su una riga e una da sola sotto, allineate al
   centro - il disordine che si ottiene lasciando decidere al testo.
   Adesso sono una griglia due per due, celle uguali, e la pastiglia
   riempie la sua cella: quattro rettangoli identici invece di quattro
   parole di lunghezza diversa. Il punto luminoso davanti resta, ed e'
   quello che le tiene legate ai nodi della rete.
   Instagram resta l'unico verde acqua: e' il canale da cui arrivano
   davvero le guide, e in questo sito il verde vuol dire "di qui si
   passa".
   ================================================================== */
/* QUATTRO ICONE STANNO IN FILA, NON IN UNA GRIGLIA DUE PER DUE.
   Qui c'era una griglia a due colonne larga quattrocento punti, nata
   quando queste pastiglie avevano la scritta dentro. La scritta non
   c'e' piu': una regola piu' avanti le riduce a quadrati di quaranta
   punti con la sola icona. Le quattro icone si ritrovavano quindi una
   per cella dentro celle da duecento punti, e fra le due colonne
   restava un buco grande come mezzo schermo - proprio sotto un
   bottone centrato, dove lo squilibrio si vede tutto.
   Quattro cose piccole, sotto una grande, si mettono in fila. */
.piede-stanza .social{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:10px; width:auto; margin:0;
}
.piede-stanza .soc{
  /* la forma la da' .social .soc piu' avanti: quaranta per quaranta,
     icona sola. Qui resta solo la materia - il vetro e la sua ombra. */
  background:linear-gradient(180deg, rgba(16,12,32,.7), rgba(6,5,14,.86));
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 10px 26px rgba(0,0,0,.45);
}
.piede-stanza .soc:hover{ transform:translateY(-2px) }
.piede-stanza .soc-ig{
  background:linear-gradient(180deg, rgba(10,34,32,.78), rgba(4,10,12,.9));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),
             0 0 22px rgba(var(--teal-rgb),.28), 0 10px 26px rgba(0,0,0,.45);
}
.piede-stanza .soc b{ width:7px; height:7px }

@media (max-width:900px), (max-aspect-ratio: 3/4){
  /* sul telefono la fila resta una fila: si allarga solo lo spazio
     fra un'icona e l'altra, perche' il dito ha bisogno di stacco */
  .piede-stanza .social{ gap:14px }
}

/* ==================================================================
   PROVE 4 E 6, APPROVATE PER IL TELEFONO
   Sul telefono la stanza e' una colonna sola, e una colonna sola e'
   la cosa piu' facile da rendere monotona: tutto arriva dallo stesso
   punto, alla stessa velocita', nello stesso modo.

   4 - LA COLONNA CHE SBANDA. I pannelli arrivano alternati, uno da
   destra e uno da sinistra, appena inclinati. La larghezza NON cambia
   - quella resta piena, che sul telefono e' sacra - cambia solo da
   dove arrivano. Basta pochissimo: dodici punti di scarto e tre gradi.
   Di piu' diventa un carosello e stanca alla terza.

   6 - IL TESTO CHE SI SCRIVE. Le righe si scoprono una per volta
   invece di comparire insieme. Su schermo largo era di troppo, qui
   no: sul telefono si legge una cosa per volta, e il gesto accompagna
   quel modo di leggere invece di contrastarlo.
   ================================================================== */
@media (max-width:900px), (max-aspect-ratio: 3/4){
  .lettura .blocco:nth-of-type(odd)  .testo{ --lato:-3.5vw; --gira:-2.2deg }
  .lettura .blocco:nth-of-type(even) .testo{ --lato: 3.5vw; --gira: 2.2deg }
  .foglio{ animation-name:sbandaFoglio }
  @keyframes sbandaFoglio{
    0%  { opacity:0; translate:var(--lato,0) 22px; rotate:var(--gira,0deg);
          clip-path:inset(0 0 100% 0) }
    26% { opacity:1 }
    100%{ opacity:1; translate:0 0; rotate:0deg; clip-path:inset(0 0 0 0) }
  }

  /* le righe, una per volta */
  .foglio > .eti,
  .foglio > .tit,
  .foglio > .riga,
  .foglio > .continua{
    animation:scriveRigaStanza linear both;
    animation-timeline:view(block);
  }
  .foglio > .eti     { animation-range:entry 12% entry 30% }
  .foglio > .tit     { animation-range:entry 18% entry 42% }
  .foglio > .riga    { animation-range:entry 26% entry 54% }
  .foglio > .continua{ animation-range:entry 34% entry 64% }
  @keyframes scriveRigaStanza{
    0%  { opacity:0; translate:0 8px; clip-path:inset(-40% 100% -40% 0) }
    22% { opacity:1 }
    100%{ opacity:1; translate:0 0;   clip-path:inset(-40% -20% -40% 0) }
  }

  @media (prefers-reduced-motion: reduce){
    .foglio > .eti, .foglio > .tit, .foglio > .riga, .foglio > .continua{
      animation:none; opacity:1; translate:none; clip-path:none;
    }
  }
}


/* ==================================================================
   L'ULTIMO GIRO, ELEMENTO PER ELEMENTO.

   Il collaudo automatico ha elencato quello che a occhio non si
   vedeva: le didascalie dei reel a dieci punti, la durata a dieci,
   l'invito ad aprire lo storyboard a dieci e mezzo, le due righe del
   piede a undici, e la voce "Home" del menu a dodici. Sono tutte
   scritte piccole per mestiere - durate, note, riferimenti - ed e'
   proprio per questo che scivolano sotto la soglia senza che nessuno
   se ne accorga: nessuna di loro sembra importante finche' non e'
   quella che serve.
   La voce "Home" in particolare stava a dodici punti dentro un
   bersaglio da quattordici: era la via per tornare indietro, e per
   premerla bisognava mirare.
   ================================================================== */
@media (max-width:900px), (max-aspect-ratio: 3/4){
  .reel-dice b{ font-size:clamp(13px, 3.4vw, 28px) }
  .reel-dice i{ font-size:clamp(12.5px, 3.2vw, 26px) }
  .apri-grande-dice b{ font-size:clamp(14px, 3.6vw, 30px) }
  .apri-grande-dice i{ font-size:clamp(12.5px, 3.2vw, 26px) }
  .piede-riga{ font-size:clamp(12.5px, 3.2vw, 26px); gap:18px }
  .piede-riga a{ min-height:44px; display:inline-flex; align-items:center }
  .piede-riga span{ min-height:44px; display:inline-flex; align-items:center }
  .menu summary span{ font-size:clamp(13px, 3.4vw, 28px) }
  .menu-su{ font-size:clamp(13px, 3.4vw, 28px); min-height:48px }
  .lavoro-nota, .sfoglia-nota{ font-size:clamp(12.5px, 3.2vw, 26px) }
}


/* ==================================================================
   LE ULTIME DUE, CON IL SELETTORE GIUSTO.

   "Home" del menu restava a dodici punti nonostante la regola: la
   mia diceva ".menu-su" - un nome di classe soltanto - mentre piu'
   in su c'e' ".menu .menu-su", che pesa di piu' e vinceva. Non era
   la misura sbagliata: era la regola che non arrivava.
   E il numero delle schede di solo testo era rimasto sotto la soglia:
   e' il "01, 02, 03" che dice a quale blocco appartiene una scheda,
   e su un telefono a undici punti non si legge piu'.
   ================================================================== */
@media (max-width:900px), (max-aspect-ratio: 3/4){
  .menu .menu-su{ font-size:clamp(13px, 3.4vw, 28px); min-height:48px }
  .scheda.solo-testo .num{ font-size:clamp(12.5px, 3.2vw, 26px) }
}


/* ==================================================================
   IL COLLAUDO CHIUSO.

   Tre testi appena sotto la soglia - i pulsanti che portano fuori, la
   didascalia del ritratto, le etichette dei dati di generazione - e
   una cosa vera: la fila dei dati sporgeva di tre punti oltre il
   bordo. Tre punti non si vedono, ma sono la differenza fra una
   pagina che sta dentro lo schermo e una che tecnicamente non ci sta:
   basta un telefono un po' piu' stretto e diventano trenta.
   La causa e' che una cella di griglia, se non le si dice altro, non
   scende sotto la larghezza della parola piu' lunga che contiene -
   "risoluzione" - e cinque celle in tre colonne trovavano il bordo.
   Con "minmax(0,1fr)" le celle possono stringersi e le parole vanno
   a capo, che e' quello che deve succedere.
   ================================================================== */
@media (max-width:900px), (max-aspect-ratio: 3/4){
  .fuori{ font-size:clamp(13px, 3.4vw, 28px) }
  .ritratto-press figcaption{ font-size:clamp(13px, 3.4vw, 28px) }
  .dati-gen{ grid-template-columns:repeat(3, minmax(0, 1fr)) }
  .dati-gen i{ font-size:clamp(12.5px, 3.2vw, 26px); overflow-wrap:anywhere }
  .dati-gen b{ overflow-wrap:anywhere }
}


/* ==================================================================
   IL PULSANTE DELLA LINGUA.
   Due sigle in una cornice sola, accanto al menu: quella accesa e' la
   lingua che stai leggendo, l'altra e' un collegamento alla stessa
   pagina nell'altra lingua. Sta vicino al menu perche' sono la stessa
   famiglia di gesti - spostarsi - e perche' cosi' occupano un angolo
   solo invece di due.
   Il verde acqua resta al menu: quello porta avanti nel percorso.
   La lingua e' viola come tutto il vetro, perche' non porta avanti:
   cambia il modo di leggere quello che c'e' gia'.
   ================================================================== */
.lingue{
  position:fixed; z-index:41;
  display:flex; align-items:center; gap:2px;
  padding:3px; border-radius:12px;
  border:1px solid rgba(var(--violet-rgb),.5);
  background:linear-gradient(180deg, rgba(10,8,22,.94), rgba(4,4,10,.97));
  box-shadow:0 10px 26px rgba(0,0,0,.5);
  font-family:var(--m);
}
.lingua-qui,.lingua-altra{
  display:flex; align-items:center; justify-content:center;
  min-width:38px; min-height:36px; padding:6px 9px; border-radius:9px;
  font-size:11.5px; font-weight:700; letter-spacing:.1em; text-decoration:none;
}
.lingua-qui{ color:#12101c; background:#CDBCFF }
.lingua-altra{ color:#CDBCFF; transition:background .25s ease, color .25s ease }
.lingua-altra:hover{ color:#fff; background:rgba(var(--violet-rgb),.34) }
.lingua-altra:focus-visible{ outline:2px solid var(--teal); outline-offset:3px }

/* LA LINGUA STA IN ALTO, SEMPRE.
   Stava in basso a destra, sopra il tasto delle sezioni: li' finiva
   addosso alla riga degli strumenti che scorre in fondo allo schermo,
   e due controlli impilati nello stesso angolo si leggono come un
   pasticcio unico. In alto e' sola, si vede da subito e non copre
   niente che si muove. Vale su tutte le larghezze: sul telefono ci
   stava gia', ora ci sta anche sul largo. */
.lingue{ right:calc(var(--tasto-bordo) + var(--tasto-w) + var(--tasto-stacco));
  top:14px; bottom:auto;
  width:var(--tasto-w); height:var(--tasto-h); padding:3px }
.lingue>*{ flex:1 1 0 }
@media (max-width:900px), (max-aspect-ratio: 3/4){
  .lingue{ right:calc(var(--tasto-bordo) + var(--tasto-w) + var(--tasto-stacco));
    top:14px; bottom:auto; left:auto }
  .lingua-qui,.lingua-altra{ min-width:0; min-height:0; font-size:clamp(12px,3.4vw,26px) }
  /* il menu sta ALLA SINISTRA della lingua, sulla stessa riga:
     due gesti della stessa famiglia, un angolo solo */
  .menu{ right:var(--tasto-bordo); left:auto }
  .menu nav{ left:auto; right:0 }
  /* sparisce anche lei mentre si legge, come il menu */
  .lingue{ transition:transform .3s cubic-bezier(.4,0,.3,1), opacity .3s ease }
  html[data-nascondi] .lingue{ transform:translateY(-180%); opacity:0; pointer-events:none }
}


/* ==================================================================
   I SOCIAL SONO TASTI, NON UN ELENCO DI NOMI.

   Erano quattro pastiglie con la parola scritta dentro: occupavano
   due righe, e "INSTAGRAM TIKTOK LINKEDIN FACEBOOK" scritto per
   estESO e' un elenco, non quattro cose da premere. I nomi non
   aggiungono niente - quei quattro simboli li riconoscono tutti - e
   tolgono lo spazio che serve al bersaglio.

   Adesso sono quattro bottoni tondi con la sola icona, grandi 52
   punti per lato: sopra i quarantaquattro che servono a un dito, e
   in una riga sola. Il nome resta nell'etichetta per chi naviga con
   la voce - quello non si toglie mai.

   E SONO ACCESI. Un alone che pulsa piano, come un led: sono i
   quattro punti in cui si esce dal sito per andare da lei, e devono
   dire "sono vivi". Instagram tiene il verde acqua - e' da li' che
   arrivano le guide - gli altri il viola del vetro.
   ================================================================== */
.soc{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px; padding:0; border-radius:50%;
  font-size:0; letter-spacing:0;
  color:#CDBCFF;
  border:1px solid rgba(var(--violet-rgb),.5);
  background:radial-gradient(circle at 50% 38%, rgba(var(--violet-rgb),.20), rgba(6,5,14,.92) 68%);
  box-shadow:0 0 14px rgba(var(--violet-rgb),.30), inset 0 0 12px rgba(var(--violet-rgb),.14);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  animation:ledSoc 3.4s ease-in-out infinite;
}
/* IL TASTO GRANDE DI INSTAGRAM NON E' UN TASTO A ICONA.
   La regola qui sopra fa i quattro tondi del piede: sola icona,
   font-size a zero perche' il nome resta solo per chi naviga con la
   voce. Ma in fondo alle stanze c'e' un tasto diverso - "Guarda i reel
   su Instagram" - che ha la stessa classe e NON ha nessun disegno
   dentro: si ritrovava tondo, vuoto, con un puntino e la scritta
   azzerata. Un cerchietto che non dice niente e non si capisce cosa
   faccia.
   Qui torna quello che e': una pastiglia con la sua etichetta, della
   stessa forma degli altri bottoni della stanza, col punto verde
   acqua davanti - lo stesso verde che in questo sito vuol dire "di
   qui si passa". */
.soc.soc-grande{
  width:auto; height:auto;
  min-height:50px; padding:15px 26px; border-radius:999px;
  font-family:var(--m); font-size:13px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  gap:10px;
  color:#EAFFFA;
  border:1px solid rgba(var(--teal-rgb),.75);
  background:linear-gradient(180deg, rgba(var(--teal-rgb),.20), rgba(5,10,12,.82));
  box-shadow:0 0 18px rgba(var(--teal-rgb),.28);
}
.soc.soc-grande b{
  width:9px; height:9px; border-radius:50%;
  background:var(--teal);
  box-shadow:0 0 10px rgba(var(--teal-rgb),.95);
}
.soc.soc-grande:hover,.soc.soc-grande:focus-visible{
  border-color:rgba(var(--teal-rgb),1);
  background:linear-gradient(180deg, rgba(var(--teal-rgb),.32), rgba(5,10,12,.86));
  transform:translateY(-2px);
}

/* il selettore nomina il tasto perche' dentro la mappa c'e' gia' un
   ".mappa svg" che allarga ogni disegno a tutto il suo contenitore:
   con la sola classe l'icona veniva 54 punti invece di 23, cioe'
   riempiva il bottone da bordo a bordo */
.soc .glifo-soc{
  width:23px; height:23px; display:block;
  fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
}
.soc-ig{
  color:#8FF6E4;
  border-color:rgba(var(--teal-rgb),.6);
  background:radial-gradient(circle at 50% 38%, rgba(var(--teal-rgb),.22), rgba(4,12,12,.92) 68%);
  box-shadow:0 0 16px rgba(var(--teal-rgb),.38), inset 0 0 12px rgba(var(--teal-rgb),.16);
}
/* sfasati, se no i quattro led respirano all'unisono e sembrano una
   cosa sola che lampeggia invece di quattro cose accese */
.soc:nth-of-type(2){ animation-delay:-.85s }
.soc:nth-of-type(3){ animation-delay:-1.7s }
.soc:nth-of-type(4){ animation-delay:-2.55s }
@keyframes ledSoc{
  0%,100%{ filter:brightness(1) }
  50%    { filter:brightness(1.28) }
}
.soc:hover,.soc:focus-visible{
  transform:translateY(-2px);
  border-color:rgba(var(--violet-rgb),1);
  box-shadow:0 0 26px rgba(var(--violet-rgb),.6), inset 0 0 14px rgba(var(--violet-rgb),.24);
}
.soc-ig:hover,.soc-ig:focus-visible{
  border-color:rgba(var(--teal-rgb),1);
  box-shadow:0 0 30px rgba(var(--teal-rgb),.7), inset 0 0 14px rgba(var(--teal-rgb),.26);
}
@media (prefers-reduced-motion: reduce){ .soc{ animation:none } }
@media (max-width:560px), (max-aspect-ratio: 3/4){
  .soc{ width:56px; height:56px }
  .soc .glifo-soc{ width:25px; height:25px }
}

/* IL PUNTINO DI INSTAGRAM, CHE NON SI VEDEVA DA NESSUNA PARTE.
   Nel disegno il flash e' un cerchietto con fill="currentColor"
   scritto dentro l'SVG. Ma qui sopra si dichiara fill:none per fare le
   icone a contorno, e in CSS una dichiarazione batte sempre un
   attributo di presentazione: quindi il puntino restava senza
   riempimento E senza contorno, cioe' invisibile. Senza di lui il
   quadrato con il cerchio dentro non si legge piu' come Instagram.
   Si prende senza toccare l'SVG: e' l'unico cerchio con stroke="none"
   - i 45 disegni sparsi nel progetto restano intatti, guide pubblicate
   comprese, che non si riscrivono. */
svg circle[stroke="none"]{ fill:currentColor }


/* ==================================================================
   I TASTI SOCIAL COME QUELLI DEL SITO
   Nel banco erano cerchi da 52 punti col disegno piccolo e spostato
   in alto a sinistra: sembravano anelli vuoti con un'icona appoggiata
   dentro per sbaglio. Nel sito sono quadrati con gli angoli tondi,
   piu' piccoli, con il glifo al centro - e le due versioni devono
   somigliarsi, perche' sono lo stesso sito.

   Si prendono per contenitore (.social .soc) e non per classe: ".soc"
   da solo e' anche la pastiglia con la scritta dentro, usata altrove,
   e cambiarla romperebbe quella. Qui si toccano solo i tasti a icona.

   L'alone e i colori restano quelli del banco: e' la forma che si
   allinea, non la luce. */
.social .soc{
  /* flex:none, se no il contenitore li comprime: erano larghi 19
     punti invece di 40, cioe' schiacciati in una fessura. */
  flex:0 0 auto; aspect-ratio:1;
  width:40px; height:40px; min-height:0;
  padding:0; gap:0; border-radius:12px;
  display:inline-grid; place-items:center;
}
/* IL GLIFO ERA INCHIODATO IN ALTO A SINISTRA.
   Un'altra regola lo mette in position:absolute con top e left a zero,
   e contro quello il centraggio della griglia non puo' niente: il
   disegno finiva nell'angolo, dieci punti fuori posto, e il tasto
   sembrava un anello vuoto con l'icona caduta dentro.
   Rimesso nel flusso, la griglia lo centra da sola. */
.social .soc .glifo-soc{ position:static; width:17px; height:17px }

/* ==================================================================
   CORREZIONI IN CODA — 8 settembre, dopo un errore mio

   Queste regole erano state fatte tagliando via pezzi di foglio con
   un taglio a indici, e quel taglio si e' portato via molto piu' del
   dovuto: l'intero impianto di lettura delle stanze - blocchi, testi,
   confronti, moduli - era sparito, e la stanza del prompt era una
   pagina vuota in cui non si poteva nemmeno tornare indietro.
   Il foglio e' stato ripristinato dalla versione buona e le stesse
   modifiche sono rifatte QUI, in coda, solo aggiungendo. Una regola
   in coda puo' essere sbagliata, ma non puo' cancellare quello che
   c'era prima - ed e' esattamente la garanzia che serviva.
   ================================================================== */

/* 1. NIENTE IMMAGINI SOPRA I PANNELLI.
   La materia della sezione passava sopra il foglio mentre entra: nel
   prompt la lastra di codice rendeva illeggibile proprio il testo che
   spiega cosa contiene la stanza. Regola di Barbara: niente si
   sovrappone. La materia resta nel fondo, non sulle parole. */
.foglio::before{ display:none !important }

/* 2. VIA IL SIPARIO DI SCHEGGE FRA UN BLOCCO E L'ALTRO.
   Idea buona sulla carta, mai funzionante nella stanza vera: passava
   sopra il testo, si ripeteva identica a ogni stacco, attraversava
   anche lei, e ridotta abbastanza da non dare fastidio diventava un
   pugno di briciole in mezzo al niente - che sembra un errore.
   Un'idea che va difesa a ogni schermata non e' un'idea buona. */
.lettura .blocco + .blocco::before,
.lettura .blocco + .blocco::after{ display:none !important }

/* 3. LE SCHEDE STANNO DALLA PARTE OPPOSTA AL TESTO.
   Erano ereditate dalle lastre della scena, dove il testo sta in
   basso e la meta' opposta e' libera. Nella stanza il testo sta di
   lato e ci finivano dentro: nel prompt la scheda location aveva il
   centro al 64 per cento e, larga quattordici, arrivava al 71 - cioe'
   dove cominciano le parole.
   Regola unica: si scrive a destra, schede col centro sotto il 44; si
   scrive a sinistra, sopra il 62. In mezzo resta una fascia libera e
   li' non entra mai niente. Le altezze sono sfalsate perche' due
   schede alla stessa altezza si leggono come una fila, e questa non
   e' una fila: e' roba appoggiata nello spazio. */
.sch1{ --x:66vw; --y:34vh }
.sch2{ --x:86vw; --y:58vh }
.sch3{ --x:68vw; --y:80vh }
.r-blog .sch1{ --x:82vw; --y:30vh }
.r-blog .sch2{ --x:64vw; --y:54vh }
.r-blog .sch3{ --x:84vw; --y:76vh }
.r-blog .sch4{ --x:62vw; --y:20vh }
.r-contatti .sch1{ --x:64vw; --y:32vh }
.r-contatti .sch2{ --x:84vw; --y:56vh }
.r-contatti .sch3{ --x:66vw; --y:80vh }
.r-contatti .sch4{ --x:86vw; --y:22vh }
.r-press .sch1{ --x:16vw; --y:30vh }
.r-press .sch2{ --x:38vw; --y:54vh }
.r-press .sch3{ --x:20vw; --y:78vh }
.r-press .sch4{ --x:42vw; --y:22vh }
.r-prompt .sch1{ --x:18vw; --y:34vh }
.r-prompt .sch2{ --x:40vw; --y:62vh }
.r-prompt .sch3{ --x:14vw; --y:78vh }

/* 4. I SOCIAL SI ACCENDONO AL PASSAGGIO DEL MOUSE.
   Prima si alzavano di due punti e cambiavano bordo: su un tasto
   tondo da quaranta punti, su fondo scuro, non si vedeva niente.
   Adesso si accende la luce - l'alone cresce, il vetro schiarisce,
   l'icona diventa bianca - e il movimento e' un ingrandire invece di
   un salto, che su un tondo si legge molto meglio. */
.soc{ transition:transform .2s ease, box-shadow .2s ease,
                 border-color .2s ease, filter .2s ease }
.soc:hover, .soc:focus-visible{
  transform:translateY(-2px) scale(1.09);
  color:#FFFFFF;
  filter:brightness(1.35);
  box-shadow:0 0 34px rgba(var(--violet-rgb),.85),
             inset 0 0 18px rgba(var(--violet-rgb),.4);
}
.soc-ig:hover, .soc-ig:focus-visible{
  box-shadow:0 0 38px rgba(var(--teal-rgb),.95),
             inset 0 0 18px rgba(var(--teal-rgb),.42);
}


/* ==================================================================
   I BOTTONI DELLE STANZE, RIMESSI IN RIGA
   (in coda: qui sotto non si cancella niente)

   Il sistema era gia' scritto in cima a questo foglio - stessa forma,
   il colore dice il ruolo - ma non tutti lo rispettavano fino in
   fondo. Tre cose non tornavano:

   1. AL PASSAGGIO DEL MOUSE non facevano tutti la stessa cosa. Il
      verde acqua cambiava solo il bordo: sopra un filmato in
      movimento, un bordo che cambia non si vede. Il viola invece si
      sollevava. Adesso tutti si sollevano e si accendono: il fondo
      schiarisce, l'alone va a piena luce, il bottone sale di due
      punti. E' quello che si chiedeva - che si illuminino.

   2. DA TASTIERA meta' di loro non mostrava dove si era. Adesso il
      contorno c'e' su tutti, ed e' lo stesso contorno.

   3. IL PULSANTE DEL MODULO era l'unico fuori misura: stesso aspetto
      degli altri ma altezza sua, perche' non era nell'elenco che
      distribuisce le misure. Ora ci sta.

   Lo spostamento va su transform e il guasto delle lettere su
   translate: due proprieta' diverse, quindi convivono.
   ================================================================== */
.scendi:hover, .continua:hover,
.scendi:focus-visible, .continua:focus-visible{
  background:linear-gradient(180deg, rgba(var(--teal-rgb),.42), rgba(5,10,12,.7));
  transform:translateY(-2px);
}
.scendi:focus-visible, .continua:focus-visible{
  outline:2px solid var(--teal); outline-offset:3px;
}
/* il viola si sollevava col mouse ma non da tastiera: ora fa lo
   stesso gesto in tutti e due i casi */
.fuori:hover, .fuori:focus-visible{
  transform:translateY(-2px);
  color:#E4DAFF;
  border-color:rgba(var(--violet-rgb),1);
  background:linear-gradient(180deg, rgba(var(--violet-rgb),.22), rgba(4,4,10,.9));
}

/* il pulsante che manda il modulo entra nel sistema delle misure */
.modulo .bottone{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-size:13px; letter-spacing:.12em;
  min-height:50px; padding:15px 26px;
  transition:border-color .25s ease, background .25s ease,
             color .25s ease, transform .25s ease;
}
.modulo .bottone:hover,
.modulo .bottone:focus-visible{
  background:linear-gradient(180deg, rgba(var(--teal-rgb),.42), rgba(5,10,12,.7));
  border-color:rgba(var(--teal-rgb),1);
  transform:translateY(-2px);
}
.modulo .bottone:focus-visible{ outline:2px solid var(--teal); outline-offset:3px }

@media (max-width:900px), (max-aspect-ratio: 3/4){
  /* IL BERSAGLIO DA DITO, UGUALE PER TUTTI.
     Sul telefono il tasto per tornare a casa era gia' grande; gli
     altri no, e la differenza si sentiva sotto il pollice. */
  .fuori, .continua, .modulo .bottone{ min-height:54px }
  .modulo .bottone{ padding:3.8vw 6vw }
}

/* NIENTE SOLLEVAMENTO DOVE NON C'E' UN MOUSE.
   Su uno schermo che si tocca il passaggio del mouse non esiste: il
   browser lo simula col tocco, e il sollevamento resta appiccicato
   dopo che il dito se n'e' andato - sembra un bottone rimasto
   premuto. Si toglie in base al tipo di puntatore, non alla larghezza
   della finestra: un portatile con la finestra stretta ha il mouse, e
   il suo gesto deve restare. */
@media (hover:none){
  .scendi:hover, .continua:hover, .fuori:hover,
  .torna-casa:hover, .sez-vai:hover, .modulo .bottone:hover{ transform:none }
}

/* L'ALTEZZA NON PUO' DIPENDERE DA DOVE STA IL BOTTONE.
   Misurati sulla pagina vera: "torna alla home" e "entra nella
   sezione" erano alti cinquanta punti, "continua" e i viola
   cinquantatre. Non era un errore di misure - erano le misure giuste,
   ma l'interlinea la ereditavano dal testo che li circondava, e nei
   blocchi di lettura quell'interlinea e' larga. Tre punti di
   differenza fra bottoni affiancati si vedono: sembrano storti.
   Fissata qui: l'altezza la decide la pastiglia, non il paragrafo che
   la ospita. */
.scendi, .continua, .torna-casa, .fuori, .modulo .bottone{ line-height:1 }

/* SUL TELEFONO LA MISURA E' UNA SOLA.
   Misurati sul telefono vero: cinquanta punti uno, cinquantaquattro
   gli altri, e tre corpi di testo diversi - dodici, tredici,
   tredici e un quarto - perche' ogni bottone aveva la sua formula.
   Affiancati si vedeva, e sembrava un allineamento sbagliato.
   Una formula sola per tutti: cresce insieme allo schermo, come
   prima, ma cresce uguale. */
@media (max-width:900px), (max-aspect-ratio: 3/4){
  .scendi, .continua, .torna-casa, .fuori, .modulo .bottone{
    font-size:clamp(12.5px, 3.3vw, 27px);
    min-height:54px;
  }
}

/* stessi tre difetti delle scene, stessa correzione: sotto i
   quarantaquattro punti un bersaglio non si prende col pollice */
.social, .social .soc{ pointer-events:auto }
.soc{ min-height:44px; min-width:44px; justify-content:center }
.lingua-qui,.lingua-altra{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; min-width:44px;
}
@media (max-width:900px), (max-aspect-ratio: 3/4){
  .lingua-qui,.lingua-altra{ min-height:44px; min-width:44px }
}

/* I TONDI DEI SOCIAL ERANO QUARANTA, NON QUARANTAQUATTRO.
   L'altezza minima che ho appena rimesso non bastava: piu' su c'e'
   una regola piu' forte - si prendono per contenitore, .social .soc -
   che fissa quaranta per quaranta e azzera il minimo. Era stata
   scritta per un motivo vero: senza, il contenitore li schiacciava a
   diciannove punti. Il motivo resta, cambia solo la misura.
   Quattro punti in piu' non si vedono. Sotto quarantaquattro il
   pollice sbaglia. */
.social .soc{ width:44px; height:44px }

/* LA RIGA DEI BOTTONI FINALI: NESSUNO SI PORTA DIETRO IL SUO MARGINE.
   "Torna alla home" e il tasto di Instagram avevano diciotto punti di
   margine in alto: servivano quando ognuno stava da solo sotto il
   paragrafo, per staccarlo dal testo. Messi in fila con "Scrivimi",
   quel margine allargava tutta la riga - e "Scrivimi", che non ce
   l'aveva, si stirava a sessantotto punti per riempirla, mentre gli
   altri restavano a cinquanta. Tre bottoni affiancati, due altezze.
   Il distacco dal testo lo da' gia' la riga stessa, una volta sola;
   dentro, ognuno e' alto quanto e' alto, e stanno in asse. */
.azione-riga{ align-items:center }
.azione-riga > *{ margin:0 }

/* ==================================================================
   LA SCHEGGIA GUIDA CHE CADE (prova: stanza portfolio -> Prompt)
   La mette oltre.js al momento del passaggio: entra dall'alto, scivola
   giu' girando nello spazio ed esce in basso. Dura meno di un secondo e
   non si ferma mai sopra un testo. Nella sezione dopo la ritrovi.
   ================================================================== */
.guida-cade{
  position:fixed; z-index:60; pointer-events:none;
  top:0; right:14vw; width:clamp(100px, 12vw, 190px); height:auto;
  filter:drop-shadow(0 0 26px rgba(var(--teal-rgb), .45));
  animation:guidaScivola .85s cubic-bezier(.45, .05, .8, .4) forwards;
}
@keyframes guidaScivola{
  0%  { opacity:0; translate:0 -40vh;   rotate:-18deg; transform:perspective(700px) rotateX(0deg)  rotateY(0deg) }
  12% { opacity:1 }
  45% { translate:-4vw 35vh;  rotate:40deg;  transform:perspective(700px) rotateX(35deg) rotateY(-30deg) }
  100%{ opacity:1; translate:-9vw 125vh; rotate:170deg; transform:perspective(700px) rotateX(70deg) rotateY(-60deg) }
}

/* LA SCHEGGIA DELL'INGRESSO RESTA NELLA STANZA.
   E' la stessa scheggia che nella scena apre il portfolio (in alto a
   destra): entrando nella stanza non sparisce, galleggia li' sopra il
   titolo, e in fondo alla stanza e' lei che cade e porta alla sezione
   dopo (oltre.js, data-guida). Sta nell'ingresso: scorrendo se ne va con
   lui e non passa mai sopra i testi da leggere. */
.guida-resta{
  position:absolute; z-index:1; pointer-events:none;
  right:5vw; top:14vh; width:clamp(110px, 14vw, 230px); height:auto;
  rotate:-12deg;
  filter:drop-shadow(0 0 30px rgba(var(--teal-rgb), .42));
  animation:guidaGalleggia 7s ease-in-out infinite alternate;
}
@keyframes guidaGalleggia{
  from{ translate:0 0;    rotate:-12deg }
  to  { translate:-1vw 2.4vh; rotate:-4deg }
}
@media (max-width:760px){
  .guida-resta{ width:clamp(70px, 22vw, 120px); right:4vw; top:10vh }
}
@media (prefers-reduced-motion:reduce){
  .guida-resta{ animation:none }
}

/* LA SCHEGGIA NON SI PERDE: SCENDE CON LO SCORRIMENTO.
   Barbara: "e' bello che fluttui ma non ha senso che poi la perdiamo".
   Prima stava dentro l'ingresso e se ne andava con lui. Adesso e' fissa
   sullo schermo e la sua strada e' lo scorrimento della stanza intera:
   parte in alto a destra dove l'ha lasciata la scena, scivola nella
   corsia fra la colonna dei testi e le schede, gira su se stessa, e a
   fine stanza e' in basso, pronta a cadere (oltre.js la fa cadere via
   e la stanza dopo la vede atterrare).
   Sta SOTTO i testi (z-index 2, prima della lettura) e sotto le schede
   (z-index 3): ci passa dietro, non le copre mai. Il galleggiare sta
   sull'immagine, la strada sul contenitore: due animazioni sulla stessa
   proprieta' si cancellerebbero. */
.guida-viaggio{
  position:fixed; z-index:2; pointer-events:none;
  right:5vw; top:14vh; width:clamp(110px, 14vw, 230px);
  /* la strada la calcola oltre.js a ogni scorrimento: funziona anche
     dove il browser non conosce le animazioni legate allo scorrimento */
  will-change:translate, rotate;
}
.guida-viaggio .guida-resta{
  position:static; display:block; width:100%; height:auto;
  top:auto; right:auto;
}
@media (max-width:760px){
  .guida-viaggio{ width:clamp(64px, 20vw, 110px); right:4vw; top:12vh }
}