/* ============ 08 · METODO, IN PIENA LUCE ============
   Carta chiara e inchiostro. Uno solo cammina e lascia il suo tratto, a trattini, lungo la strada; la camera lo segue da vicino e si ferma a ogni tappa; un filo di grana, perche' la carta si senta. */
#c-metodo{position:relative;height:640vh;background:var(--calce);color:var(--notte)}
#c-metodo .pa-palco{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
#c-metodo .pa-palco::after{content:'';position:absolute;inset:0;pointer-events:none;background:url(../media/grana.png);opacity:.05;mix-blend-mode:multiply}
#c-metodo .mono{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase}
#c-metodo .pa-testa{position:absolute;left:var(--m);top:clamp(96px,15vh,150px);z-index:2}
#c-metodo .pa-testa .mono{margin:0 0 16px;color:var(--pietra)}
#c-metodo .pa-testa h2{margin:0;font:400 clamp(2.2rem,min(1rem + 3.6vw,7.6svh),4.6rem)/.96 'Alauda Titoli','Mona Sans',sans-serif;text-transform:uppercase;color:var(--pietra)}
#c-metodo .pa-testa h2 b{font-weight:400;color:var(--notte)}
#c-metodo .pa-mappa{position:absolute;inset:0;width:100%;height:100%}
/* la strada davanti: appena segnata, a puntini */
#c-metodo .pa-via{fill:none;stroke:rgba(11,11,11,.16);stroke-width:1.4;stroke-dasharray:1.5 9;stroke-linecap:round;vector-effect:non-scaling-stroke}
#c-metodo .pa-segno{fill:none;stroke:none}
/* il tratto di chi cammina: trattini d'inchiostro, uno dopo l'altro; in testa il punto */
#c-metodo #paOrme line{stroke:var(--notte);stroke-width:2.6;stroke-linecap:round;vector-effect:non-scaling-stroke}
#c-metodo .pa-chi circle{fill:var(--notte)}
#c-metodo .pa-chi .alone{fill:none;stroke:var(--notte);stroke-width:1.2;vector-effect:non-scaling-stroke;opacity:.3}
#c-metodo .pa-t circle{fill:var(--calce);stroke:rgba(11,11,11,.3);stroke-width:1.5;vector-effect:non-scaling-stroke;transition:fill .5s var(--ease),stroke .5s var(--ease)}
#c-metodo .pa-t circle.onda{fill:none;stroke:var(--notte);stroke-opacity:0;transition:none}
#c-metodo .pa-t text{font:500 22px 'JetBrains Mono',monospace;letter-spacing:.06em;text-anchor:middle;fill:rgba(11,11,11,.45);transition:fill .5s var(--ease)}
#c-metodo .pa-t.su circle:not(.onda){fill:var(--notte);stroke:var(--notte)}
#c-metodo .pa-t.su text{fill:var(--luce)}
#c-metodo .pa-passi{list-style:none;margin:0;padding:0}
#c-metodo .pa-passi li{position:absolute;left:0;top:0;width:min(20rem,26vw);opacity:0;will-change:transform,opacity}
#c-metodo .pa-dis{display:block;width:64px;height:40px;margin:0 0 12px;fill:none;stroke:var(--notte);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#c-metodo .pa-passi b{display:block;color:var(--pietra);margin-bottom:8px}
#c-metodo .pa-passi h3{margin:0;font:400 clamp(1.4rem,2vw,2rem)/1 'Alauda Titoli','Mona Sans',sans-serif;text-transform:uppercase}
#c-metodo .pa-passi p{margin:10px 0 0;font-size:clamp(14px,1.05vw,16px);line-height:1.5;color:rgba(11,11,11,.72)}
#c-metodo .pa-cifre{position:absolute;left:var(--m);right:var(--m);bottom:7svh;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem}
#c-metodo .pa-cifre>div{padding-top:1rem;border-top:1px solid rgba(11,11,11,.2);opacity:0;will-change:transform,opacity}
#c-metodo .pa-cifre b{display:block;font:400 clamp(2rem,3.6vw,3.4rem)/.9 'Alauda Titoli','Mona Sans',sans-serif}
#c-metodo .pa-cifre span{display:block;margin-top:.6rem;font-size:var(--t-s);line-height:1.45;color:rgba(11,11,11,.7);max-width:24ch}
@media (max-width:899px){
  #c-metodo .pa-passi li{width:min(15rem,52vw)}
  #c-metodo .pa-passi p{display:none}
  #c-metodo .pa-dis{width:48px;height:30px;margin-bottom:8px}
  #c-metodo .pa-cifre{grid-template-columns:1fr 1fr;row-gap:1rem;column-gap:1.2rem;bottom:5svh}
  #c-metodo .pa-cifre span{font-size:.8rem}
}