/* ============================================================
   LEONI FILMS
   Impianto da casa di produzione: sobrio, sicuro, il lavoro al centro.
   Poca decorazione, molto respiro, movimenti misurati.
   ============================================================ */

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

:root{
  /* non nero pieno: un grigio profondo. Il nero assoluto schiaccia i video
     e fa sembrare la pagina un buco; il grigio le da' materia. */
  --nero:#141416;
  --nero-2:#1c1c1f;
  --vetro-velo:rgba(255,255,255,.055);
  --vetro-bordo:rgba(255,255,255,.14);
  --bianco:#f7f7f8;
  --grigio:rgba(247,247,248,.60);
  --grigio-2:rgba(247,247,248,.34);
  --filo:rgba(247,247,248,.12);
  --segno:#5b8def;

  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:96px; --s7:140px; --s8:200px;
  --curva:cubic-bezier(.22,1,.36,1);
  --margine:clamp(20px, 5vw, 88px);
}

html{ background:var(--nero); }
body{
  background:var(--nero); color:var(--bianco);
  font-family:'Inter',system-ui,sans-serif; font-size:16px; line-height:1.6;
  font-weight:400; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }

/* ---------- tipografia: pulita, larga, non urlata ---------- */
.display{
  font-family:'Archivo',sans-serif; font-weight:800;
  font-size:clamp(44px, 7.4vw, 128px); line-height:.96; letter-spacing:-.035em;
}
.titolo{
  font-family:'Archivo',sans-serif; font-weight:700;
  font-size:clamp(30px, 4.2vw, 68px); line-height:1.02; letter-spacing:-.03em;
}
h3{ font-family:'Archivo',sans-serif; font-weight:600; font-size:clamp(18px,1.7vw,24px);
  letter-spacing:-.015em; line-height:1.2; }
.etichetta{ font-size:11px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--grigio-2); }
.testo{ color:var(--grigio); font-size:clamp(15px,1.15vw,18px); max-width:58ch; line-height:1.65; }

.riga{ width:100%; height:1px; background:var(--filo); border:0; }
.dentro-margine{ padding-inline:var(--margine); }

/* ============================================================
   INTESTAZIONE
   ============================================================ */
.testata{
  position:fixed; inset:0 0 auto; z-index:80;
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--s3) var(--margine);
  transition:background .4s var(--curva), padding .4s var(--curva), backdrop-filter .4s;
}
.testata.compatta{
  padding-block:14px; background:rgba(10,10,11,.72);
  backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid var(--filo);
}
.marchio{ display:flex; align-items:center; gap:12px; font-family:'Archivo',sans-serif;
  font-weight:700; font-size:15px; letter-spacing:-.01em; }
.marchio img{ width:34px; height:34px; border-radius:50%; }
.menu{ display:flex; align-items:center; gap:var(--s4); list-style:none; }
.menu a{ font-size:13px; font-weight:500; letter-spacing:.02em; color:var(--grigio);
  display:inline-flex; align-items:center; min-height:44px; transition:color .3s; position:relative; }
.menu a::after{ content:''; position:absolute; left:0; bottom:10px; width:0; height:1px;
  background:var(--bianco); transition:width .4s var(--curva); }
.menu a:hover{ color:var(--bianco); }
.menu a:hover::after{ width:100%; }
.menu a[aria-current="page"]{ color:var(--bianco); }
.menu a[aria-current="page"]::after{ width:100%; background:var(--segno); }
@media(max-width:820px){
  /* cinque voci su uno schermo stretto schiacciavano via il marchio:
     il logo resta fisso, il menu scorre di lato se non ci sta. */
  .testata{ gap:var(--s2); padding-inline:var(--s2); }
  .marchio{ flex:0 0 auto; }
  .marchio span{ display:none; }
  .testata nav{ min-width:0; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .testata nav::-webkit-scrollbar{ display:none; }
  .menu{ gap:18px; flex-wrap:nowrap; padding-right:var(--s1); }
  .menu a{ font-size:12px; white-space:nowrap; }
  .menu a::after{ bottom:12px; }
}

/* ============================================================
   APERTURA
   ============================================================ */
.apertura{ position:relative; height:100svh; min-height:620px; overflow:hidden;
  display:flex; align-items:flex-end; }
.apertura-film{ position:absolute; inset:0; z-index:0; }
.apertura-film video{ width:100%; height:100%; object-fit:cover; }
.apertura-film::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,10,11,.55) 0%, rgba(10,10,11,.15) 38%, rgba(10,10,11,.88) 100%);
}
.apertura-corpo{ position:relative; z-index:2; width:100%; padding:0 var(--margine) var(--s6); }
.apertura-corpo .testo{ margin-top:var(--s3); }
.apertura-basso{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:var(--s4); }

.scorri{ display:flex; align-items:center; gap:12px; font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--grigio-2); }
.scorri i{ display:block; width:44px; height:1px; background:var(--grigio-2); position:relative; overflow:hidden; }
.scorri i::after{ content:''; position:absolute; inset:0; background:var(--bianco);
  transform:translateX(-100%); animation:corre 2.6s var(--curva) infinite; }
@keyframes corre{ 0%{transform:translateX(-100%)} 60%,100%{transform:translateX(100%)} }

/* ============================================================
   BOTTONI
   ============================================================ */
.bottone{
  display:inline-flex; align-items:center; gap:12px; min-height:52px; padding:0 28px;
  border-radius:999px; font-size:13px; font-weight:600; letter-spacing:.02em;
  border:1px solid var(--filo); color:var(--bianco);
  transition:background .35s var(--curva), color .35s var(--curva), border-color .35s, transform .35s var(--curva);
}
.bottone:hover{ background:var(--bianco); color:var(--nero); border-color:var(--bianco); transform:translateY(-2px); }
.bottone-pieno{ background:var(--bianco); color:var(--nero); border-color:var(--bianco); }
.bottone-pieno:hover{ background:transparent; color:var(--bianco); border-color:var(--filo); }
.bottoni{ display:flex; flex-wrap:wrap; gap:12px; }

/* ============================================================
   I LAVORI — il cuore del sito
   Riquadri grandi; passandoci sopra il filmato parte da solo.
   ============================================================ */
.lavori{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s3); }
.lavori.fitta{ grid-template-columns:repeat(3,1fr); }
@media(max-width:900px){ .lavori,.lavori.fitta{ grid-template-columns:1fr; } }

/* CORNICE DI VETRO attorno al video: squadrata con angoli morbidi.
   Il filmato resta pulito dentro, il vetro sta tutt'intorno. */
.lavoro{
  position:relative; display:block; isolation:isolate;
  padding:10px; border-radius:18px;
  background:var(--vetro-velo);
  border:1px solid var(--vetro-bordo);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.42),
    inset 0 -1px 0 rgba(255,255,255,.08),
    0 24px 56px rgba(0,0,0,.45);
  transition:transform .5s var(--curva), border-color .5s, box-shadow .5s;
}
.lavoro:hover{ transform:translateY(-6px); border-color:rgba(255,255,255,.28); }
/* NIENTE backdrop-filter sui riquadri.
   Ce n'erano 18 con dentro un filtro SVG di rifrazione, ricalcolato a ogni
   fotogramma durante lo scorrimento: misurati 46 fps. E lavorava solo sui
   10px di cornice, perche' il resto e' coperto dall'immagine. Il vetro qui
   lo fanno il bordo chiaro e il riflesso, che non costano nulla. */
/* il riflesso sulla lastra */
.lavoro::before{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:0;
  background:
    linear-gradient(135deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.07) 12%, rgba(255,255,255,0) 30%),
    radial-gradient(85% 55% at 16% 0%, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 62%);
}
.lavoro > *{ position:relative; z-index:1; }

/* display:block e' obbligatorio: la tela e' uno <span>, e un elemento in
   linea ignora aspect-ratio — il riquadro resterebbe alto zero. */
.lavoro .tela{ display:block; position:relative; overflow:hidden; border-radius:10px;
  aspect-ratio:16/10; background:#000; }
.lavoro.verticale .tela{ aspect-ratio:3/4; }
/* Niente filmato dentro il riquadro: solo il fotogramma scelto.
   Al passaggio del mouse l'immagine si avvicina appena — non deve piu'
   sparire, sotto non c'e' piu' niente. */
.lavoro img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  z-index:1; transition:transform 1.1s var(--curva); }
.lavoro:hover img{ transform:scale(1.045); }

.lavoro .dati{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--s3);
  padding:16px 6px 6px; }
.lavoro .dati h3{ transition:transform .5s var(--curva); }
.lavoro:hover .dati h3{ transform:translateX(6px); }
.lavoro .dati .etichetta{ white-space:nowrap; }

/* ============================================================
   BLOCCO A DUE COLONNE — titolo che resta fermo, contenuto che scorre
   ============================================================ */
.due-colonne{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr); gap:var(--s6); }
@media(max-width:1000px){ .due-colonne{ grid-template-columns:1fr; gap:var(--s4); } }
.colonna-ferma{ position:sticky; top:120px; align-self:start; }
@media(max-width:1000px){ .colonna-ferma{ position:static; } }

/* elenco con filetti: niente schede */
.elenco{ border-top:1px solid var(--filo); }
.voce{ display:grid; grid-template-columns:44px 1fr; gap:var(--s3) var(--s4);
  padding:var(--s4) 0; border-bottom:1px solid var(--filo);
  transition:padding-left .45s var(--curva); }
.voce:hover{ padding-left:12px; }
.voce > b{ font-family:'Archivo',sans-serif; font-weight:600; font-size:13px; color:var(--grigio-2); padding-top:6px; }
.voce p{ color:var(--grigio); font-size:15px; margin-top:8px; max-width:60ch; }

/* ============================================================
   CONTATTO
   ============================================================ */
/* L'email sta dentro una colonna stretta: a 4vw sfondava nella colonna
   accanto, sovrapponendosi al testo. Misura contenuta, una riga sola. */
.mail-grande{ display:inline-block; max-width:100%; font-family:'Archivo',sans-serif; font-weight:600;
  font-size:clamp(15px,1.55vw,25px); letter-spacing:-.015em; line-height:1.25;
  overflow-wrap:normal; word-break:keep-all; position:relative; }
.mail-grande::after{ content:''; position:absolute; left:0; bottom:-6px; width:100%; height:2px;
  background:var(--bianco); transform:scaleX(0); transform-origin:left;
  transition:transform .6s var(--curva); }
.mail-grande:hover::after{ transform:scaleX(1); }

.dati-contatto{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:var(--s4);
  border-top:1px solid var(--filo); padding-top:var(--s4); }
.dati-contatto div span{ display:block; margin-bottom:8px; }
.dati-contatto a,.dati-contatto b{ font-weight:500; font-size:16px; }

/* ============================================================
   PIEDE
   ============================================================ */
.piede{ padding:var(--s6) var(--margine) var(--s4); border-top:1px solid var(--filo);
  display:flex; flex-wrap:wrap; gap:var(--s3); justify-content:space-between; align-items:center;
  color:var(--grigio-2); font-size:13px; }
.piede nav{ display:flex; flex-wrap:wrap; gap:var(--s3); }
.piede a{ color:var(--grigio-2); transition:color .3s; }
.piede a:hover{ color:var(--bianco); }

/* ============================================================
   SEZIONI
   ============================================================ */
section{ padding:var(--s7) 0; }
section.stretta{ padding:var(--s6) 0; }
.intestazione{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:var(--s3); margin-bottom:var(--s5); }
.intestazione .etichetta{ display:block; margin-bottom:var(--s2); }

/* ============================================================
   MOVIMENTI — misurati, mai ginnici
   ============================================================ */
/* Le scritte non compaiono in blocco: le parole salgono una dopo l'altra,
   come se il titolo si scrivesse da solo mentre scorri. */
.vela{ display:block; }
.parola{ display:inline-block; overflow:hidden; vertical-align:top; }
.parola > i{ display:inline-block; font-style:inherit;
  transform:translateY(108%); transition:transform .9s var(--curva); }
.vela.dentro .parola > i{ transform:none; }
/* ripiego se il JS non gira: il testo si vede comunque */
.vela:not(.pronta) > span{ display:block; }

.sale{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--curva), transform .9s var(--curva); }
.sale.dentro{ opacity:1; transform:none; }

.serie > *{ opacity:0; transform:translateY(24px); transition:opacity .85s var(--curva), transform .85s var(--curva); }
.serie.dentro > *{ opacity:1; transform:none; }
.serie.dentro > *:nth-child(1){transition-delay:0s}
.serie.dentro > *:nth-child(2){transition-delay:.08s}
.serie.dentro > *:nth-child(3){transition-delay:.16s}
.serie.dentro > *:nth-child(4){transition-delay:.24s}
.serie.dentro > *:nth-child(5){transition-delay:.32s}
.serie.dentro > *:nth-child(6){transition-delay:.40s}
.serie.dentro > *:nth-child(7){transition-delay:.48s}
.serie.dentro > *:nth-child(8){transition-delay:.56s}
.serie.dentro > *:nth-child(9){transition-delay:.64s}

/* sipario per il cambio pagina */
.sipario{ position:fixed; inset:0; z-index:200; background:var(--nero); pointer-events:none;
  transform:scaleY(1); transform-origin:top; transition:transform .75s var(--curva); }
.sipario.aperto{ transform:scaleY(0); }
.sipario.chiude{ transform-origin:bottom; transform:scaleY(1); }

/* ============================================================
   VISORE — il filmato intero, a tutto schermo
   ============================================================ */
.visore{
  position:fixed; inset:0; z-index:180; display:grid; place-items:center;
  background:rgba(6,6,7,.94); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  opacity:0; pointer-events:none; transition:opacity .45s var(--curva);
}
.visore.aperto{ opacity:1; pointer-events:auto; }

/* Riquadro contenuto, non a tutta pagina: ingrandito si vedrebbe la
   compressione del filmato, a questa misura l'immagine resta pulita. */
.visore-cornice{
  position:relative;
  width:min(720px, 86vw);
  transform:scale(.96); transition:transform .5s var(--curva);
}
.visore.aperto .visore-cornice{ transform:none; }
.visore video{
  width:100%; max-height:62svh; aspect-ratio:16/9;
  border-radius:10px; background:#000; outline:none;
  box-shadow:0 40px 90px rgba(0,0,0,.6);
}
/* i verticali non devono diventare strisce: li tengo alti e stretti */
.visore.verticale .visore-cornice{ width:min(400px, 74vw); }
.visore.verticale video{ aspect-ratio:9/16; max-height:76svh; }

.visore-titolo{
  margin-top:var(--s3); text-align:center;
  font-family:'Archivo',sans-serif; font-weight:500; font-size:14px; color:var(--grigio);
}
/* la X sta appoggiata all'angolo del riquadro, non allo schermo */
.visore-chiudi{
  position:absolute; right:-18px; top:-18px;
  width:44px; height:44px; border-radius:50%; border:1px solid var(--filo);
  background:var(--nero); color:var(--bianco); font-size:17px; line-height:1; cursor:pointer;
  display:grid; place-items:center; transition:background .3s, color .3s, transform .3s var(--curva);
}
.visore-chiudi:hover{ background:var(--bianco); color:var(--nero); transform:rotate(90deg); }
@media(max-width:600px){ .visore-chiudi{ right:-6px; top:-52px; } }

/* cursore: cresce sui riquadri e dice cosa fare */
.cursore{ position:fixed; top:0; left:0; z-index:150; width:12px; height:12px; border-radius:50%;
  background:var(--bianco); pointer-events:none; mix-blend-mode:difference;
  transform:translate(-50%,-50%); transition:width .35s var(--curva), height .35s var(--curva);
  display:grid; place-items:center; font-size:0; font-weight:600; letter-spacing:.1em; color:var(--nero); }
.cursore.grande{ width:92px; height:92px; font-size:11px; mix-blend-mode:normal; }
@media(hover:none){ .cursore{ display:none; } }

/* ============================================================
   ACCESSIBILITA
   ============================================================ */
a:focus-visible,button:focus-visible,video:focus-visible,summary:focus-visible{
  outline:2px solid var(--segno); outline-offset:4px; }
.salta{ position:fixed; left:var(--s2); top:-120px; z-index:300; background:var(--bianco); color:var(--nero);
  padding:14px 22px; border-radius:6px; font-weight:600; transition:top .2s; }
.salta:focus{ top:var(--s2); }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important; scroll-behavior:auto!important; }
  .sale,.serie > *{ opacity:1!important; transform:none!important; }
  .vela > span{ transform:none!important; }
  .sipario{ display:none; }
  .lavoro img{ opacity:1!important; }
}

@media(max-width:820px){
  :root{ --s7:88px; --s8:120px; }
  .apertura-corpo{ padding-bottom:var(--s5); }
}