/* casi/caso.css — le pagine di racconto dei sei casi della proposta C.
   Stessa grammatica della home: carta, Evangelina per il nome e le frasi d'autore,
   Satoshi 500 stretto per i titoli di sezione, angoli arrotondati, il fiore del marchio
   come filigrana gigante su un piano fisso, il fondo che cambia colore con lo scroll.
   Stato finale nel CSS: senza JS la pagina è completa, i colori stanno sulle sezioni.
   Classi dal JS: .mv (movimento), .in-onda (la ripresa gira sopra la foto).
   Ogni pagina dichiara sul <html> il suo accento: --acc (campo) e --acc-su (testo sul campo). */

:root{
  --paper:var(--c-paper); --ink:var(--c-ink); --ember:var(--c-ember);
  --ink-2:#4b4a46;                   /* 8,1:1 sulla carta */
  --filo:rgba(40,40,40,.16);
  --bosco:#2d3d30;
  --g:clamp(20px,6vw,104px);
  --aria:clamp(110px,20vh,220px);
  --raggio:clamp(14px,1.5vw,24px);
  --acc:#405c58; --acc-su:#f4f0e7;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--paper);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--ff-body);font-weight:300;font-size:19px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:clip}
img,video,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,p,ol,ul,dl,dd,figure,blockquote{margin:0;padding:0}
ol,ul{list-style:none}
:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.salta{position:absolute;left:var(--g);top:-80px;z-index:20;background:var(--ink);color:var(--paper);padding:12px 18px;text-decoration:none}
.salta:focus{top:12px}
main,.piede{position:relative;z-index:1}

/* ── testata ──────────────────────────────────────────── */

/* ── la filigrana: il fiore gigante su un piano fisso, dietro a tutto ── */
.filigrana-pagina{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;color:var(--testo-pagina,var(--ink));opacity:.045}
/* GSAP muove solo l'involucro; la rotazione di base sta sull'SVG interno (GSAP si prende la trasformazione) */
.filigrana-moto{position:absolute;--w:max(2800px,300vw);width:var(--w);height:var(--w);left:12vw;top:-18vh}
.filigrana-moto svg{width:100%;height:100%;max-width:none;rotate:-12deg}

/* ── 1. apertura ──────────────────────────────────────── */
.apertura{padding:clamp(130px,18vh,190px) var(--g) clamp(40px,7vh,80px)}
.occhiello{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:300;letter-spacing:.16em;text-transform:uppercase}
.occhiello::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--acc);flex:none}
.titolo{font-family:var(--ff-display);font-weight:400;font-size:clamp(3.4rem,10.5vw,10.5rem);line-height:.92;letter-spacing:-.01em;
  margin:clamp(16px,3vh,32px) 0 0 -.04em;max-width:14ch;text-wrap:balance}
.titolo--lungo{font-size:clamp(3rem,8.4vw,8.6rem);max-width:16ch}
.frase-apertura{font-family:var(--ff-display);font-size:clamp(1.55rem,2.7vw,2.6rem);line-height:1.18;max-width:28ch;margin-top:clamp(18px,3vh,34px);text-wrap:balance}
.dati{display:grid;grid-template-columns:1.6fr 1fr .6fr 1.4fr;gap:0 clamp(18px,3vw,48px);margin-top:clamp(36px,6vh,72px);border-top:3px solid var(--acc)}
.dati > div{padding-top:16px}
.dati dt{font-size:13px;font-weight:300;letter-spacing:.16em;text-transform:uppercase;opacity:.94}
.dati dd{margin-top:6px;font-size:17px;line-height:1.45}
.segnaposto{font-style:italic;opacity:.94}

/* ── 2. la ripresa (o la foto grande) ─────────────────── */
.ripresa{position:relative;padding:0 var(--g)}
.ripresa-cornice{position:relative;aspect-ratio:var(--rapporto,16/9);max-height:88vh;width:100%;margin:0 auto;border-radius:var(--raggio);overflow:hidden;background:#e7e1d4}
.ripresa-moto{position:absolute;inset:0}
.ripresa-foto,.ripresa-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--fuoco,50% 50%)}
.ripresa-video{opacity:0;transition:opacity .8s ease}
.in-onda .ripresa-video{opacity:1}
.pausa{position:absolute;right:16px;bottom:16px;z-index:2;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px;border:0;border-radius:22px;
  background:rgba(244,240,231,.94);color:var(--ink);font:400 15px/1 var(--ff-body);cursor:pointer}
.pausa[hidden]{display:none}
.pausa::before{content:"";width:0;height:0;border-left:9px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent}
.pausa[aria-pressed="true"]::before{width:9px;height:12px;border:0;background:linear-gradient(90deg,currentColor 0 3px,transparent 3px 6px,currentColor 6px)}
.pausa:hover{background:var(--paper)}
.pausa:focus-visible{outline-color:var(--ink)}

/* ── 3. il racconto ───────────────────────────────────── */
.racconto{position:relative;padding:var(--aria) var(--g) 0}
/* il segno: una linea ember sottile nel margine, che cresce mentre leggi e finisce nel punto della frase */
.filo-lettura{position:absolute;left:calc(var(--g) * .42);top:var(--aria);bottom:var(--filo-fondo,0);width:3px;pointer-events:none}
.filo-lettura span{display:block;width:100%;height:100%;border-radius:3px;background:var(--ember);transform-origin:50% 0}
.filo-lettura i{position:absolute;left:50%;bottom:0;width:15px;height:15px;margin:0 0 -7px -7.5px;border-radius:50%;background:var(--ember)}
.capitolo{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(28px,6vw,110px);padding-bottom:clamp(80px,14vh,160px)}
.capitolo-testa{position:sticky;top:clamp(90px,14vh,140px);align-self:start}
.capitolo-n{font-size:14px;font-weight:300;letter-spacing:.16em;text-transform:uppercase;opacity:.94}
.capitolo h2,.risultato h2{font-family:var(--ff-body);font-weight:300;letter-spacing:-.03em;line-height:.95;font-size:clamp(2.5rem,4.8vw,5rem);margin-top:14px}
.corpo{max-width:36em;display:grid;gap:1.05em}
.corpo .lead{font-size:clamp(1.3rem,1.8vw,1.6rem);line-height:1.38;letter-spacing:-.01em}
.corpo ul{display:grid;gap:.5em}
.corpo li{position:relative;padding-left:1.4em}
.corpo li::before{content:"";position:absolute;left:0;top:.72em;width:.5em;height:2px;border-radius:2px;background:var(--acc)}
.gruppi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3vw,40px) clamp(24px,3vw,44px);margin-top:.6em}
.gruppo{padding-top:16px;border-top:1px solid var(--filo)}
.gruppo h3,.corpo h3{font-size:clamp(1.15rem,1.4vw,1.3rem);font-weight:300;letter-spacing:-.015em;line-height:1.25;margin-bottom:.55em}
.gruppo ul{gap:.4em}
.gruppo li,.gruppo p{font-size:17px;line-height:1.55}
.corpo h3{margin:.8em 0 0}
.cuore{margin-top:.8em;padding:clamp(22px,3vw,40px);border-radius:var(--raggio);background:color-mix(in srgb,var(--acc) 12%,transparent);display:grid;gap:1em}
.cuore h3{margin:0;font-size:clamp(1.3rem,1.8vw,1.6rem);letter-spacing:-.025em}

/* interludio: una foto larga fra la sfida e l'approccio, in parallasse lenta */
.interludio{position:relative;margin:0 0 clamp(80px,14vh,160px);aspect-ratio:21/9;border-radius:var(--raggio);overflow:hidden;background:#e7e1d4}
.interludio-moto{position:absolute;inset:-9% 0}
.interludio img{width:100%;height:100%;object-fit:cover;object-position:var(--fuoco,50% 50%)}

/* la frase d'autore, in Evangelina, col punto ember come nella home */
.frase-autore{padding:0 0 var(--aria);display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(28px,6vw,110px)}
.frase-autore blockquote{grid-column:2}
.frase-autore p{font-family:var(--ff-display);font-size:clamp(2.1rem,4.4vw,4.4rem);line-height:1.08;text-wrap:balance}
.frase-autore .coda{font-family:var(--ff-body);font-size:clamp(1.1rem,1.4vw,1.3rem);line-height:1.5;margin-top:clamp(18px,3vh,30px);max-width:44ch;opacity:.94}
.punto{display:inline-block;width:.15em;height:.15em;border-radius:50%;background:var(--ember);margin-left:.06em;vertical-align:baseline}

/* ── 4. risultato: il campo nel colore del caso ───────── */
.risultato{position:relative;overflow:clip;background:var(--acc);color:var(--acc-su);padding:var(--aria) var(--g)}
.risultato-in{position:relative;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(28px,6vw,110px)}
.risultato .capitolo-n{opacity:.94}
.risultato .corpo{max-width:none}
.risultato .lead{font-size:clamp(1.4rem,2.1vw,2rem);line-height:1.3;max-width:34ch}
.esiti{display:block!important;border-top:1px solid color-mix(in srgb,currentColor 28%,transparent)}
.esiti li{padding:clamp(14px,2vh,22px) 0 clamp(14px,2vh,22px) 2.2em;border-bottom:1px solid color-mix(in srgb,currentColor 28%,transparent);font-size:clamp(1.1rem,1.5vw,1.35rem);line-height:1.4}
.esiti li::before{top:calc(clamp(14px,2vh,22px) + .7em);width:.9em;background:currentColor}
.risultato .chiusa{font-family:var(--ff-display);font-size:clamp(1.6rem,2.6vw,2.5rem);line-height:1.2;max-width:30ch;margin-top:clamp(20px,4vh,44px);text-wrap:balance}
.risultato p + p{margin-top:0}

/* ── 5. galleria ──────────────────────────────────────── */
.galleria{padding:var(--aria) var(--g) 0}
.galleria-testa{display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:clamp(28px,5vh,56px)}
.galleria-testa h2{font-family:var(--ff-body);font-weight:300;letter-spacing:-.03em;line-height:.95;font-size:clamp(2.5rem,4.8vw,5rem)}
.griglia{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(12px,1.6vw,24px)}
.tassello{grid-column:span var(--span,6)}
.tassello-cornice{position:relative;height:clamp(260px,34vw,540px);border-radius:var(--raggio);overflow:hidden;background:#e7e1d4}
.tassello-moto{position:absolute;inset:0}
.tassello img,.tassello video{width:100%;height:100%;object-fit:cover;object-position:var(--fuoco,50% 50%)}
.tassello figcaption{margin-top:10px;font-size:14px;font-weight:300;letter-spacing:.16em;text-transform:uppercase;opacity:.94}
.vedi-sito{display:flex;align-items:baseline;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;margin-top:clamp(60px,10vh,120px);padding:clamp(18px,3vh,30px) 0;
  border-top:1px solid var(--filo);border-bottom:1px solid var(--filo);text-decoration:none;min-height:44px}
.vedi-sito-t{font-family:var(--ff-display);font-size:clamp(2.4rem,5.6vw,5.6rem);line-height:1;background:linear-gradient(var(--ember),var(--ember)) 0 100%/0 3px no-repeat;transition:background-size .6s cubic-bezier(.2,.7,.2,1)}
.vedi-sito:hover .vedi-sito-t,.vedi-sito:focus-visible .vedi-sito-t{background-size:100% 3px}
.vedi-sito-d{font-size:clamp(1rem,1.3vw,1.2rem);font-weight:300;letter-spacing:.02em;opacity:.94}
.vedi-sito-d span{display:inline-block;transition:translate .4s cubic-bezier(.2,.7,.2,1)}
.vedi-sito:hover .vedi-sito-d span{translate:3px -3px}

/* ── 6. caso successivo ───────────────────────────────── */
.prossimo{background:var(--acc);color:var(--acc-su);padding:var(--aria) var(--g) clamp(60px,10vh,110px);margin-top:var(--aria);overflow-x:clip}
.prossimo-link{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:end;gap:clamp(24px,5vw,80px);text-decoration:none}
.prossimo-etichetta{display:block;font-size:15px;font-weight:300;letter-spacing:.16em;text-transform:uppercase}
.prossimo-etichetta span{display:inline-block;transition:translate .5s cubic-bezier(.2,.7,.2,1)}
.prossimo-link:hover .prossimo-etichetta span{translate:10px 0}
.prossimo-nome{display:block;font-family:var(--ff-display);font-size:clamp(3.2rem,8vw,8.4rem);line-height:.95;margin-top:clamp(16px,3vh,30px);text-wrap:balance}
.prossimo-frase{display:block;font-family:var(--ff-display);font-size:clamp(1.3rem,2vw,1.9rem);line-height:1.25;margin-top:clamp(16px,3vh,30px);max-width:30ch;opacity:.9}
.prossimo-foto{aspect-ratio:4/3;border-radius:var(--raggio);overflow:hidden;background:color-mix(in srgb,currentColor 12%,transparent)}
.prossimo-foto img{width:100%;height:100%;object-fit:cover;transition:scale 1.2s cubic-bezier(.2,.7,.2,1)}
.prossimo-link:hover .prossimo-foto img{scale:1.04}
.prossimo-link:focus-visible{outline-offset:10px}
.tutti{display:inline-flex;align-items:center;min-height:44px;margin-top:clamp(48px,8vh,90px);font-size:17px;font-weight:300;text-decoration:none;border-bottom:1px solid color-mix(in srgb,currentColor 50%,transparent)}
.tutti:hover{border-bottom-color:currentColor}

/* ── piede ─────────────────────────────────────────────── */
.piede{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px 36px;padding:28px var(--g) 40px;background:var(--bosco);color:rgba(244,240,231,.88);font-size:15px}
.piede a{display:inline-flex;align-items:center;min-height:44px}
.piede-marchio{height:22px;width:auto}
.piede-motto{font-family:var(--ff-display);font-size:1.3rem;color:rgba(244,240,231,.92)}

/* ── movimento: il colore del fondo lo porta la pagina (caso.js) ─────────── */
.mv body{background:var(--fondo-pagina,var(--paper))}
.mv main{color:var(--testo-pagina,var(--ink))}
.mv main [data-fondo]{background:transparent;color:inherit}
/* l'entrata dell'apertura è tutta in CSS: parte al primo disegno, non aspetta GSAP dalla CDN
   (il titolo è l'LCP), e finisce nello stato finale anche senza JS */
@keyframes sale{from{opacity:0;translate:0 var(--da,.4em)}to{opacity:1;translate:0 0}}
.occhiello,.titolo,.frase-apertura,.dati{animation:sale 1.2s cubic-bezier(.16,1,.3,1) both}
.titolo{--da:.28em;animation-duration:1.4s;animation-delay:.08s}
.frase-apertura{animation-delay:.28s}
.dati{--da:24px;animation-delay:.42s}

/* ── telefono ─────────────────────────────────────────── */
@media (max-width:760px){
  body{font-size:18px}
  .filigrana-moto{--w:max(1600px,420vw);left:-40vw}
  .dati{grid-template-columns:1fr 1fr;gap:0 18px}
  .dati > div{padding-bottom:12px}
  .dati > div:first-child{grid-column:1/-1}
  .ripresa-cornice{aspect-ratio:var(--rapporto-tel,4/5)}
  .pausa{right:10px;bottom:10px}
  .filo-lettura{left:8px;width:2px}
  .capitolo,.frase-autore,.risultato-in{grid-template-columns:1fr;gap:18px}
  .capitolo-testa{position:static}
  .frase-autore blockquote{grid-column:1}
  .gruppi{grid-template-columns:1fr}
  .interludio{aspect-ratio:4/5}
  .griglia{grid-template-columns:1fr}
  .tassello{grid-column:1/-1}
  .tassello-cornice{height:auto;aspect-ratio:var(--ar,3/2)}
  .tassello[style*="--ar:2/3"] .tassello-cornice{aspect-ratio:4/5}
  .tassello[style*="--ar:21/9"] .tassello-cornice{aspect-ratio:3/2}
  .prossimo-link{grid-template-columns:1fr}
  .prossimo-foto{order:-1}
  .piede{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .occhiello,.titolo,.frase-apertura,.dati{animation:none}
  .ripresa-video,.vedi-sito-t,.prossimo-foto img,.vedi-sito-d span,.prossimo-etichetta span{transition:none}
}
.dati-settore{opacity:.94}
.prossimo-testo{display:block}
/* le maschere di SplitText non tagliano le discendenti (g, p) né le code di Evangelina */
.word-mask,.line-mask{padding-bottom:.16em;margin-bottom:-.16em}

/* 26/09 — Satoshi leggero come nel sito di prima; etichette maiuscole piccole a 400;
   Evangelina solo per titoli e citazioni, le frasi di testo in Satoshi */
.occhiello,.dati dt,.capitolo-n,.tassello figcaption,.prossimo-etichetta{font-weight:400}
.frase-apertura,.prossimo-frase{font-family:var(--ff-body);font-weight:300;letter-spacing:-.01em;line-height:1.35}
.frase-apertura{font-size:clamp(1.3rem,1.9vw,1.8rem)}
.prossimo-frase{font-size:clamp(1.15rem,1.6vw,1.5rem)}

/* ══ 26/09 — il segno della home cuce il caso, le immagini si formano a puntini ══
   La linea ember (caso.js) sta sotto a tutto (z −1 dentro main); le tappe sono punti spenti
   che si accendono con l'alone quando la linea li raggiunge. La tela WebGL (piani.js) sta
   sopra la linea e sotto a ciò che è posizionato (video, bottoni). */
.filo-lettura{display:none}
.segno-filo{position:absolute;left:0;top:0;z-index:-1;pointer-events:none;overflow:visible}
.segno-filo path{fill:none;stroke:var(--c-ember);stroke-linecap:round;stroke-linejoin:round}
.segno-filo circle{fill:var(--c-ember);transform-box:fill-box;transform-origin:center}
/* 26/09 sera — tappe più fini: il punto cresce, l'anello si apre, un'onda sottile si allarga e svanisce */
.tappa-punto{transform:scale(.5);opacity:.55;transition:transform .7s cubic-bezier(.3,1.5,.5,1),opacity .4s}
.tappa-anello{fill:var(--c-ember);fill-opacity:.12;stroke:var(--c-ember);stroke-width:1.5;vector-effect:non-scaling-stroke;
  transform:scale(.35);opacity:0;transition:transform .9s cubic-bezier(.2,.7,.2,1),opacity .6s}
.tappa-onda{fill:none;stroke:var(--c-ember);stroke-width:1.25;vector-effect:non-scaling-stroke;opacity:0}
.tappa.accesa .tappa-punto{transform:scale(1);opacity:1}
.tappa.accesa .tappa-anello{transform:scale(1);opacity:.9}
.tappa.accesa .tappa-onda{animation:onda 1.4s cubic-bezier(.2,.7,.2,1) .1s both}
@keyframes onda{from{transform:scale(.3);opacity:.7}to{transform:scale(1);opacity:0}}
@media (prefers-reduced-motion:reduce){.tappa-punto,.tappa-anello{transition:none}.tappa.accesa .tappa-onda{animation:none}}
.prossimo-nome .punto--fine{width:.13em;height:.13em;margin-left:.04em}
.tela-casi{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.gl-pronto{background:transparent!important}
.gl-pronto img{opacity:0;transition:opacity .4s}
.gl-casi .prossimo-link:hover .prossimo-foto img{scale:1}
/* col segno, la testata del capitolo non resta appiccicata: sta accanto alla sua tappa */
.mv .capitolo-testa{position:relative;top:auto}

/* 26/09 — dalla tavola al caso: l'immagine d'apertura e il titolo portano i nomi della transizione.
   Verso il caso successivo i nomi passano alla sua foto e al suo nome (caso.js). */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}
/* i nomi del passaggio (foto e titolo) li mette caso.js solo arrivando da una scheda o da una tavola:
   fissi qui, ogni cambio di pagina trasformava il titolo vecchio nel nuovo e poi lo faceva entrare di nuovo */
.vt-arrivo .ripresa-cornice{view-transition-name:caso-media}
.vt-arrivo .titolo{view-transition-name:caso-titolo}
.vt-via .ripresa-cornice,.vt-via .titolo{view-transition-name:none}
::view-transition-group(caso-media),::view-transition-group(caso-titolo){animation-duration:.95s;animation-timing-function:cubic-bezier(.65,0,.2,1)}
::view-transition-group(caso-media){border-radius:clamp(14px,1.5vw,24px);overflow:clip}
::view-transition-old(caso-media),::view-transition-new(caso-media){height:100%;object-fit:cover}
::view-transition-old(root),::view-transition-new(root){animation-duration:.55s}
/* arrivando con la transizione il titolo non rifà la sua entrata: ci pensa il passaggio */
.da-vt .titolo{animation:none}
.vt-partenza img{opacity:1!important;transition:none!important}
/* 27/09 — i titoli in Satoshi a 400: a 300 non si distinguevano dal testo */
.capitolo h2,.risultato h2,.galleria-testa h2,.gruppo h3,.corpo h3,.cuore h3{font-weight:400}

/* 28/09 — la trama di punti della home anche qui, nei campi colorati (chiusura, «quando ha senso», risultato):
   un retino da stampa a nuvole, disegnato una volta da caso.js e fermo nel colore del testo */
.trama{position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(circle,color-mix(in srgb,currentColor 30%,transparent) 1px,transparent 1.35px);background-size:13px 13px;
  -webkit-mask-image:linear-gradient(var(--trama-dir,100deg),transparent 35%,#000 85%);mask-image:linear-gradient(var(--trama-dir,100deg),transparent 35%,#000 85%)}
.trama.retino{background-size:auto;background-repeat:no-repeat;background-position:center;-webkit-mask-image:none;mask-image:none;inset:-6% 0}
.chiusura .trama{--trama-dir:20deg}
.sezione--campo .trama{--trama-dir:160deg}
.risultato .trama{--trama-dir:280deg}
.chiusura > :not(.trama),.sezione--campo > :not(.trama),.risultato > :not(.trama){position:relative;z-index:1}
.sezione--campo,.chiusura{overflow-x:clip}
/* 27/09 — i titoli dei capitoli dei casi in Evangelina, come nelle pagine (erano rimasti in Satoshi Light dalla prima versione) */
.capitolo h2,.risultato h2,.galleria-testa h2{font-family:var(--ff-display);font-weight:400;letter-spacing:0;line-height:1}