/* Stile della home, estratto da index.html del sito statico.
   Cambiano solo i selettori delle due liste (.disc e .lg-track): Elementor
   non scrive ul e li, quindi le voci sono i figli diretti. */

/* ============================================================
   HERO
   ============================================================ */
#hero{
  position:relative;min-height:100svh;background:#000;
  padding:calc(var(--nav-h) + 2vh) var(--pad) var(--pad);
  display:flex;flex-direction:column;overflow:hidden;isolation:isolate;
}
#hero-grad{position:absolute;inset:0;width:100%;height:100%;z-index:-3;display:block}
#hero-3d{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
#hero::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 45%,transparent 40%,rgba(6,7,8,.85) 100%);
}
.h1{
  font-family:var(--f-display);font-weight:var(--w-display);
  font-size:clamp(34px,7.3vw,126px);
  letter-spacing:-.015em;line-height:1.02;
  text-transform:uppercase;max-width:none;
}
/* Il serif segna la voce riflessiva: seconda riga dei titoli accoppiati,
   biografia in prima persona, chiuse. Il sans resta la voce strutturale. */
.serif{font-family:var(--f-serif);font-weight:var(--w-serif)}
.h1 .serif{letter-spacing:.005em}
.h1 .line{overflow:hidden;display:block;padding:0 .1em .17em 0;margin:0 -.1em -.17em 0}
.h1 .line > span{display:block;transform:translateY(130%)}
.h1 .serif{display:inline-block}
.hero-cta{
  margin-top:clamp(28px,4vw,52px);display:inline-flex;align-items:center;gap:44px;
  padding-bottom:12px;width:max-content;border-bottom:1px solid rgba(255,255,255,.4);
  font-family:var(--f-mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;
}
.hero-cta .arw,.link-under .arw{transition:transform .5s var(--ease)}
.hero-cta:hover .arw,.link-under:hover .arw{transform:translateX(6px)}
.hero-foot{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap;padding-top:60px}
.hero-hint{
  font-family:var(--f-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);text-align:center;line-height:1.9;flex:1;min-width:220px;
}
.hero-hint b{color:var(--white);font-weight:400}
.hero-hint b.hl,.hero-hint strong{color:var(--orange);font-weight:400}
/* su touch non c'è nessun cursore da seguire: la riga sarebbe una bugia */
@media (hover:none),(pointer:coarse){ .hero-hint{display:none} }
.hero-id{
  font-family:var(--f-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  line-height:2;
}
.hero-id b{font-weight:500;color:var(--white)}
.hero-id span{color:var(--dim)}

.contact-note{margin-top:22px;font-size:clamp(15px,1.4vw,19px);line-height:1.7}
/* blocchi a larghezza del contenuto: cosi' la sottolineatura del telefono
   non passa dietro alla riga successiva */
.contact-note a,.contact-note span{display:block;width:max-content;max-width:100%}
.contact-note a{border-bottom:1px solid rgba(34,34,33,.35)}
.contact-note span{margin-top:4px;color:rgba(34,34,33,.74)}

.avail{
  margin-top:26px;display:inline-flex;align-items:center;gap:10px;
  font-family:var(--f-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
}
.avail i{width:7px;height:7px;border-radius:50%;background:var(--orange);flex:none}

.badge .b-l{padding:16px 18px;display:grid;place-items:center;gap:8px;border-right:1px solid rgba(255,255,255,.22);text-align:center}
.badge .b-r{padding:16px 20px;display:grid;align-content:center}
.badge .globe{width:26px;height:26px;border:1px solid var(--white);border-radius:50%;position:relative}
.badge .globe::before,.badge .globe::after{content:"";position:absolute;inset:0;border:1px solid var(--white);border-radius:50%}
.badge .globe::before{transform:scaleX(.42)}
.badge .globe::after{border-width:0 0 1px 0;top:50%;border-radius:0}
/* richiamo secondario in basso a destra: sottolineato, senza pill, piu' quieto
   del bottone principale perche' non deve competerci */
.hero-giu{margin-left:auto;gap:28px;color:var(--white)}
.hero-giu .arw{transition:transform .35s var(--ease)}
.hero-giu:hover .arw{transform:translateY(5px)}
@media (max-width:860px){
  .hero-giu{margin-left:0}
  .hero-foot{flex-direction:column;align-items:flex-start}
  .hero-hint{text-align:left}
}

/* ============================================================
   CURTAIN — transizione a tendina (scuro -> chiaro)
   ============================================================ */
#curtain{position:relative;background:var(--ink)}
#ct-pin{position:relative;height:100svh;overflow:hidden}

/* i due strati sono identici: A sotto (scuro), B dentro le lamelle (chiaro) */
.ct-layer{
  position:absolute;left:0;top:0;width:100%;height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  padding:var(--nav-h) 0;
  /* niente pointer-events:none: la sonda della barra deve poter "vedere"
     le lamelle chiare, altrimenti le attraversa e legge il fondo scuro */
  user-select:none;
}
.ct-layer .ct-head{
  position:absolute;top:clamp(80px,14vh,150px);left:var(--pad);
  font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;line-height:2;
}
.ct-layer .ct-big i{font-family:var(--f-serif);font-weight:var(--w-serif);font-style:normal;padding:0 .03em}
/* DESIGN in serif, CODE resta sans: le due meta' del lavoro, due voci diverse.
   Il serif ha aste piu' sottili, quindi la crenatura strettissima del sans
   qui va allentata o le grazie si toccano. */
.ct-layer .ct-big em{
  font-family:var(--f-serif);font-weight:var(--w-serif);font-style:normal;
  letter-spacing:-.01em;
}
.ct-layer .ct-big{
  font-size:var(--ctfs);line-height:1;font-weight:500;letter-spacing:-.045em;
  white-space:nowrap;width:max-content;position:relative;left:50%;
  will-change:transform;
}
.ct-layer .ct-tag{
  position:absolute;bottom:clamp(70px,12vh,130px);left:0;width:100%;text-align:center;
  font-size:clamp(15px,1.5vw,22px);letter-spacing:.01em;
}
/* strato A — scuro */
#ct-base{background:var(--ink);color:var(--white);z-index:1}
/* strato B — lamelle chiare */
#ct-slats{position:absolute;inset:0;z-index:2}
.ct-slat{
  position:absolute;left:0;width:100%;overflow:hidden;
  transform:scaleY(0);will-change:transform;
}
.ct-slat .ct-layer{background:var(--paper);color:var(--ink)}
/* La riga in alto era `top:auto;bottom:auto`: su un elemento assoluto vuol
   dire "resta dove ti mette il flusso", e il flusso qui e' una colonna
   centrata verticalmente. Cosi' la domanda finiva esattamente sopra a
   DESIGN + CODE, due testi uno addosso all'altro. Torna in cima, con un
   limite a destra perche' su schermo stretto va a capo su tre righe. */
@media (max-width:700px){
  .ct-layer .ct-head{
    top:calc(var(--nav-h) + 24px);
    right:var(--pad);
    font-size:12px;line-height:1.9;
  }
}

/* ============================================================
   MOTION — carosello WebGL
   ============================================================ */
#motion{position:relative;background:var(--paper);color:var(--ink)}
#mo-pin{position:relative;height:100svh;overflow:hidden}
/* Le copertine passano dietro al testo: abbassate di contrasto e appena
   sfocate, cosi' nessuno le legge come uno showreel e il metodo resta leggibile. */
#mo-canvas{
  position:absolute;inset:0;width:100%;height:100%;z-index:1;display:block;
  opacity:.5;filter:saturate(.9);
}
/* Velo di carta tra le card e il testo. I due stop di sinistra restano densi,
   perche' e' li' che passa la colonna di testo; a destra si apre, dove ci sono
   solo le copertine e si possono guardare. */
#mo-pin::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(to right,
    rgba(210,210,210,.97) 0%, rgba(210,210,210,.88) 42%,
    rgba(210,210,210,.28) 72%, rgba(210,210,210,.06) 100%);
}
/* Da desktop la colonna di testo occupa solo i primi ~510px, quindi il velo
   denso puo' finire molto prima e la spirale si vede quasi per intero.
   Sotto i 1024 resta come sopra: il testo passa sopra le copertine, e va bene. */
@media (min-width:1024px){
  #mo-canvas{opacity:.58}
  #mo-pin::after{
    background:linear-gradient(to right,
      rgba(210,210,210,.96) 0%, rgba(210,210,210,.86) 34%,
      rgba(210,210,210,.24) 52%, rgba(210,210,210,.04) 100%);
  }
}

/* ---- metodo 01-04 ---- */
.mo-steps{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  display:flex;flex-direction:column;justify-content:center;
  padding:0 var(--pad);
}
.mo-kicker{color:rgba(6,7,8,.85);margin-bottom:clamp(20px,3vh,38px)}
/* i tre blocchi stanno sovrapposti: l'altezza la tiene il piu' alto.
   Con due paragrafi per blocco serve piu' spazio di quando erano quattro
   passaggi da una frase, altrimenti il secondo paragrafo scavalca la nota
   in fondo alla sezione. */
.mo-stage{position:relative;width:min(46ch,100%);min-height:clamp(300px,44vh,440px)}
.mo-step{position:absolute;left:0;top:0;width:100%}
.mo-step .n{
  display:block;color:rgba(6,7,8,.85);
  font-size:12px;margin-bottom:clamp(10px,1.4vh,18px);
}
/* Sceso da 84px: i titoli sono passati da due parole ("La consegna") a una
   ("Filosofia"), ma sotto adesso ci sono due paragrafi invece di uno. */
.mo-step :is(h2,h3){
  font-family:var(--f-serif);font-weight:var(--w-serif);
  font-size:clamp(34px,4.6vw,66px);line-height:.98;letter-spacing:-.015em;
  margin-bottom:clamp(12px,1.8vh,22px);
}
.mo-step > p{
  max-width:34ch;font-size:clamp(15px,1.35vw,19px);line-height:1.55;
  color:rgba(6,7,8,.78);
}
.mo-step > p + p{margin-top:clamp(10px,1.4vh,18px)}
/* Il blocco si misura anche sull'altezza, non solo sulla larghezza. Su un
   portatile da 13" l'area utile del browser sta intorno ai 700px: li' i due
   paragrafi scavalcavano di una sessantina di pixel la nota in fondo alla
   sezione. Qui il titolo cala, il testo si stringe e l'aria si riduce. */
@media (max-height:820px){
  .mo-kicker{margin-bottom:14px}
  .mo-stage{min-height:clamp(240px,34vh,320px)}
  .mo-step :is(h2,h3){font-size:clamp(28px,3.6vw,48px);margin-bottom:12px}
  .mo-step > p{font-size:16px;line-height:1.5}
  .mo-step > p + p{margin-top:11px}
  /* Anche stretto, il blocco arriva a una trentina di pixel dalla nota in
     fondo. La nota e' un'indicazione di strada, il metodo e' il contenuto:
     sotto gli 820px sparisce lei e resta il contatore. */
  .mo-foot p:first-child{display:none}
}

/* senza JS o con reduced-motion i passaggi si leggono uno sotto l'altro */
.mo-steps.statica .mo-stage{min-height:0;display:grid;gap:clamp(22px,3vh,40px)}
.mo-steps.statica .mo-step{position:relative}
.mo-steps.statica .mo-step :is(h2,h3){font-size:clamp(28px,3.4vw,44px)}

.mo-foot{
  position:absolute;left:0;right:0;bottom:0;z-index:3;padding:var(--pad);
  display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;
}
.mo-foot p{max-width:30ch;font-size:14px;line-height:1.5;color:rgba(6,7,8,.72)}
/* margin-left:auto e non solo space-between: quando la nota accanto sparisce
   (viewport basso) il contatore resterebbe da solo appiccicato a sinistra. */
.mo-prog{color:rgba(6,7,8,.85);font-size:12px;margin-left:auto}
.link-under{
  display:inline-flex;align-items:center;gap:36px;
  font-family:var(--f-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  padding-bottom:10px;border-bottom:1px solid currentColor;
}
/* Senza WebGL o con reduced-motion cade solo l'arco, non il testo: prima la
   sezione si nascondeva del tutto, ma ora contiene il metodo, che e' contenuto. */
#motion.no-gl #mo-pin{height:auto;overflow:visible;padding:clamp(80px,12vh,140px) 0}
#motion.no-gl #mo-canvas,
#motion.no-gl .mo-prog{display:none}
#motion.no-gl #mo-pin::after{display:none}
#motion.no-gl .mo-steps{position:relative;inset:auto;padding:0 var(--pad)}
#motion.no-gl .mo-foot{position:relative;inset:auto;padding:var(--pad);margin-top:clamp(30px,5vh,60px)}

/* ============================================================
   SHOWCASE — le card entrano da fuori
   ============================================================ */
#showcase{
  background:var(--paper);color:var(--ink);
  /* il primo valore deve stare sotto la nav fissa (84px), altrimenti il titolo ci finisce sotto */
  padding:clamp(110px,14vh,170px) var(--pad) clamp(90px,16vh,200px);
  overflow:hidden;
}
.sc-head{
  display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;
  padding-bottom:clamp(26px,4vh,56px);
}
/* serif: le aste sono piu' sottili, la crenatura del sans qui e' troppo stretta */
.sc-head h2{
  font-family:var(--f-serif);font-weight:var(--w-serif);
  font-size:clamp(32px,4.9vw,72px);letter-spacing:-.012em;line-height:1.02;max-width:18ch;
}
.sc-head .mono{color:#3a3a3a}
.sc-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,2.4vw,42px);align-items:start;
}
.sc-card{
  position:relative;aspect-ratio:16/10;border-radius:5px;overflow:hidden;
  will-change:transform,opacity;
  box-shadow:0 24px 60px -34px rgba(0,0,0,.5);
  margin-top:var(--dy,0);
}
.sc-card .ph{transition:transform .8s var(--ease)}
.sc-card:hover .ph{transform:scale(1.035)}
/* usato solo quando la card ha una pagina interna: copre tutto il riquadro */
.sc-link{position:absolute;inset:0;display:block;z-index:3}
@media (max-width:900px){
  .sc-grid{grid-template-columns:repeat(2,1fr)}
  .sc-card{margin-top:0}
}
@media (max-width:560px){.sc-grid{grid-template-columns:1fr}}

/* Il riquadro copertina (.ph, .ph-img, .ph-m…) sta in comune.css: lo montano
   anche l'anteprima dell'archivio qui sotto e quella delle pagine progetto.
   Qui resta solo quello che riguarda la card di questa griglia, cioe' le due
   righe .sc-card .ph sopra. */

/* ============================================================
   WORK
   L'archivio in se' — .sec-head, .wlist, .wrow, .wpeek — sta in comune.css,
   perche' la stessa lista sta anche in fondo alle pagine progetto. Qui resta
   il vestito della sezione, che e' solo di questa pagina.
   ============================================================ */
#work{background:var(--ink);padding:clamp(80px,14vh,180px) var(--pad)}

/* ============================================================
   LOGHI
   Due nastri che scorrono in verso opposto, clienti sopra e
   collaborazioni sotto. Il motore e' CSS - una translateX(-50%) in
   loop - e non GSAP: il ticker dorme insieme alla finestra, e qui
   costerebbe due nastri fermi a meta' in una scheda di sfondo.
   Il salto e' esatto perche' il varco sta nel margin-right di ogni
   voce e non in un gap del flex: cosi' la larghezza del nastro e'
   il doppio tondo di un set, e -50% cade sull'inizio della copia.
   Senza JS, o con reduced-motion, la classe .in-moto non arriva: la
   fascia resta ferma e si scorre a mano, che e' meglio di un nastro
   tagliato con dentro meta' dei marchi.
   ============================================================ */
#loghi{
  --lg-gap:clamp(46px,6vw,110px);
  --lg-h:clamp(34px,4.2vw,66px);
  background:var(--ink);
  padding:clamp(60px,10vh,130px) 0;
  border-top:1px solid rgba(255,255,255,.14);
}
.lg-head{padding:0 var(--pad);margin-bottom:clamp(34px,5vh,64px)}
.lg-head h2{font-size:clamp(26px,3.6vw,52px);letter-spacing:-.045em;line-height:1.02}
.lg-riga + .lg-riga{margin-top:clamp(28px,4.5vh,54px)}
.lg-eti{padding:0 var(--pad);margin-bottom:16px;color:var(--dim);font-size:12px;letter-spacing:.16em;text-transform:uppercase}
/* La sfumatura ai due bordi dice che il nastro continua fuori campo. */
.lg-vista{
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.lg-vista::-webkit-scrollbar{display:none}
.lg-vista.in-moto{overflow:hidden}
.lg-track{display:flex;align-items:center;list-style:none;width:max-content}
.lg-track > *{margin-right:var(--lg-gap);flex:none}
.lg-track img{display:block;height:var(--lg-h);width:auto;opacity:.72;transition:opacity .4s var(--ease)}
.lg-track > *:hover{opacity:1}
.lg-vista.in-moto .lg-track{animation:lg-scorri var(--lg-dur,60s) linear infinite;will-change:transform}
.lg-riga[data-dir="-1"] .lg-track{animation-direction:reverse}
/* La pausa al passaggio serve dove c'e' un puntatore. Su touch :hover si
   incolla al primo tocco e non se ne va piu': i due nastri restavano fermi
   per il resto della visita, ed e' esattamente cosi' che si presentavano
   da telefono. Il focus resta buono ovunque: e' la tastiera. */
@media (hover:hover) and (pointer:fine){
  .lg-vista.in-moto:hover .lg-track{animation-play-state:paused}
}
.lg-vista.in-moto:focus-within .lg-track{animation-play-state:paused}
@keyframes lg-scorri{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media (prefers-reduced-motion:reduce){.lg-vista .lg-track{animation:none}}

/* ============================================================
   ABOUT / CONTACT
   ============================================================ */
#about{background:var(--ink);padding:clamp(80px,14vh,180px) var(--pad);border-top:1px solid rgba(255,255,255,.14)}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,90px);align-items:start}
@media (max-width:860px){.about-grid{grid-template-columns:1fr}}
.about-lead{font-family:var(--f-serif);font-size:clamp(23px,3.1vw,46px);letter-spacing:-.005em;line-height:1.28;font-weight:var(--w-serif)}
.about-lead .line,#contact-big .line{overflow:hidden;display:block;padding-bottom:.18em;margin-bottom:-.18em}
.about-lead .line > span,#contact-big .line > span{display:block;transform:translateY(130%)}
.about-body p{color:var(--dim);font-size:clamp(15px,1.2vw,18px);line-height:1.6;margin-bottom:1.1em;max-width:46ch}
/* aree di intervento */
.disc{
  list-style:none;margin-top:clamp(50px,9vh,110px);
  border-top:1px solid rgba(255,255,255,.14);
}
.disc > *{
  display:grid;grid-template-columns:56px minmax(0,1.1fr) minmax(0,2fr);
  gap:clamp(14px,3vw,44px);align-items:baseline;
  padding:clamp(20px,2.4vw,32px) 0;border-bottom:1px solid rgba(255,255,255,.14);
}
.disc > * .mono{color:var(--dim)}
.disc > * h3{font-size:clamp(19px,2.1vw,32px);font-weight:500;letter-spacing:-.03em;line-height:1.1}
.disc > * p{color:var(--dim);font-size:clamp(14px,1.05vw,16px);line-height:1.55;max-width:56ch}
@media (max-width:760px){
  .disc > *{grid-template-columns:40px 1fr;row-gap:8px}
  .disc > * p{grid-column:2}
}

@media (max-width:600px){}

/* I dati in fondo sono passati al footer: senza quel blocco a spingere in
   basso il contenuto restava appeso in alto, quindi ora si centra. */
#contact{
  background:var(--paper);color:var(--ink);
  padding:clamp(80px,16vh,200px) var(--pad);
  min-height:80svh;display:flex;flex-direction:column;justify-content:center;
}
#contact .big{font-family:var(--f-serif);font-size:clamp(40px,9vw,150px);font-weight:var(--w-serif);letter-spacing:-.005em;line-height:.95}
.mail{display:inline-block;margin-top:clamp(26px,4vw,50px);font-size:clamp(18px,2.4vw,38px);letter-spacing:-.02em;border-bottom:1px solid currentColor;padding-bottom:6px}
/* Il richiamo alla pagina contatti. .hero-cta non si puo' riusare qui: ha il
   filetto bianco, e su carta sparirebbe. Pieno scuro sul chiaro, cioe' il
   rovescio del pill della barra, che sulle sezioni scure e' arancione. */
.contact-cta{
  display:inline-flex;align-items:center;gap:14px;width:max-content;
  margin-top:clamp(30px,4.5vw,54px);min-height:56px;padding:0 30px;border-radius:999px;
  background:var(--ink);color:var(--paper);
  font-family:var(--f-display);font-weight:var(--w-display);font-size:16px;letter-spacing:-.01em;
  transition:background .3s var(--ease),color .3s var(--ease);
}
.contact-cta:hover{background:var(--orange);color:var(--ink)}
.contact-cta .arw{display:inline-block}