/* /agency + /digital — la riga dorata usa background-clip:text: riserviamo spazio
   pittorico al discendente della "g" senza modificare la geometria della hero. */
.ag-hero__title .ag-hero__line:nth-child(2) {
  padding-bottom: .13em;
  margin-bottom: -.13em;
}

/* L'ultima riga resta SEMPRE su una riga: niente flash a due righe durante il
   caricamento del font. La dimensione per riempire la colonna (padding L/R
   uguale) è calcolata da fit-hero-title.js. */
.ag-hero__title .ag-hero__line:last-child { white-space: nowrap; }

/* ...ma su mobile no. "Riempi la colonna su una riga" è un espediente da
   desktop: in 335px una riga lunga andrebbe ridotta a metà delle altre (25px
   contro 46px) e si legge come un errore di impaginazione, non come una scelta.
   Qui la lasciamo andare a capo alla stessa dimensione delle altre righe.
   fit-hero-title.js rispetta questa regola: salta il fit quando la riga non è
   più `nowrap`, così la decisione sta nel CSS e i due non divergono. */
@media (max-width: 720px) {
  .ag-hero__title .ag-hero__line:last-child { white-space: normal; }
}

/* ---- Top bar già presente quando l'intro-busta apre la finestra sulla hero ----
   Il frame opaco dell'intro (z 3000) copre la top bar (z 100), che quindi
   "compariva" solo alla fine dell'animazione (scatto). #nav è fratello di
   #envIntro nel body: durante gli stadi "busta" la teniamo invisibile ma sopra
   l'overlay, e la sveliamo in sincrono con lo stadio is-expand (apertura del
   window-reveal), così è già lì quando la hero reale viene mostrata. */
html.env-playing #nav {
  z-index: 3001; opacity: 0; pointer-events: none;
  transition: opacity .45s var(--tb-ease, ease);
}
html.env-playing #envIntro.is-expand ~ #nav,
html.env-playing #envIntro.is-done ~ #nav { opacity: 1; pointer-events: auto; }

/* ---- L'hero è coperto dall'intro-busta: la sua animazione di "reveal on
   scroll" (opacity/translateY) non si vede MAI, ma lascia il contenuto spostato
   di 30px quando l'intro fa l'handoff → il titolo scattava (giù all'handoff, su
   quando il reveal completava). Il clone nel frame è invece già in posizione
   finale (reveal:false). Teniamo quindi l'hero reale SEMPRE in posizione finale,
   così combacia col clone e con il canvas del mesh. L'#hero (id) vince sulla
   regola generale [data-rv] senza !important. */
html.js #hero [data-rv] { opacity: 1; transform: none; }

/* ---- effetto "mesh" sull'H1 (assets/digital/mesh-title.js) ----
   Il canvas WebGL copre il titolo; il testo DOM resta nel markup (per SEO e
   screen reader) ma diventa trasparente quando il mesh è attivo. Il canvas è
   posizionato in px dallo script dentro .ag-hero__inner (position: relative). */
.mesh-title__canvas {
  position: absolute;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  transition: opacity .5s var(--ease, ease);
}
.mesh-title__canvas.is-on { opacity: 1; }
/* testo DOM invisibile ma presente (niente display:none → resta accessibile) */
.ag-hero__title.mesh-on .ag-hero__line { color: transparent; }
.ag-hero__title.mesh-on .ag-hero__line:nth-child(2) {
  /* la riga in gradiente è già trasparente: azzero il background per sicurezza */
  background: none;
}