/* gabri.it — Galleria.
   Carta calda, un serif da titolo e un grottesco da didascalia. I colori
   veri li portano i progetti: le schermate dei siti e i loro mondi.
   Il segno di riconoscimento è la biglia: un mondo dentro una sfera di
   vetro, come le biglie con i ciclisti dentro, sulle piste di sabbia. */
:root{
  --carta:#F1EDE6; --inchiostro:#141312;
  --grigio:#69635C;                 /* 4,8:1 sulla carta: si legge anche a 12 pixel */
  --tenue:#3C3935;
  --linea:rgba(20,19,18,.14);
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --sans:Inter,system-ui,-apple-system,'Segoe UI',sans-serif;
  --pad:clamp(20px,2.6vw,44px);
  --ease:cubic-bezier(.16,1,.3,1);
  --hq:clamp(260px,36vh,400px);     /* l'altezza delle schede; su schermo largo la calcola app.js */
  --sotto:calc(var(--pad) + 40px);  /* dove finisce la testata */
  --accento:var(--inchiostro);      /* nella stanza di un progetto, la sua luce */
}
/* Entrando nella stanza di un progetto, app.js dà i suoi colori alla testata,
   alla pagina del progetto e al cursore; la galleria resta com'è mentre sfuma.
   Il fondo della sala è una proprietà registrata e sfuma da solo: aspetta un
   attimo, perché prima il colore allaga dalla scheda e poi la sala si abbassa.
   (Sfumare tutti i colori del documento costava fotogrammi: ogni passo
   ridipingeva tutto il testo della pagina.) */
@property --pagina{syntax:'<color>';inherits:false;initial-value:#F1EDE6}
html{transition:--pagina .75s var(--ease) .3s}
/* uscendo la sala si riaccende subito: è la stanza che si ritira nella scheda */
html.uscendo{transition:--pagina .5s var(--ease)}
.testata .nome,.testata .voci a,.testata .ora{transition:color .45s var(--ease) .18s}
/* il testo senza un colore suo prende quello della stanza, non quello del documento */
.testata,.progetto{color:var(--inchiostro)}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--pagina,var(--carta));color:var(--inchiostro);-webkit-text-size-adjust:100%}
body{font-family:var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
img{display:block}
::selection{background:var(--inchiostro);color:var(--carta)}
:focus-visible{outline:1.5px solid var(--inchiostro);outline-offset:4px;border-radius:2px}

.salta{position:absolute;left:var(--pad);top:-60px;z-index:20;background:var(--inchiostro);
  color:var(--carta);padding:10px 14px;font-size:13px;border-radius:3px}
.salta:focus{top:12px}

/* ---------- testata ---------- */
.testata{position:relative;z-index:6;display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;padding:var(--pad) var(--pad) 0;font-size:13.5px;letter-spacing:.01em}
.nome{font-weight:500;justify-self:start}
.voci{display:flex;gap:30px;color:var(--grigio)}
.voci a{position:relative;transition:color .3s}
/* il filo sotto la voce si stende da sinistra e si ritira a destra */
.voci a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:100% 50%;transition:transform .5s var(--ease)}
.voci a:hover,.voci a[aria-current]{color:var(--inchiostro)}
.voci a:hover::after{transform:scaleX(1);transform-origin:0 50%}
.voci sup{font-size:9px;margin-left:2px;vertical-align:5px}
.ora{justify-self:end;color:var(--grigio);font-variant-numeric:tabular-nums}

/* ---------- apertura ---------- */
#home{position:relative;z-index:2}
.apertura{display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,330px);align-items:end;gap:40px;
  padding:clamp(28px,5.5vh,80px) var(--pad) clamp(22px,3.6vh,48px)}
/* il titolo misura con il lato più corto: largo ma basso, o alto ma stretto */
.titolo{font-family:var(--serif);font-weight:400;font-size:clamp(52px,min(9.4vw,15.5vh),210px);
  line-height:.88;letter-spacing:-.025em}
.titolo em{font-style:italic}
/* ogni riga sta in una maschera: all'arrivo sale dal basso. La maschera scende quanto le code
   delle lettere (la p di pezzi arriva a .22em sotto la riga), e la riga parte da più giù di lei */
.titolo .riga{display:block;overflow:hidden;padding-bottom:.2em;margin-bottom:-.2em}
.titolo .riga>span{display:inline-block}
/* la biglia sta fuori dalla maschera della sua riga: cade dall'alto, e la maschera la taglierebbe */
.titolo .riga:has(.biglia){overflow:visible;clip-path:inset(-100vh -10vw 0 -10vw)}
/* la biglia: un mondo in miniatura. Senza WebGL è un vetro dipinto, coi colori
   del mondo che gira (all'inizio quelli del primo progetto, scritti nella pagina) */
.biglia{display:inline-block;width:.62em;height:.62em;border-radius:50%;vertical-align:.02em;
  margin:0 .06em;background:radial-gradient(circle at 34% 30%,var(--b-luce,#E4F0EE) 0 9%,var(--b-medio,#2F8597) 38%,var(--b-fondo,#06212F) 80%);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);transform-origin:50% 100%;cursor:pointer}
.intro{font-size:15px;line-height:1.6;color:var(--tenue);padding-bottom:.7em;max-width:34ch}
.intro b{font-weight:500;color:var(--inchiostro)}

/* ---------- galleria ---------- */
.galleria{padding:0 var(--pad);overflow-x:auto;scrollbar-width:none}
.galleria::-webkit-scrollbar{display:none}
.binario{display:flex;gap:22px;list-style:none;width:max-content;align-items:flex-start}
.opera{flex:none;display:flex;flex-direction:column;gap:14px}
.apri{display:flex;flex-direction:column;gap:14px}
.quadro{position:relative;height:var(--hq);aspect-ratio:var(--r);border-radius:3px;overflow:hidden;
  background:var(--medio)}
.quadro img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
/* i mondi senza sito: il loro fluido. Qui l'immagine fotografata dalla
   scena, che respira piano; con WebGL lo disegna la scena, vivo */
.fluido{position:absolute;inset:-20%;
  background:
    radial-gradient(60% 50% at 76% 20%,color-mix(in srgb,var(--luce) 45%,transparent) 0%,transparent 60%),
    radial-gradient(70% 60% at 22% 34%,var(--medio) 0%,transparent 64%),
    radial-gradient(120% 110% at 68% 100%,color-mix(in srgb,var(--medio) 80%,transparent) 0%,var(--fondo) 72%),
    var(--fondo);
  animation:deriva 18s ease-in-out infinite alternate}
img.fluido{inset:0;width:100%;height:100%;object-fit:cover;background:var(--fondo);
  animation:respira 22s ease-in-out infinite alternate;transform-origin:60% 40%}
@keyframes deriva{to{transform:translate(6%,-5%) rotate(6deg) scale(1.08)}}
@keyframes respira{to{transform:scale(1.14) rotate(2.5deg)}}
.nomeMondo{position:absolute;left:22px;bottom:16px;right:16px;font-family:var(--serif);font-style:italic;
  font-size:clamp(40px,min(4.4vw,8vh),96px);line-height:.92;letter-spacing:-.02em;color:var(--luce)}
.stato{position:absolute;display:flex;align-items:center;gap:7px;font-size:11px;font-weight:500;
  letter-spacing:.06em;text-transform:uppercase;padding:6px 10px 6px 9px;border-radius:99px;
  background:rgba(241,237,230,.9);color:var(--inchiostro);top:14px;left:14px;white-space:nowrap;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.stato::before{content:"";width:6px;height:6px;border-radius:50%;background:#B9B2A8}
.stato.on{top:auto;left:auto;bottom:14px;right:14px}
/* mentre la galleria corre (app.js scrive --moto e la classe) le etichette sulle schede si fanno
   da parte. Solo mentre corre: un filtro sempre acceso costava fotogrammi anche da ferma. */
.orizzontale .scorre .quadro>.stato,.orizzontale .scorre .quadro>.nomeMondo{filter:opacity(calc(1 - var(--moto,0) * .85))}
.stato.on::before{background:#1F9D55;box-shadow:0 0 0 0 rgba(31,157,85,.5);animation:vivo 2.4s ease-out infinite}
@keyframes vivo{70%{box-shadow:0 0 0 6px rgba(31,157,85,0)}100%{box-shadow:0 0 0 0 rgba(31,157,85,0)}}
.didascalia{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:12px}
.didascalia .n{font-size:11.5px;font-weight:500;color:var(--grigio);font-variant-numeric:tabular-nums}
.didascalia .t{font-family:var(--serif);font-weight:400;font-size:27px;letter-spacing:-.01em;line-height:1.1}
.didascalia .tema{font-size:13px;color:var(--grigio);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.apri:hover .t,.apri:focus-visible .t{font-style:italic}
.dominio{font-size:13px;color:var(--grigio);margin-top:-8px;max-width:calc(var(--hq) * var(--r))}
.dominio a{border-bottom:1px solid transparent;transition:border-color .3s}
.dominio a:hover{border-color:currentColor}
.fine .dominio{line-height:1.5}
/* l'altezza delle schede si misura sulla didascalia più alta, che è questa: due righe sempre.
   Se andasse a capo solo a certe larghezze, le schede cambierebbero altezza da una visita all'altra */
.orizzontale .fine .dominio{min-height:3em}

/* ---------- piede ---------- */
.piede{display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:18px var(--pad) var(--pad);font-size:12.5px;color:var(--grigio)}
.avanzamento{display:flex;align-items:center;gap:14px;font-variant-numeric:tabular-nums}
.barra{display:block;width:180px;height:1px;background:var(--linea);overflow:hidden}
.barra i{display:block;height:100%;background:var(--inchiostro);transform-origin:0 0;transform:scaleX(.14)}
.invito{display:inline-block}
/* la freccia dell'invito spinge piano verso destra, finché non si scorre */
.invito::after{content:"→";display:inline-block;margin-left:.4em;animation:spinge 2.2s var(--ease) infinite}
.scorsa .invito::after{animation:none}
@keyframes spinge{0%,100%{transform:none}45%{transform:translateX(5px)}}

/* ---------- schede (senza JavaScript stanno qui, in fila) ---------- */
.schede{padding:clamp(48px,8vh,96px) var(--pad);display:grid;gap:56px;max-width:900px}
.scheda h3{font-family:var(--serif);font-weight:400;font-size:clamp(40px,5vw,72px);line-height:.95;margin:.15em 0 .3em}
.sTema{font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--grigio)}
.sSommario{font-size:18px;line-height:1.5;max-width:46ch}
.scheda dl{display:grid;gap:18px;margin:24px 0;max-width:60ch}
.scheda dt{font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--grigio);margin-bottom:5px}
.scheda dd{font-size:15.5px;line-height:1.6;color:var(--tenue)}
.sLink a{font-weight:500;border-bottom:1px solid currentColor}

/* ---------- chi sono ---------- */
.chi{padding:clamp(48px,8vh,96px) var(--pad)}
.chiCorpo{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:0 clamp(32px,6vw,110px);
  align-items:start}
.chiTitolo{grid-column:1 / -1;font-family:var(--serif);font-weight:400;font-size:clamp(56px,min(8vw,13vh),150px);
  line-height:.9;letter-spacing:-.02em;margin-bottom:clamp(20px,4vh,44px)}
.chiTitolo .biglia{width:.5em;height:.5em;margin-left:.1em;vertical-align:.04em}
.chiTesto{grid-column:1}
.chiTesto p{font-family:var(--serif);font-size:clamp(26px,min(2.5vw,4.4vh),44px);line-height:1.16;letter-spacing:-.005em;max-width:26ch}
.chiTesto p+p{margin-top:.5em;color:var(--tenue)}
.chiTesto a{border-bottom:1px solid currentColor;transition:color .3s}
.chiTesto a:hover{color:var(--inchiostro)}
.chiIndice{grid-column:2;grid-row:2;list-style:none;display:grid;gap:0;font-size:15px}
.chiIndice li{display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--linea);padding:11px 0}
.chiIndice li:last-child{border-bottom:1px solid var(--linea)}
.chiIndice a{transition:transform .5s var(--ease);display:inline-block}
.chiIndice a:hover{font-style:italic;transform:translateX(4px)}
.chiIndice .n{font-size:11.5px;color:var(--grigio);margin-right:8px;font-variant-numeric:tabular-nums}
.chiIndice .d{color:var(--grigio)}
.chiScrivi{grid-column:2;margin-top:clamp(22px,4vh,40px);font-family:var(--serif);font-size:clamp(34px,3.6vw,58px);font-style:italic}
.chiScrivi a{border-bottom:1px solid currentColor}

/* ---------- la pagina che non c'è (404.html) ---------- */
.perso{min-height:calc(100svh - 140px);display:grid;align-content:center;gap:clamp(18px,3vh,30px);
  padding:var(--pad) var(--pad) clamp(48px,10vh,120px)}
.persoCodice{font-size:12px;font-weight:500;letter-spacing:.14em;color:var(--grigio);font-variant-numeric:tabular-nums}
.perso .biglia{cursor:auto}
.persoTesto{font-size:16px;line-height:1.6;color:var(--tenue);max-width:36ch}
.persoVie{display:flex;flex-wrap:wrap;gap:12px 32px;font-family:var(--serif);font-style:italic;font-size:clamp(26px,2.6vw,38px)}
.persoVie a{border-bottom:1px solid currentColor}

/* ==========================================================
   CON IL JAVASCRIPT
   ========================================================== */
.js .schede{display:none}
.progetto[hidden]{display:none}
.js .chi:not(.aperta){display:none}
.js .chi,.progetto{position:fixed;left:0;right:0;bottom:0;top:var(--sotto);z-index:4;overflow-y:auto;
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.js .chi{display:block}

#scena{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.testata,.progetto,.chi{isolation:isolate}

/* quando una pagina copre la galleria, la galleria si spegne; tornando aspetta
   un attimo, che la pagina se ne vada prima che lei riappaia */
#home{transition:opacity .55s var(--ease) .25s}
.js.coperta #home{opacity:0;pointer-events:none;transition-delay:0s}
/* senza JavaScript la pagina di un progetto (/falena/) è già scritta: niente aspetta di entrare, e ha il suo fondo */
html:not(.js) .progetto{background:var(--carta)}
html:not(.js) .progetto .pTesto>*,html:not(.js) .progetto .pBarra,html:not(.js) .progetto .pProssimo,
html:not(.js) .pTitolo .riga>span,html:not(.js) .pQuadro .nomeMondo{opacity:1;transform:none}

/* ---------- su schermo largo: una pagina sola, la galleria scorre di lato ---------- */
.orizzontale,.orizzontale body{height:100%;overflow:hidden}
.orizzontale body{display:flex;flex-direction:column}
.orizzontale #home{flex:1;display:flex;flex-direction:column;min-height:0}
/* la galleria prende tutta l'altezza che resta: app.js ci misura le schede */
.orizzontale .galleria{overflow:visible;flex:1 1 0;min-height:0}
.orizzontale .binario{will-change:transform}

/* con WebGL le immagini e i mondi li disegna la scena: il DOM resta per
   l'accessibilità, per i motori e come riserva */
.gl .quadro{background:transparent}
.gl .quadro img,.gl .quadro .fluido{visibility:hidden}
.gl .biglia{background:none;box-shadow:none}
.gl .pQuadro{background:transparent}

/* ---------- la stanza: il colore che allaga dalla scheda ----------
   Sta sotto la scena e sotto la galleria: sopra la carta, sotto tutto il resto. */
.velo{position:fixed;inset:0;z-index:0;pointer-events:none;visibility:hidden}
.velo.attivo{visibility:visible}
/* nella stanza il titolo e il bottone prendono la luce del progetto; il nome del
   progetto dopo, la luce del suo */
.stanza .pTitolo{color:var(--accento)}
.stanza .visita{background:var(--accento);color:var(--carta)}
.pProssimo strong{color:var(--accento-succ,inherit);transition:transform .6s var(--ease),color .6s var(--ease)}
html:not(.stanza) .pProssimo strong{color:inherit}

/* ---------- la pagina del progetto ---------- */
.progetto{padding-top:clamp(14px,2.4vh,26px)}
.pBarra{display:flex;justify-content:space-between;align-items:baseline;padding:0 var(--pad);
  font-size:13px;color:var(--grigio);margin-bottom:clamp(20px,4vh,44px)}
.pIndietro{color:var(--inchiostro);font-weight:500}
.pIndietro .freccia{display:inline-block;transition:transform .45s var(--ease)}
.pIndietro:hover .freccia{transform:translateX(-5px)}
.pConta{font-variant-numeric:tabular-nums}
.pConta b{color:var(--inchiostro);font-weight:500}
.pCorpo{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.3fr);gap:clamp(28px,4.5vw,80px);
  padding:0 var(--pad);align-items:start;min-height:170vh}
.pTesto{padding-bottom:12vh}
.pTema{font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--grigio)}
.pTitolo{font-family:var(--serif);font-weight:400;font-size:clamp(54px,min(7.2vw,12vh),150px);line-height:.9;
  letter-spacing:-.025em;margin:.18em 0 .28em}
/* il titolo del progetto sale nella sua maschera, come quello della galleria */
.pTitolo .riga{display:block;overflow:hidden;padding-bottom:.2em;margin-bottom:-.2em}
.pTitolo .riga>span{display:inline-block;transform:translateY(128%);transition:transform 1.2s var(--ease)}
.progetto.dentro .pTitolo .riga>span{transform:none;transition-delay:.3s}
.pSommario{font-family:var(--serif);font-size:clamp(22px,min(2vw,3.4vh),34px);line-height:1.2;max-width:24ch}
.pAzioni{display:flex;align-items:center;flex-wrap:wrap;gap:16px;margin:clamp(22px,3.5vh,36px) 0}
.pAzioni .stato{position:static;background:transparent;padding:0;backdrop-filter:none;-webkit-backdrop-filter:none}
.pDominio{font-size:14px}
.visita{display:inline-flex;align-items:center;gap:10px;background:var(--inchiostro);color:var(--carta);
  font-size:13.5px;font-weight:500;padding:13px 18px 13px 20px;border-radius:99px;transition:transform .45s var(--ease)}
.visita:hover{transform:translateY(-2px)}
.visita .freccia{display:inline-block;transition:transform .45s var(--ease)}
.visita:hover .freccia{transform:translate(2px,-2px)}
.pScheda{display:grid;gap:22px;margin-top:clamp(28px,5vh,52px);max-width:52ch}
.pScheda div{border-top:1px solid var(--linea);padding-top:14px}
.pScheda dt{font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--grigio);margin-bottom:8px}
.pScheda dd{font-size:15.5px;line-height:1.62;color:var(--tenue)}
.pQuadro{position:sticky;top:clamp(14px,2.4vh,26px);--hc:calc(100vh - var(--sotto) - var(--pad) - 30px);height:var(--hc);
  width:100%;aspect-ratio:auto;margin:0;border-radius:4px;overflow:hidden;background:var(--medio,#ddd)}
.pQuadro.online{cursor:pointer}
/* su uno schermo alto anche il testo resta fermo: scorrendo si muove solo il sito nella cornice */
@media (min-width:900px) and (min-height:760px){
  .pTesto{position:sticky;top:clamp(14px,2.4vh,26px)}
}
.pQuadro img{position:absolute;left:0;top:0;width:100%;height:auto;will-change:transform}
.pQuadro img.fluido{height:100%}
/* senza scena la schermata scorre nella cornice insieme alla pagina: dove il browser sa legare
   un'animazione allo scorrimento la muove lui, nello stesso fotogramma della pagina (il codice
   arriverebbe un fotogramma dopo, e la schermata tremerebbe). Finisce all'87%, come in app.js */
@supports (animation-timeline: scroll()){
  /* per nome: il contenitore più vicino sarebbe la cornice stessa (overflow:hidden), che non scorre mai */
  .progetto{scroll-timeline:--scorre-progetto block}
  html:not(.gl) .pQuadro img:not(.fluido){animation:sfoglia auto linear both;animation-timeline:--scorre-progetto}
}
@keyframes sfoglia{
  from{transform:none}
  87%,to{transform:translate3d(0,calc(var(--hc) - 100%),0)}
}
.pQuadro .nomeMondo{font-size:clamp(56px,min(6vw,10vh),130px);opacity:0;transition:opacity .5s var(--ease)}
/* il nome del mondo compare quando il foglio è arrivato, non mentre vola */
.progetto.dentro .pQuadro .nomeMondo{opacity:1;transition:opacity .8s var(--ease) .85s}
.pProssimo{display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  margin:clamp(40px,10vh,120px) var(--pad) var(--pad);padding-top:22px;border-top:1px solid var(--linea)}
.pProssimoEt{font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--grigio)}
.pProssimo strong{font-family:var(--serif);font-weight:400;font-size:clamp(48px,min(7vw,12vh),140px);line-height:.95;
  letter-spacing:-.02em;transition:transform .6s var(--ease)}
.pProssimo:hover strong{font-style:italic;transform:translateX(-12px)}
/* l'anteprima del progetto successivo: un foglio che segue il cursore (lo disegna la scena) */
#anteprima{position:fixed;left:0;top:0;width:200px;height:250px;pointer-events:none;z-index:3;visibility:hidden}

/* le parti della pagina entrano in fila, dopo che la scheda si è allargata */
.progetto .pTesto>*:not(.pTitolo),.progetto .pBarra,.progetto .pProssimo{opacity:0;transform:translateY(18px);
  transition:opacity .6s var(--ease),transform .9s var(--ease)}
.progetto.dentro .pTesto>*,.progetto.dentro .pBarra,.progetto.dentro .pProssimo{opacity:1;transform:none}
.progetto.dentro .pBarra{transition-delay:.15s}
.progetto.dentro .pTema{transition-delay:.22s}
.progetto.dentro .pSommario{transition-delay:.46s}
.progetto.dentro .pAzioni{transition-delay:.54s}
.progetto.dentro .pScheda{transition-delay:.62s}
.progetto.dentro .pProssimo{transition-delay:.74s}

/* ---------- chi sono come pagina ---------- */
.js .chi{padding-top:clamp(20px,4vh,48px)}
.js .chi .chiCorpo>*{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .9s var(--ease)}
.js .chi.dentro .chiCorpo>*{opacity:1;transform:none}
.js .chi.dentro .chiTesto{transition-delay:.1s}
.js .chi.dentro .chiIndice{transition-delay:.2s}
.js .chi.dentro .chiScrivi{transition-delay:.3s}
.js .chiTitolo .biglia{transform:scale(0);transition:transform .9s cubic-bezier(.34,1.56,.64,1) .35s}
.js .chi.dentro .chiTitolo .biglia{transform:none}
.chiChiudi{position:fixed;top:calc(var(--sotto) + 14px);right:var(--pad);font-size:13px;font-weight:500;z-index:5;
  background:none;border:0;cursor:pointer;font-family:inherit;color:var(--inchiostro)}

/* ---------- cursore ---------- */
#cursore{position:fixed;left:0;top:0;z-index:30;pointer-events:none;display:none}
.mano.mosso #cursore{display:block}
.mano,.mano a,.mano button,.mano .biglia,.mano .pQuadro{cursor:none}
#cursore span{position:absolute;left:0;top:0;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;
  background:var(--inchiostro);display:flex;align-items:center;justify-content:center;white-space:nowrap;
  font-size:0;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--carta);
  transition:width .45s var(--ease),height .45s var(--ease),margin .45s var(--ease),font-size .2s,background-color .3s}
/* sopra una scheda il cursore è carta con l'inchiostro: si legge sulle
   schermate scure e sui mondi saturi */
#cursore.grande span{width:78px;height:78px;margin:-39px 0 0 -39px;font-size:11px;
  background:var(--carta);color:var(--inchiostro);box-shadow:0 6px 24px rgba(0,0,0,.18)}
#cursore.link span{width:34px;height:34px;margin:-17px 0 0 -17px;background:transparent;
  border:1px solid var(--inchiostro)}
/* nella stanza il cursore grande ha la luce del progetto: si vede sul buio e sulle schermate */
.stanza #cursore.grande span{background:var(--accento);color:var(--carta)}

/* ---------- l'arrivo ---------- */
.arriva .titolo .riga>span{transform:translateY(128%)}
.arriva .intro,.arriva .testata,.arriva .piede{opacity:0}
.arriva .didascalia,.arriva .dominio{opacity:0;transform:translateY(12px)}
/* etichette e nomi stanno sopra la scheda: arrivano con lei, non prima */
.arriva .stato,.arriva .nomeMondo{opacity:0}
.stato,.nomeMondo{transition:opacity .7s var(--ease);transition-delay:calc(1.05s + var(--k,0) * .075s)}
.arriva:not(.gl) .quadro{clip-path:inset(100% 0 0 0)}
.titolo .riga>span{transition:transform 1.3s var(--ease);transition-delay:calc(.12s + var(--i,0) * .1s)}
.intro,.testata,.piede{transition:opacity 1s var(--ease) .55s}
.didascalia,.dominio{transition:opacity .8s var(--ease),transform 1s var(--ease);
  transition-delay:calc(.75s + var(--k,0) * .07s)}
.quadro{transition:clip-path 1.1s var(--ease);transition-delay:calc(.5s + var(--k,0) * .07s)}

/* LA BIGLIA CADE NEL TITOLO: dall'alto, schiacciandosi a ogni urto, con due
   rimbalzi sempre più piccoli. Poi resta lì; toccandola salta. */
.js .apertura .biglia:not(.posata){animation:cade 1.75s linear .45s both}
.arriva .apertura .biglia{animation-play-state:paused}
.biglia.salta{animation:salta .75s linear both}
@keyframes cade{
  0%  {transform:translateY(-120vh) scale(.9,1.1);animation-timing-function:cubic-bezier(.5,0,1,.6)}
  44% {transform:translateY(0) scale(1.22,.78);animation-timing-function:cubic-bezier(0,0,.3,1)}
  51% {transform:translateY(-.05em) scale(.94,1.07);animation-timing-function:cubic-bezier(0,0,.4,1)}
  66% {transform:translateY(-.36em) scale(1);animation-timing-function:cubic-bezier(.5,0,1,.6)}
  79% {transform:translateY(0) scale(1.1,.9);animation-timing-function:cubic-bezier(0,0,.4,1)}
  88% {transform:translateY(-.1em) scale(1);animation-timing-function:cubic-bezier(.5,0,1,.6)}
  95% {transform:translateY(0) scale(1.03,.97);animation-timing-function:ease-out}
  100%{transform:none}
}
@keyframes salta{
  0%  {transform:none;animation-timing-function:cubic-bezier(0,0,.3,1)}
  12% {transform:scale(1.14,.86);animation-timing-function:cubic-bezier(0,0,.3,1)}
  48% {transform:translateY(-.6em) scale(.95,1.06);animation-timing-function:cubic-bezier(.5,0,1,.6)}
  82% {transform:translateY(0) scale(1.1,.9);animation-timing-function:ease-out}
  100%{transform:none}
}

/* ==========================================================
   SCHERMO STRETTO: la galleria in verticale
   ========================================================== */
@media (max-width:899px){
  /* la testata resta in alto: sopra le pagine dei progetti e mentre si scorre */
  .testata{position:sticky;top:0;grid-template-columns:1fr auto;background:var(--carta);padding-bottom:14px;
    transition:background-color .5s var(--ease) .25s}
  .voci{gap:18px}
  .voci a:first-child,.ora{display:none}
  :root{--sotto:calc(var(--pad) + 36px)}
  .apertura{grid-template-columns:1fr;gap:18px;padding-top:clamp(24px,5vh,48px)}
  .titolo{font-size:clamp(44px,min(14.4vw,22vh),110px)}
  .intro{max-width:none;font-size:16px}
  /* le schede girate che devono ancora arrivare sporgono di qualche pixel: la pagina non si allarga */
  .galleria{overflow:visible;overflow-x:clip}
  .binario{flex-direction:column;width:auto;gap:44px}
  .opera{width:100%}
  .quadro{width:100%;height:auto;aspect-ratio:4/5}
  .opera:not(:has(.mondo)) .quadro{aspect-ratio:4/4.6}
  .dominio{max-width:none}
  .piede{display:none}
  .pCorpo{grid-template-columns:1fr;min-height:0}
  .pQuadro{position:relative;top:auto;--hc:62vh;height:var(--hc);order:-1}
  .pTesto{padding-bottom:0}
  .chiCorpo{grid-template-columns:1fr}
  .chiIndice,.chiScrivi{grid-column:1;grid-row:auto;margin-top:28px}
  /* le schede arrivano quando arrivano sullo schermo, non tutte all'inizio: come
     stampe posate sul tavolo, girate un poco, che si raddrizzano */
  .verticale .opera{--giro:-2.4deg}
  .verticale .opera:nth-child(even){--giro:2.4deg}
  .verticale .quadro{transition:transform 1.1s var(--ease),opacity .8s var(--ease)}
  .arriva.verticale .quadro,.verticale .opera:not(.vista) .quadro{clip-path:none;opacity:0;
    transform:translateY(48px) rotate(var(--giro)) scale(1.05)}
  .verticale .opera:not(.vista) .didascalia,.verticale .opera:not(.vista) .dominio{opacity:0;transform:translateY(12px)}
  .verticale .opera:not(.vista) .stato,.verticale .opera:not(.vista) .nomeMondo{opacity:0}
  .verticale .quadro{transition-delay:0s}
  .verticale .didascalia,.verticale .dominio{transition-delay:.18s}
  .verticale .stato,.verticale .nomeMondo{transition-delay:.45s}
}
/* tablet in verticale: due colonne, non una scheda alta quanto lo schermo */
@media (min-width:600px) and (max-width:899px){
  .binario{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:44px 22px}
  .opera:not(:has(.mondo)) .quadro{aspect-ratio:4/5}
  .nomeMondo{font-size:clamp(36px,6.4vw,56px)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation:none!important;transition-delay:0s!important}
}

/* sugli schermi molto grandi anche le didascalie crescono: a 13 pixel su un
   monitor da 2560 non le leggerebbe nessuno */
@media (min-width:1900px){
  .testata{font-size:15px}
  .intro{font-size:17px;max-width:36ch}
  .didascalia .t{font-size:32px}
  .didascalia .tema,.dominio,.piede{font-size:14.5px}
  .stato{font-size:12px}
  .pScheda dd{font-size:17px}
}
@media (min-width:2400px){
  .testata{font-size:17px}
  .intro{font-size:19px}
  .didascalia .t{font-size:38px}
  .didascalia .tema,.dominio,.piede{font-size:16px}
}

/* ==========================================================
   IL TELETEXT: la seconda faccia del sito
   ========================================================== */
/* nella testata: i quattro tasti colorati del telecomando, e il nome */
.tt{display:inline-flex;align-items:center;gap:7px}
.tasti{display:grid;grid-template-columns:repeat(2,5px);gap:2px}
.tasti b{display:block;width:5px;height:5px;border-radius:1px}
.tasti b:nth-child(1){background:#E8402F}.tasti b:nth-child(2){background:#2FB35F}
.tasti b:nth-child(3){background:#E9C42C}.tasti b:nth-child(4){background:#2BB8C8}
.tt:hover .tasti b{animation:lampeggia .9s steps(1) infinite}
.tt:hover .tasti b:nth-child(2){animation-delay:.22s}.tt:hover .tasti b:nth-child(3){animation-delay:.44s}
.tt:hover .tasti b:nth-child(4){animation-delay:.66s}
@keyframes lampeggia{50%{opacity:.25}}
html:not(.js) .tt{display:none}
@media (max-width:899px){
  .tt span{display:none} .tt{padding:4px}
  /* sul telefono si vede piccolo, ma si tocca grande */
  .tt::before{content:"";position:absolute;inset:-14px -10px}
}

/* lo schermo */
.tt-schermo{position:fixed;inset:0;z-index:50;background:#000;display:none;color:#fff;font-family:var(--sans);
  /* i margini sicuri degli schermi con la tacca: il codice li legge da qui */
  padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)}
.tt-schermo.acceso{display:block}
.tt-schermo canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
/* il televisore si accende e si spegne attorno al centro della pagina, non dello schermo */
.tt-schermo canvas,.tt-righe{transform-origin:var(--centro,50% 50%)}
/* righe nere e trasparenti: sopra la pagina scuriscono come una moltiplicazione, senza costarne una */
.tt-righe{position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px)}
.tt-voce{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tt-esci{position:absolute;top:calc(12px + env(safe-area-inset-top,0px));left:calc(14px + env(safe-area-inset-left,0px));z-index:2;background:none;color:#FFF23A;cursor:pointer;
  border:1px solid rgba(255,242,58,.35);border-radius:3px;padding:10px 14px 9px;
  font:500 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;transition:border-color .3s,background .3s}
.tt-esci:hover,.tt-esci:focus-visible{border-color:#FFF23A;background:rgba(255,242,58,.08);outline:none}
/* nel televisore il cursore torna quello di sempre */
.televisione #cursore{display:none!important}
.mano .tt-schermo,.mano .tt-schermo button{cursor:pointer}
.mano .tt-schermo canvas{cursor:default}

/* il telecomando, sugli schermi da toccare: in fondo, dove arriva il pollice,
   o di fianco alla pagina se lo schermo è girato. Dove, lo decide il codice. */
.tt-telecomando{display:none}
.tt-schermo.con-telecomando .tt-telecomando{display:grid;position:absolute;gap:10px;align-content:start}
.tt-colori{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.tt-c{height:44px;border:0;border-radius:10px;color:#000;font:600 12px/1.1 var(--sans);padding:0 4px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tt-c:disabled{opacity:.25}
.tt-rosso{background:#ff3030}.tt-verde{background:#30ff6a}.tt-giallo{background:#fff23a}.tt-ciano{background:#38fbff}
.tt-cifre{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.tt-cifre button,.tt-passi button{height:46px;background:#1b1b1e;color:#fff;border:1px solid #303034;border-radius:10px;
  font:500 18px/1 var(--sans)}
.tt-passi button{font-size:14px;letter-spacing:.04em}
.tt-cifre button:active,.tt-passi button:active,.tt-c:active{transform:scale(.96)}
.tt-passi{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center}
.tt-display{color:#FFF23A;font:500 18px/1 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.12em;padding:0 10px}

/* accendere: una riga di luce che si apre in immagine, come un televisore di allora */
.tt-schermo.accende canvas,.tt-schermo.accende .tt-righe{animation:accende .68s cubic-bezier(.2,.8,.2,1) both}
@keyframes accende{
  0%  {transform:scale(1,.004);filter:brightness(6)}
  36% {transform:scale(1,.004);filter:brightness(4)}
  62% {transform:scale(1,1.04);filter:brightness(1.7)}
  100%{transform:none;filter:none}
}
/* il tasto per tornare e il telecomando arrivano appena c'è l'immagine */
.tt-schermo.accende .tt-esci,.tt-schermo.accende .tt-telecomando{animation:compare .5s .32s var(--ease) both}
@keyframes compare{from{opacity:0;transform:translateY(8px)}}
/* spegnere: l'immagine si stringe in una riga, la riga in un punto */
.tt-schermo.spegne canvas,.tt-schermo.spegne .tt-righe{animation:spegne .52s cubic-bezier(.6,0,.9,.5) both}
.tt-schermo.spegne .tt-esci,.tt-schermo.spegne .tt-telecomando{opacity:0;transition:opacity .15s}
.tt-schermo.spegne{animation:sfuma .56s linear both}
@keyframes spegne{
  0%  {transform:none;filter:none}
  45% {transform:scale(1,.006);filter:brightness(5)}
  78% {transform:scale(.004,.006);filter:brightness(7);opacity:1}
  100%{transform:scale(0,0);opacity:0}
}
@keyframes sfuma{80%{background:#000}100%{background:rgba(0,0,0,0)}}