:root{--riga:min(1520px,92vw)}
.heroluce .container{width:min(1520px,92vw);max-width:none}
/* ==================================================================
   LDL — home chiara.

   Il fondo non e' piu' blu notte: e' il bianco azzurrato della home
   attuale, con due aloni sfocati che danno aria. I disegni sono volumi
   tridimensionali che riempiono tutta la sezione, non riquadri.

   Una sola animazione d'ingresso, "la risalita": il disegno sale e si
   assesta, una luce lo attraversa una volta sola, e il testo emerge da
   sotto una mascherina, un blocco dopo l'altro.
   ================================================================== */

/* ============================================================== hero */
.heroluce{position:relative;min-height:calc(100svh - 82px);display:flex;flex-direction:column;
  justify-content:center;isolation:isolate;overflow:hidden;
  padding-block:clamp(40px,5vh,70px) clamp(236px,25vh,310px);
  background:
    radial-gradient(1100px 760px at 8% 2%, #FFFFFF 0%, rgba(255,255,255,0) 62%),
    radial-gradient(900px 700px at 86% 92%, #DCEFF7 0%, rgba(220,239,247,0) 64%),
    linear-gradient(146deg,#FBFDFE 0%,#EDF6FA 46%,#E2EFF6 100%)}

.scenario{position:absolute;inset:0;z-index:0}
.scena{position:absolute;inset:0;opacity:0;visibility:hidden;
  transition:opacity .6s ease, visibility 0s .6s}
.scena svg{width:100%;height:100%;display:block}
.scena.attiva{opacity:1;visibility:visible;transition:opacity .6s ease}

/* il velo tiene chiara la meta' sinistra, dove sta il testo */
.velo{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.88) 40%,
                                     rgba(255,255,255,.44) 66%, rgba(255,255,255,0) 90%)}
.heroluce > .container{position:relative;z-index:2}

/* ------------------------------------------- l'animazione d'ingresso */
/* 1. il disegno sale e si assesta */
.scena.attiva{animation:risale 1.25s cubic-bezier(.19,1,.28,1) both}
@keyframes risale{
  from{transform:translate3d(0,26px,0) scale(1.045);opacity:0}
  to  {transform:none;opacity:1}
}
/* 2. una luce lo attraversa, una volta sola per immagine */
.luce{position:absolute;inset:-20% -40%;z-index:1;pointer-events:none;opacity:0;
  background:linear-gradient(104deg, rgba(255,255,255,0) 42%, rgba(255,255,255,.72) 50%,
                                     rgba(255,255,255,0) 58%)}
.heroluce.passa .luce{animation:lama 1.25s cubic-bezier(.3,.8,.3,1) both}
@keyframes lama{
  from{transform:translateX(-46%);opacity:0}
  30% {opacity:1}
  to  {transform:translateX(46%);opacity:0}
}
/* 3. il testo emerge da sotto una mascherina */
.m{display:block;overflow:hidden;
  /* La maschera serve all'ingresso: il testo sale da sotto il bordo.
     Ma con interlinea 1.03 il bordo passava esattamente sulla coda
     della "g" e la tagliava. Il riempimento allarga la finestra verso
     il basso, il margine negativo lo riprende: l'altezza non cambia. */
  padding-bottom:.16em;margin-bottom:-.16em}
.m > span,.occhiello > span{display:block;transform:translateY(118%)}
.heroluce.entra .m > span,
.heroluce.entra .occhiello > span{animation:emerge .95s cubic-bezier(.19,1,.28,1) both}
@keyframes emerge{from{transform:translateY(118%)}to{transform:none}}
.heroluce.entra .occhiello > span{animation-delay:.05s}
.heroluce.entra h1 .m:nth-child(1) > span{animation-delay:.16s}
.heroluce.entra h1 .m:nth-child(2) > span{animation-delay:.28s}
.heroluce .dide,.heroluce .azioni,.heroluce .fondo{opacity:0}
.heroluce.entra .dide {animation:sale .8s cubic-bezier(.19,1,.28,1) .46s both}
.heroluce.entra .azioni{animation:sale .8s cubic-bezier(.19,1,.28,1) .58s both}
/* la fascia e' centrata con translateX(-50%): la sua animazione deve
   conservarlo, altrimenti l'ingresso la sposta a destra di mezza pagina */
.heroluce.entra .fondo {animation:saleFascia .9s cubic-bezier(.19,1,.28,1) .72s both}
@keyframes sale{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes saleFascia{from{opacity:0;transform:translateX(-50%) translateY(22px)}
                      to  {opacity:1;transform:translateX(-50%)}}
/* i numeri entrano uno dopo l'altro, lungo la riga */
.heroluce.entra .numero{animation:sale .7s cubic-bezier(.19,1,.28,1) both;
  animation-delay:calc(.80s + var(--r) * .09s)}

/* ------------------------------------------------------- il testo */
.occhiello{margin:0 0 22px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  font-size:.82rem;color:var(--acqua-scuro);overflow:hidden}
.occhiello.scuro{color:var(--acqua-scuro);margin-bottom:16px}
.heroluce h1{margin:0;color:var(--inchiostro);font-weight:800;line-height:1.03;
  letter-spacing:-.022em;font-size:clamp(2.7rem,5vw,5.4rem)}
.dide{position:relative;margin:26px 0 0;min-height:4.4em}
.dida{position:absolute;inset:0;margin:0;max-width:44ch;color:var(--corpo);
  font-size:clamp(1.06rem,1.2vw,1.34rem);line-height:1.6;
  opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease}
.dida.attiva{opacity:1;transform:none;transition-delay:.2s}

.azioni{display:flex;flex-wrap:wrap;gap:14px;margin-top:10px}
.btnl{display:inline-flex;align-items:center;gap:10px;border-radius:999px;padding:16px 30px;
  text-decoration:none;font-weight:700;font-size:1.02rem;
  transition:transform .3s cubic-bezier(.22,1,.3,1),background .3s ease,color .3s ease,
             border-color .3s ease,box-shadow .3s ease}
.pieno{background:var(--navy);color:#fff;border:1px solid var(--navy)}
.vuoto{background:rgba(255,255,255,.72);color:var(--inchiostro);border:1px solid var(--filo)}
@media (hover:hover){
  .pieno:hover{background:var(--acqua);border-color:var(--acqua);transform:translateY(-2px);
    box-shadow:0 14px 32px rgba(0,122,138,.26)}
  .vuoto:hover{border-color:var(--acqua);color:var(--acqua);transform:translateY(-2px)}
}

/* ----------------------------------- i numeri e l'indice, in fondo */
.heroluce > .fondo{position:absolute;left:50%;transform:translateX(-50%);bottom:34px;z-index:3;
  display:flex;flex-direction:column;align-items:flex-start;gap:22px;
  /* la fascia si ferma prima del bordo destro: li' vive l'assistente */
  padding-right:clamp(0px,22vw,320px)}
.indice{order:-1}
.numeri{display:flex;align-items:stretch}
/* la linea sottile che li separa, come sul sito attuale */
.numero{padding:2px clamp(18px,2.2vw,38px);border-left:1px solid var(--filo)}
.numero:first-child{padding-left:0;border-left:0}
.numero b{display:block;font-size:clamp(1.5rem,2.1vw,2.1rem);font-weight:800;
  color:var(--inchiostro);line-height:1.1;letter-spacing:-.02em}
.numero span{display:block;font-size:.88rem;color:var(--tenue);margin-top:2px}

.indice{display:flex;align-items:flex-end;gap:18px}
.punti{display:flex;gap:clamp(8px,1vw,18px)}
.punto{appearance:none;background:none;border:0;cursor:pointer;text-align:left;
  padding:12px 0 0;color:var(--tenue);font-family:inherit;position:relative;
  min-width:clamp(78px,8vw,132px)}
.punto::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--filo)}
.punto::after{content:"";position:absolute;left:0;top:0;height:2px;width:0;background:var(--acqua)}
.punto.attiva::after{animation:avanza 5s linear forwards}
.heroluce.ferma .punto.attiva::after{animation-play-state:paused}
@keyframes avanza{from{width:0}to{width:100%}}
.punto b{display:block;font-size:.72rem;letter-spacing:.14em;opacity:.7;font-weight:700}
.punto span{display:block;font-size:.88rem;font-weight:700;line-height:1.3}
.punto.attiva{color:var(--inchiostro)}
.punto:focus-visible{outline:3px solid var(--acqua);outline-offset:4px}

.pausa{appearance:none;background:rgba(255,255,255,.7);border:1px solid var(--filo);
  color:var(--corpo);border-radius:999px;padding:9px 15px;cursor:pointer;font-family:inherit;
  font-size:.76rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:9px;white-space:nowrap}
.pausa .ip{width:9px;height:11px;border-left:3px solid currentColor;border-right:3px solid currentColor}
.pausa.in-pausa .ip{border:0;width:0;height:0;border-left:9px solid currentColor;
  border-top:6px solid transparent;border-bottom:6px solid transparent}
@media (hover:hover){.pausa:hover{border-color:var(--acqua);color:var(--acqua)}}


/* ==================================================================
   LA FASCIA IN FONDO SUGLI SCHERMI STRETTI

   Le quattro voci dell'indice e i quattro numeri stavano su una riga
   sola, ancorati al centro con una posizione assoluta. Sotto il metro
   di larghezza le etichette si sovrapponevano l'una all'altra, il
   tasto di pausa finiva sopra, e l'ultimo numero usciva dallo schermo.

   Qui la fascia torna nel flusso della pagina e si dispone su due
   colonne: niente si sovrappone piu' e niente viene tagliato.
   ================================================================== */
@media(max-width:1100px){
  .punto{min-width:0;flex:1 1 0}
  .punto span{font-size:.82rem;line-height:1.25}
  .numero{padding-inline:clamp(12px,1.8vw,30px)}
}

@media(max-width:860px){
  .heroluce{min-height:0;
    padding-block:clamp(30px,5vh,58px) clamp(38px,6vh,66px)}
  .heroluce > .fondo{position:static;transform:none;
    /* resta un contenitore: deve tenere lo stesso margine laterale del
       titolo, non appoggiarsi al bordo dello schermo */
    width:min(1520px,92vw);margin-inline:auto;
    padding-right:0;margin-top:clamp(32px,6vh,56px);gap:26px}
  /* in posizione assoluta la fascia era centrata con translateX(-50%):
     l'ingresso doveva conservarlo. Qui non serve piu', e anzi la
     sposterebbe di mezza pagina. */
  .heroluce.entra .fondo{animation-name:sale}

  .indice{width:100%;flex-direction:column;align-items:stretch;gap:16px}
  .punti{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px}
  .punto{min-width:0}
  .pausa{align-self:flex-start}

  .numeri{display:grid;grid-template-columns:1fr 1fr;gap:20px 0;align-items:start}
  .numero{border-left:0;padding:0}
  .numero:nth-child(even){padding-left:clamp(16px,4vw,30px);
    border-left:1px solid var(--filo)}
}

@media(max-width:430px){
  .punti{gap:12px 14px}
  .punto span{font-size:.78rem}
  .numero b{font-size:1.45rem}
  .numero span{font-size:.82rem}
}

/* ------------------------------------------------------------------
   IL RACCORDO IN FONDO ALLA HOME.

   Il fondo della sezione e' azzurro (#E2EFF6 nell'angolo in basso a
   destra) mentre la dissolvenza della fascia sotto parte dal bianco
   pieno: due colori diversi che si toccavano di netto, ed e' quella la
   riga che si vedeva sotto i numeri.

   Qui la sezione si schiarisce da sola fino al bianco esatto da cui
   riparte la fascia, cosi' il passaggio non ha piu' un bordo. La rampa
   usa la stessa curva 3t^2-2t^3 di tutte le altre dissolvenze del
   sito: pendenza nulla ai due estremi, nessuna banda di Mach.

   Sta sotto al testo (z-index 1, il contenuto e' a 2 e 3): schiarisce
   solo il disegno di sfondo, le scritte restano nitide. */
.heroluce::after{content:"";position:absolute;left:0;right:0;bottom:0;
  z-index:1;pointer-events:none;
  height:clamp(150px,17vh,250px);
  background:linear-gradient(to bottom,
    rgba(255,255,255,0)    0%,
    rgba(255,255,255,.018) 8%,
    rgba(255,255,255,.069) 16%,
    rgba(255,255,255,.156) 25%,
    rgba(255,255,255,.255) 33%,
    rgba(255,255,255,.381) 42%,
    rgba(255,255,255,.500) 50%,
    rgba(255,255,255,.619) 58%,
    rgba(255,255,255,.745) 67%,
    rgba(255,255,255,.844) 75%,
    rgba(255,255,255,.931) 84%,
    rgba(255,255,255,.982) 92%,
    rgba(255,255,255,1)   100%)}

@media(max-width:860px){
  /* qui la fascia dei numeri non e' piu' in posizione assoluta: senza
     questo si troverebbe sotto al velo invece che sopra */
  /* relative, non static: serve lo z-index. Ma la regola di base usa
     left:50% con transform:translateX(-50%) per centrarsi, e in
     relative quel left tornerebbe a spostare la fascia di mezzo
     schermo verso destra: qui e' gia' centrata dai margini. */
  .heroluce > .fondo{position:relative;left:auto;right:auto;bottom:auto;
    transform:none;z-index:3}
  .heroluce::after{height:clamp(70px,9vh,110px)}
}

/* ------------------------------------------------------------------
   LA MISURA DELLE PRIME DUE SCENE.

   Il modello BIM e il ponteggio erano disegnati piu' in piccolo degli
   altri due e restavano al centro, dove il velo bianco che tiene
   leggibile il testo li smorza. Qui si ingrandiscono e si spostano
   verso destra, nella meta' libera della schermata: il modello
   parecchio, il ponteggio quanto basta.

   Sotto gli 860 pixel la fascia dei numeri passa sotto al testo e il
   disegno fa da sfondo a tutta la sezione: li' non si tocca. */
@media(min-width:861px){
  .scena[data-i="0"] svg,.scena[data-i="1"] svg{transform-origin:58% 50%}
  /* Quanto si possa ingrandire lo decide la scritta "livello 6 da
     modellare", che sta in cima a destra del modello: oltre un certo
     punto esce dal bordo. Il limite l'ho misurato larghezza per
     larghezza, ed e' questo che fissa i tre scalini. */
  .scena[data-i="0"] svg{transform:scale(1.13) translate(16px,0)}
  .scena[data-i="1"] svg{transform:scale(1.08) translate(12px,0)}
}
@media(min-width:1440px){
  .scena[data-i="0"] svg{transform:scale(1.27) translate(32px,0)}
  .scena[data-i="1"] svg{transform:scale(1.12) translate(24px,0)}
}
@media(min-width:1700px){
  .scena[data-i="0"] svg{transform:scale(1.42) translate(50px,0)}
  .scena[data-i="1"] svg{transform:scale(1.18) translate(38px,0)}
}