/* ==================================================================
   LDL — la vetrina della home, il modello informativo della pagina BIM
   e l'ingresso della sezione contatti.

   Tre blocchi indipendenti, un solo foglio: ognuno vive anche se il
   JavaScript non parte. Senza script la vetrina mostra il primo
   quadro, il modello mostra tutti i livelli, i contatti si vedono
   comunque.
   ================================================================== */

/* ============================================================ 1. VETRINA
   Cinque quadri che si danno il cambio da soli dentro la fascia blu.
   A destra la pulsantiera: tutte le aree restano sempre visibili e
   raggiungibili, anche mentre lo scorrimento va avanti per conto suo. */

.vetrina-aree .intestazione{max-width:62ch;margin-bottom:clamp(34px,4vw,52px)}
.vetrina-aree .intestazione h2{margin:0 0 14px;
  font-size:clamp(1.9rem,3.1vw,2.9rem);line-height:1.12;color:#FFFFFF}
.vetrina-aree .intestazione .eyebrow{color:#7FE6F2 !important}
.vetrina-aree .intestazione .lead{color:#C4DCE4;margin:0}

.palco{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(250px,.95fr);
  gap:clamp(26px,3.4vw,54px);align-items:stretch}

/* --- il telaio e i quadri ---
   I cinque quadri stanno tutti nella stessa cella di griglia: si
   sovrappongono senza uscire dal flusso, cosi' il telaio prende da
   solo l'altezza del piu' lungo e nessun testo esce dal riquadro,
   a qualunque larghezza di schermo. */
.telaio{display:grid;grid-template-columns:minmax(0,1fr)}
.quadro{grid-area:1/1;margin:0;
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(28px,2.9vw,44px) clamp(26px,2.9vw,46px);
  border-radius:22px;
  background:linear-gradient(158deg,rgba(255,255,255,.085) 0%,
                              rgba(173,224,236,.055) 52%,
                              rgba(255,255,255,.028) 100%);
  border:1px solid rgba(146,206,220,.26);
  box-shadow:0 20px 52px rgba(0,14,22,.30);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  opacity:0;visibility:hidden;transform:translate3d(0,16px,0);
  transition:opacity .62s ease, transform .62s cubic-bezier(.22,1,.3,1),
             visibility 0s .62s}
.quadro.attivo{opacity:1;visibility:visible;transform:none;
  transition:opacity .62s ease, transform .62s cubic-bezier(.22,1,.3,1)}

.quadro .testa{margin-bottom:16px}
.quadro .occhio{font-weight:800;font-size:.76rem;letter-spacing:.17em;
  text-transform:uppercase;color:#7FE6F2}
.quadro h3{margin:0 0 14px;font-size:clamp(1.42rem,2.3vw,2.05rem);
  line-height:1.16;color:#FFFFFF}
.quadro .dice{margin:0;color:#CFE4EB;font-size:clamp(.98rem,1.06vw,1.08rem);
  line-height:1.66;max-width:60ch}
.quadro .nota{margin:16px 0 0;padding-left:14px;font-size:.92rem;line-height:1.55;
  color:#A8CAD3;border-left:2px solid rgba(127,230,242,.38)}

.quadro .voci{list-style:none;display:flex;flex-wrap:wrap;gap:9px;
  margin:22px 0 0;padding:0}
.quadro .voci li{font-size:.84rem;font-weight:600;letter-spacing:.01em;
  color:#DCEDF2;padding:7px 13px;border-radius:999px;
  background:rgba(255,255,255,.075);border:1px solid rgba(146,206,220,.3)}

/* Una scheda puo' avere due gruppi: testo, etichette, altro testo,
   altre etichette. Il secondo paragrafo ha bisogno del suo respiro,
   altrimenti si appoggia alle pillole di sopra. */
.quadro .voci + .dice{margin-top:22px}

.quadro .vai{align-self:flex-start;margin-top:26px;font-weight:800;
  font-size:.98rem;color:#7FE6F2;
  border-bottom:1px solid rgba(127,230,242,.42);padding-bottom:3px;
  transition:border-color .28s ease, transform .28s cubic-bezier(.22,1,.3,1)}
@media (hover:hover){
  .quadro .vai:hover{border-bottom-color:#7FE6F2;transform:translateX(4px)}
}
.quadro .vai:focus-visible{outline:3px solid #7FE6F2;outline-offset:4px;border-radius:4px}

/* --- la pulsantiera di destra --- */
.rail{display:flex;flex-direction:column;gap:6px}
.tasto{position:relative;display:block;width:100%;text-align:left;cursor:pointer;
  padding:15px 16px 16px;border:0;border-radius:13px;background:transparent;
  color:#B6D3DC;font:inherit;transition:background .3s ease, color .3s ease}
.tasto .te{font-weight:700;font-size:clamp(.92rem,1.02vw,1.02rem);line-height:1.25}
.tasto.attivo{background:rgba(255,255,255,.08);color:#FFFFFF}
@media (hover:hover){
  .tasto:hover{background:rgba(255,255,255,.055);color:#FFFFFF}
}
.tasto:focus-visible{outline:3px solid #7FE6F2;outline-offset:2px}

/* la barra che si riempie: dice quanto manca al quadro successivo */
.tasto .corsa{position:absolute;left:16px;right:16px;bottom:7px;height:2px;
  border-radius:2px;background:rgba(146,206,220,.22);overflow:hidden}
.tasto .corsa i{display:block;height:100%;width:100%;border-radius:2px;
  background:#7FE6F2;transform:scaleX(0);transform-origin:left center}
.tasto.attivo .corsa i{animation:vtCorsa var(--durata,9000ms) linear forwards}
.palco.in-pausa .tasto.attivo .corsa i{animation-play-state:paused}
@keyframes vtCorsa{from{transform:scaleX(0)} to{transform:scaleX(1)}}

@media(max-width:1020px){
  .palco{grid-template-columns:1fr}
  .rail{flex-direction:row;flex-wrap:wrap;gap:8px}
  .tasto{width:auto;flex:1 1 170px}
}
@media(max-width:620px){
  .rail{flex-direction:column}
  .tasto{width:100%}
}

/* ====================================================== 2. MODELLO BIM
   I livelli del modello federato si accendono uno dopo l'altro: prima
   il rilievo, poi strutture, involucro, impianti e infine le
   interferenze. L'involucro si fa trasparente quando entrano gli
   impianti, come in una sezione di modello. */

.giro-bim .split{display:grid;grid-template-columns:1fr 1.08fr;
  gap:clamp(28px,4vw,64px);align-items:center}
.giro-bim .nota-norme{font-size:.95rem;color:var(--tenue,#3A5B67);
  border-left:2px solid var(--filo,#D3E3EA);padding-left:14px;margin-top:22px}

.passi{list-style:none;margin:26px 0 0;padding:0;display:flex;
  flex-direction:column;gap:3px}
.passo{position:relative;display:block;width:100%;text-align:left;cursor:pointer;font:inherit;
  padding:13px 14px;border:0;border-radius:12px;background:transparent;
  transition:background .3s ease}
.passo .pn{font-weight:800;font-size:.76rem;letter-spacing:.12em;
  color:var(--acqua,#007A8A);padding-top:3px;opacity:.55;transition:opacity .3s ease}
.passo b{display:block;font-size:1rem;color:var(--inchiostro,#0B2E3D)}
/* Come sopra: il testo si richiude solo quando c'e' chi lo riapre. */
.passo em{display:block;font-style:normal;font-size:.92rem;line-height:1.52;
  color:var(--corpo,#44636F);margin-top:4px;
  transition:max-height .45s ease, opacity .35s ease, margin-top .45s ease}
html.ha-passi .passo em{max-height:0;overflow:hidden;opacity:0;margin-top:0}
.passo.attivo{background:#EDF5F8}
.passo.attivo .pn{opacity:1}
html.ha-passi .passo.attivo em{max-height:8em;opacity:1;margin-top:4px}
@media (hover:hover){ .passo:hover{background:#F2F8FB} }
.passo:focus-visible{outline:3px solid var(--acqua,#007A8A);outline-offset:2px}

.modello{position:relative;border-radius:20px;padding:18px;
  background:linear-gradient(158deg,#FFFFFF 0%,#F2F8FB 52%,#E4F0F6 100%);
  border:1px solid var(--filo,#D3E3EA);
  box-shadow:0 16px 40px rgba(11,46,61,.10)}
.modello svg{display:block;width:100%;height:auto}
.modello .etichetta{font-weight:800;letter-spacing:.14em;
  font-size:11px;fill:#00525E;text-transform:uppercase}

/* Senza JavaScript il modello si vede intero: sono i passi a spegnere
   i livelli, non il contrario. La dissolvenza si attiva solo dopo il
   primo passo, cosi' all'apertura non si vede nulla sparire. */
.modello .liv{opacity:1}
.modello.avviato .liv{transition:opacity .75s ease}

.modello[data-passo="1"] .liv-2,.modello[data-passo="1"] .liv-3,
.modello[data-passo="1"] .liv-4,.modello[data-passo="1"] .liv-5,
.modello[data-passo="2"] .liv-3,.modello[data-passo="2"] .liv-4,
.modello[data-passo="2"] .liv-5,
.modello[data-passo="3"] .liv-4,.modello[data-passo="3"] .liv-5,
.modello[data-passo="4"] .liv-5{opacity:0}

/* quando entrano gli impianti l'involucro si apre, come in sezione */
.modello[data-passo="4"] .liv-3,
.modello[data-passo="5"] .liv-3{opacity:.26}

/* le interferenze pulsano piano: sono il punto del discorso */
.modello .segnale{transform-box:fill-box;transform-origin:center;
  animation:bimBattito 2.4s ease-in-out infinite}
.modello .segnale:nth-of-type(2){animation-delay:.8s}

@keyframes bimBattito{0%,100%{opacity:.35;transform:scale(.72)}
                      50%    {opacity:1;  transform:scale(1)}}

@media(max-width:980px){ .giro-bim .split{grid-template-columns:1fr} }

/* ================================================== 3. CONTATTI
   Un solo movimento per tutta la sezione: sale e si mette a fuoco
   come un blocco unico. Nessuno script: parte con la pagina. */

body.conta .contact-grid{animation:cnEntra .95s cubic-bezier(.22,1,.3,1) both;
  animation-delay:.08s}
@keyframes cnEntra{from{opacity:0;transform:translate3d(0,26px,0) scale(.988)}
                   to  {opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .quadro{transition:none}
  .tasto.attivo .corsa i{animation:none;transform:scaleX(1)}
  .modello .liv{opacity:1 !important;transition:none}
  .modello[data-passo] .liv-3{opacity:1 !important}
  .modello .segnale{animation:none;opacity:1}
  html.ha-passi .passo em{max-height:none;opacity:1;margin-top:4px}
  body.conta .contact-grid{animation:none}
}