/* ===========================================================================
   Hero della home — UNA FOTO incorniciata, visibile dal primo frame.
   Caricato DOPO site.css e SOLO sulla home (body: is-home). site.css resta la base
   condivisa di tutto il sito: qui dentro nient'altro che la hero.

   Un'unica immagine, già lì all'apertura, in un riquadro che NON tocca i bordi del
   viewport (resta una cornice di grigio) e che CONTIENE titolo e monogramma — per questo i
   margini del titolo (--frame-*) sono più larghi di quelli del riquadro (--photo-*), e il
   monogramma (4vw / 6vh, geometria di tutto il sito) ci cade dentro con un po' d'aria.

   Le manopole (colori, tempi, proporzioni) stanno tutte in .is-home qui sotto. I TEMPI
   sono numeri PURI, senza unità, perché il JS li rilegge da qui con parseFloat e il CSS
   li usa con `calc(… * 1ms)`: una sola sorgente, niente valori in doppia copia.
   =========================================================================== */

.is-home {
  /* Grigio della cornice intorno alla foto (è lo sfondo della hero). */
  --hero-bg: #E7E7E7;

  /* --- Tempi (ms, numeri puri) --- */
  --photo-in: 2600;         /* quanto ci mette la foto a posarsi dal suo zoom residuo */
  /* Quanto il nome resta intero sotto il titolo prima di scivolare nell'angolo e collassare
     nel monogramma. Il JS non lascia comunque che scenda sotto la fine dell'entrata del nome
     (NAME_UNMASK, calcolato in js/home/hero.js dalle due manopole qui sotto): il collasso non
     può cominciare mentre il nome sta ancora comparendo, nemmeno con un titolo più lungo. */
  --cover-hold: 3200;
  --hand-dur: 2000;         /* scala dei tempi del passaggio nome -> monogramma */
  --cover-line-step: 130;   /* stagger fra le righe del titolo */
  --name-step: 45;          /* stagger fra le lettere del nome */
  /* Durata dell'entrata di UNA lettera del nome. È qui, come numero puro, perché la rilegge
     anche il JS per sapere quando l'entrata è finita: una sola sorgente. */
  --name-dur: 900;

  /* --- Proporzioni --- */
  /* Riquadro della foto: inset dai bordi del viewport. Questi quattro numeri sono la
     CORNICE grigia; devono restare più stretti dei margini del monogramma (4vw dal bordo
     sinistro, 6vh dal fondo: vedi monoGeom in js/home/hero.js) o il monogramma finirebbe fuori
     dalla foto. */
  --photo-x: 2vw;
  --photo-top: 3.4vh;
  --photo-bottom: 3vh;
  /* Zoom della foto in apertura: parte un filo più grande e si posa a scala 1 in
     --photo-in. 0 = nessun movimento. */
  --photo-zoom: 0.06;
  /* Velo scuro dall'alto, per il titolo bianco: opacità al bordo superiore e altezza della
     sfumatura (in % del riquadro). Il titolo finisce intorno al 45% dell'altezza, quindi
     --scrim-h deve restare sopra quel valore o le ultime righe restano scoperte. */
  --scrim: 0.42;
  --scrim-h: 62%;

  /* Margini del TITOLO: più larghi di --photo-x, così fra il bordo della foto e il testo
     resta un po' d'immagine. Il monogramma resta al suo 4vw di sempre — è la posizione che
     ha su tutto il sito — quindi il nome, scendendo nell'angolo, si sposta anche di un filo
     a sinistra: impercettibile dentro un movimento verticale. */
  --frame-x: 4.6vw;
  --frame-top: 7.5vh;
  --frame-bottom: 0.05;
  /* Tetto in ALTEZZA del blocco del titolo, in frazioni di viewport. Il corpo lo misura
     layoutHero() sulla riga più lunga: questo tetto serve solo a non far esplodere il
     titolo su viewport molto bassi e larghi — su desktop NON deve mordere, altrimenti la
     riga più lunga non arriva al margine destro. */
  --title-maxh: 0.60;
}

/* Primo pixel dipinto: il grigio della cornice. Senza questo si vedrebbe un lampo scuro
   (body.is-home è nero) prima che la hero venga disegnata. */
body.is-home { background: var(--hero-bg); }

/* ---- Webfont del titolo --------------------------------------------------------------
   Montserrat (licenza OFL). Usato SOLO qui: nessun'altra pagina del sito lo scarica.
   Self-hostato, non dal CDN di Google: il sito non ha dipendenze esterne e l'embedding via
   CDN è problematico lato GDPR.
   È il file VARIABILE (asse peso 100..900): un solo file per qualsiasi peso serva.
   NB PESO: il variabile è ~688 KB. In .woff2 + subset scenderebbe a ~30-40 KB, ma qui non
   ci sono gli strumenti (fontTools/woff2): vedi la nota in CLAUDE.md. */
@font-face {
  font-family: "Montserrat";
  src: url("/fonts/montserrat/Montserrat-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900; font-style: normal;
  /* swap: se il font tarda, il titolo si vede subito col fallback. Il corpo del titolo è
     MISURATO (layoutHero in js/home/hero.js) e viene rifatto a font caricati, altrimenti
     resterebbe calcolato sulle metriche del fallback. */
  font-display: swap;
}

/* ---- Hero ---------------------------------------------------------------------------
   Dentro #intro c'è TUTTA la hero: foto e titolo (niente stage né nastro
   orizzontale, che qui non esistono). Il grigio è lo sfondo di #intro e si vede nella
   cornice intorno alla foto. */
.is-home .intro { background: var(--hero-bg); }

/* ---- La foto -------------------------------------------------------------------------
   Riquadro inset: la cornice grigia sono i --photo-*. `overflow: hidden` lo rende una
   finestra, così lo zoom di apertura non sborda sulla cornice. */
.is-home .hero-photo {
  position: absolute; z-index: 0;
  top: var(--photo-top); bottom: var(--photo-bottom);
  left: var(--photo-x); right: var(--photo-x);
  overflow: hidden;
  background: #d8d8d8;   /* neutro finché l'immagine non è decodificata */
}
.is-home .hero-photo picture { width: 100%; height: 100%; display: block; }
/* La posa è un'animazione CSS e non un ciclo di rAF pilotato dal JS: non deve stare in
   fase con nient'altro, e così parte anche se i frame sono sospesi (scheda in secondo
   piano) senza lasciare la foto ingrandita a metà. */
.is-home .hero-photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: none;
  animation: home-photo-in calc(var(--photo-in) * 1ms) cubic-bezier(0.16, 1, 0.3, 1) both;
  will-change: transform;
}
@keyframes home-photo-in {
  from { transform: scale(calc(1 + var(--photo-zoom))); }
  to   { transform: none; }
}
/* Intro saltata (scroll dell'utente, scheda nascosta): la foto va subito a posto. */
.is-home .intro.settled .hero-photo img { animation: none; }
/* Velo scuro dall'alto: serve al titolo bianco, che senza cade su un cielo quasi bianco.
   Sta DENTRO il riquadro (è un ::after di .hero-photo) — così non sborda sulla cornice
   grigia — e sopra l'immagine ma sotto al testo. Non è trasformato come l'immagine:
   durante lo zoom di apertura resta fermo sul riquadro.
   Le tappe intermedie non sono decorative: una sfumatura a due soli stop ha una spalla
   visibile a metà, e sull'acqua piatta di questa foto si leggerebbe come una banda. */
.is-home .hero-photo::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: var(--scrim-h);
  background: linear-gradient(to bottom,
    rgba(0, 0, 0, var(--scrim)) 0%,
    rgba(0, 0, 0, calc(var(--scrim) * 0.72)) 18%,
    rgba(0, 0, 0, calc(var(--scrim) * 0.40)) 38%,
    rgba(0, 0, 0, calc(var(--scrim) * 0.15)) 62%,
    rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
}
/* Hero coperto dalle sezioni: libero il layer di compositing (come fa site.css per il
   nastro di v1). */
.is-home .intro.dormant .hero-photo img { will-change: auto; }

/* Il livello del testo. Niente blend qui (il monogramma ce l'ha, il titolo no): il titolo
   è bianco pieno, e a renderlo leggibile è il velo scuro sulla foto. */
.is-home .hero-frame {
  position: absolute; inset: 0; z-index: 2;
  padding: var(--frame-top) var(--frame-x) calc(var(--frame-bottom) * 100vh);
  display: flex; flex-direction: column; align-items: stretch;
}
/* ---- Titolo -------------------------------------------------------------------------
   Quattro righe alte uguali, allineate a sinistra e "a bandiera" come nella reference. Il
   corpo lo decide layoutHero() nel JS misurando la riga più lunga: qui c'è solo un valore
   di partenza ragionevole (le righe sono comunque nascoste finché non entrano). */
.is-home .cover-title {
  margin: 0;
  font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  font-weight: 800;
  font-size: min(9vh, 6.2vw);
  line-height: 0.95;             /* interlinea stretta: tutto maiuscolo, niente discendenti */
  letter-spacing: -0.015em;
  font-synthesis: none;          /* niente finti pesi sopra il variabile */
  text-transform: uppercase;
  color: #fff;
}
/* Ogni riga è una finestra: la copia interna parte SOTTO e sale, in stagger.
   `white-space: nowrap` non è solo estetica: layoutHero() misura la larghezza del TESTO con
   un Range, e una riga che va a capo darebbe una misura senza senso (oltre a farsi
   tagliare dalla maschera). Il corpo è calcolato apposta perché non serva andare a capo. */
.is-home .cover-title .cl { display: block; overflow: hidden; }
/* Delle due spezzature del titolo (vedi partials/home/hero.html) ne vive una sola: qui la larga, su
   schermo stretto la fitta. `display: none` e non `visibility`, così le righe nascoste non
   occupano spazio né entrano nel conto del corpo (`layoutHero` misura solo ciò che ha un
   rettangolo). */
.is-home .cover-title .cl-narrow { display: none; }
.is-home .cover-title .cl-in {
  display: block; white-space: nowrap;
  transform: translateY(110%);
  transition: transform 1000ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--i, 0) * var(--cover-line-step) * 1ms);
}
.is-home .intro.lines-in .cover-title .cl-in { transform: translateY(0); }
/* Quarta riga FANTASMA: tiene il posto (e dà misure) al nome, che è #brand-mark — fisso,
   quindi fuori dal flusso. `visibility: hidden` e non `opacity`: non deve mai comparire,
   nemmeno per un frame, ma deve continuare a occupare la sua riga. */
.is-home .cover-title .cl-name { visibility: hidden; }

/* Il suggerimento di scroll resta dov'è di suo, centrato in basso (site.css): qui non c'è
   niente da scansare — il monogramma sta nell'angolo sinistro, non al centro.
   Cambia solo il colore: compare a intro finita, quindi sempre sulla foto, dove il grigio
   scuro di base sparirebbe. */
.is-home .scroll-hint { color: #fff; }

/* ---- Nome -> monogramma --------------------------------------------------------------
   Il nome È #brand-mark: nasce come quarta riga del titolo (posizione e corpo glieli dà il
   JS leggendo la riga fantasma), entra lettera per lettera dal basso, poi scivola
   nell'angolo e collassa. Qui c'è solo il MOVIMENTO delle lettere; posizioni e tempi
   stanno in js/home/hero.js. */
.is-home #brand-mark .bm-in { display: inline-block; }
/* `<i>` di suo è corsivo: le lettere sono elementi, non testo, e vanno raddrizzate. Le
   iniziali (.bi) restano nel monogramma, le altre (.bc) si ritraggono nel collapse. */
.is-home #brand-mark .bi { display: inline-block; font-style: normal; }
/* Entrata: la riga fa da maschera e ogni lettera sale dal basso, in stagger su --i (che è
   l'indice sul nome INTERO, quindi lo stagger attraversa le tre righe senza ripartire).
   `transition: none` sullo stato di partenza NON è un dettaglio: le .bc arrivano dallo
   stato base di site.css (`opacity: 0; scaleX(0)`) con una transizione già dichiarata, e
   senza azzerarla ANIMEREBBERO fin qui — cioè si vedrebbero comparire e allargarsi sulla
   riga, in anticipo e senza entrata dal basso, mentre le iniziali sono ancora sotto la
   maschera (era esattamente il difetto di "i" e "orenzo"). */
.is-home #brand-mark.name-drop .bm { overflow: hidden; }
.is-home #brand-mark.name-drop .bi,
.is-home #brand-mark.name-drop .bc { opacity: 1; transform: translateY(115%); transition: none; }
.is-home #brand-mark.name-in .bi,
.is-home #brand-mark.name-in .bc {
  opacity: 1; transform: translateY(0);
  transition: transform calc(var(--name-dur) * 1ms) cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--i, 0) * var(--name-step) * 1ms);
}
/* Collapse: tolte le classi di entrata, le .bc tornano allo stato base di site.css
   (opacity 0 + scaleX 0). Di suo la chiusura non ha stagger (è calibrata sul pannello del
   menu): qui lo aggiungo, così le lettere spariscono una dopo l'altra come sono entrate.
   La classe la toglie il JS a collapse finito, altrimenti questi ritardi si porterebbero
   dietro anche la riapertura del nome col menu. */
.is-home #brand-mark.name-fold .bc { transition-delay: calc(var(--i, 0) * 30ms); }
/* Finché il nome è la QUARTA RIGA DEL TITOLO deve leggersi come le altre tre: il JS
   sospende il blend (.flat) e questa regola lo tiene bianco pieno. Vince su
   `#brand-mark.flat .bm { color: #202020 }` di site.css (una classe in più). Quando parte
   verso l'angolo torna il `difference` di tutto il sito. */
.is-home #brand-mark.on-title .bm { color: #fff; }
/* L'asterisco entra in dissolvenza quando le lettere collassano (name-open rimosso). La
   base `.bm.mk` transisce solo `rotate`: aggiungo `opacity` senza perdere lo spin. */
.is-home #brand-mark .bm.mk {
  transition: rotate 600ms cubic-bezier(0.65, 0, 0.35, 1), opacity 300ms ease;
}

/* ---- Mobile -------------------------------------------------------------------------
   Cornice un filo più larga in proporzione (su schermo stretto 2vw sparirebbero) e titolo
   più contenuto. Il monogramma resta a 4vw / 6vh: --photo-x e --photo-bottom devono
   restare sotto quei valori. */
@media (max-width: 640px) {
  .is-home { --photo-x: 3vw; --photo-top: 2.6vh; --photo-bottom: 2.4vh; --frame-x: 7vw; --frame-top: 6vh; }
  .is-home .cover-title { font-size: min(7.2vh, 8.6vw); }
  /* Titolo spezzato più fitto (vedi partials/home/hero.html): righe più corte = corpo più grande, che
     è il modo di riempire uno schermo stretto senza stiracchiare nulla. */
  .is-home .cover-title .cl-wide { display: none; }
  .is-home .cover-title .cl-narrow { display: block; }
}

/* ---- Motion ridotto -------------------------------------------------------------------
   Niente entrate né scorrimenti: il JS porta subito tutto allo stato finale (titolo su,
   monogramma nell'angolo) e la foto parte già posata. */
@media (prefers-reduced-motion: reduce) {
  .is-home .cover-title .cl-in,
  .is-home #brand-mark.name-in .bi,
  .is-home #brand-mark.name-in .bc { transition: none; }
  .is-home .hero-photo img { animation: none; }
}