/* ==================================================================
   LDL — intestazioni delle quattro aree di intervento.
   Stesso linguaggio dell'hero della home (campo chiaro, testo navy
   ancorato a sinistra, ingresso cinematografico), ma ogni area ha una
   scena propria: non una decorazione, lo strumento con cui si lavora
   in quell'area. Le scene sono SVG, quindi nitide a ogni risoluzione.
   ================================================================== */

.page-hero.area-hero{
  background:#F2F7FA;
  color:var(--navy);
  padding:0;
  position:relative;
  overflow:hidden;
  isolation:isolate;
}

/* ---------- campo e livelli ---------- */
.ah-field{position:absolute;top:0;left:0;right:0;bottom:0;z-index:0;overflow:hidden;
  background:
    radial-gradient(1100px 620px at 78% 18%, #FFFFFF 0%, rgba(255,255,255,0) 62%),
    linear-gradient(104deg,#F7FBFC 0%,#EEF5F8 46%,#E4EFF4 100%)}
.ah-stage{position:absolute;top:-2%;left:-2%;width:104%;height:104%;
  will-change:transform;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.ah-scene{position:absolute;top:0;right:0;width:62%;height:100%;
  display:flex;align-items:center;justify-content:center}
.ah-scene svg{width:100%;height:100%;overflow:visible}
@media (max-width:980px){ .ah-scene{width:100%;opacity:.5} }

/* velo che tiene pulita la colonna di testo */
.ah-scrim{position:absolute;top:0;left:0;right:0;bottom:0;z-index:1;pointer-events:none;
  background:linear-gradient(97deg,
    rgba(247,251,253,.97) 0%,
    rgba(246,251,253,.94) 40%,
    rgba(244,250,252,.76) 58%,
    rgba(242,249,251,.30) 76%,
    rgba(240,248,251,0) 90%)}
@media (max-width:980px){
  .ah-scrim{background:linear-gradient(185deg,
    rgba(248,252,254,.93) 0%,rgba(246,251,253,.90) 52%,rgba(244,250,252,.82) 100%)}
}
.ah-glow{position:absolute;top:0;left:0;right:0;bottom:0;z-index:1;pointer-events:none;
  opacity:0;transition:opacity .6s ease;
  background:radial-gradient(380px 380px at var(--gx,60%) var(--gy,50%),
    rgba(255,255,255,.6),rgba(0,200,220,.06) 46%,transparent 72%)}
.area-hero.lit .ah-glow{opacity:1}

/* ---------- contenuto ---------- */
.area-hero > .container{
  position:relative;z-index:2;
  width:min(660px,calc(100% - 44px));max-width:none;
  margin-left:clamp(22px,5.5vw,124px);margin-right:0;
  padding-block:clamp(74px,8vw,112px) clamp(58px,6vw,88px);
}
.area-hero .breadcrumbs{color:#3E5C68;font-size:.82rem}
.area-hero .breadcrumbs a{color:#00646F;font-weight:600}
.area-hero .eyebrow{color:#00646F !important;font-family:'Jura',system-ui,sans-serif;
  font-weight:600;letter-spacing:.17em;font-size:.76rem}
.area-hero h1{color:var(--navy);font-family:'Jura',system-ui,sans-serif;
  font-weight:700;letter-spacing:-.008em;line-height:1.18;
  font-size:clamp(2.35rem,4.5vw,3.85rem);max-width:none;text-wrap:balance}
.area-hero .lead{color:#203C4A;font-family:'Jura',system-ui,sans-serif;font-weight:400;
  font-size:clamp(1.1rem,1.32vw,1.24rem);line-height:1.6;letter-spacing:.004em}
.area-hero .btn{font-family:'Jura',system-ui,sans-serif;font-weight:600;font-size:.95rem;
  letter-spacing:.004em}
.area-hero .btn-primary{background:var(--navy);color:#fff;border-color:var(--navy)}
.area-hero .btn-primary:hover{box-shadow:0 10px 30px rgba(0,32,46,.22);transform:translateY(-2px)}
.area-hero .btn-ghost{border-color:rgba(0,32,46,.38);color:var(--navy)}
.area-hero .btn-ghost:hover{border-color:var(--navy);background:rgba(0,32,46,.05)}

/* ---------- ingresso dei testi ---------- */
.area-hero > .container > *{opacity:0;transform:translate3d(0,20px,0)}
.area-hero.is-in > .container > *{animation:ahUp 900ms cubic-bezier(.16,1,.3,1) forwards}
.area-hero.is-in > .container > *:nth-child(1){animation-delay:420ms}
.area-hero.is-in > .container > *:nth-child(2){animation-delay:510ms}
.area-hero.is-in > .container > *:nth-child(3){animation-delay:620ms}
.area-hero.is-in > .container > *:nth-child(4){animation-delay:740ms}
.area-hero.is-in > .container > *:nth-child(5){animation-delay:850ms}
@keyframes ahUp{to{opacity:1;transform:translate3d(0,0,0)}}

/* ==================================================================
   SCENE
   ================================================================== */

/* tratti comuni */
.ah-scene .ink   {stroke:#0F3A49;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ah-scene .faint {stroke:#9CBCC8;fill:none;stroke-linecap:round}
.ah-scene .accent{stroke:#00808F;fill:none;stroke-linecap:round}
.ah-scene .dot   {fill:#00808F}
.ah-scene .lbl   {fill:#4C6E7B;font:600 13px 'Jura',sans-serif;letter-spacing:.09em}
.ah-scene .lblS  {fill:#7A99A5;font:500 11px 'Jura',sans-serif;letter-spacing:.07em}

/* --- 01 · ciclo di audit: gli archi si chiudono uno dopo l'altro --- */
.sc-ciclo .arc{stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
.is-in .sc-ciclo .arc{animation:ahDraw 900ms cubic-bezier(.3,.8,.3,1) forwards;
  animation-delay:calc(180ms + var(--i)*260ms)}
@keyframes ahDraw{to{stroke-dashoffset:0}}
.sc-ciclo .tick{opacity:0}
.is-in .sc-ciclo .tick{animation:ahFade 600ms ease forwards;
  animation-delay:calc(240ms + var(--i)*14ms)}
.sc-ciclo .runner{opacity:0;transform-box:fill-box;transform-origin:center}
.is-in .sc-ciclo .runner{animation:ahFade 400ms 1250ms ease forwards}
.is-in .sc-ciclo .runnerG{animation:ahSpin 26s 1250ms linear infinite}
@keyframes ahSpin{to{transform:rotate(360deg)}}
.sc-ciclo .qlabel{opacity:0}
.is-in .sc-ciclo .qlabel{animation:ahFade 700ms ease forwards;
  animation-delay:calc(560ms + var(--i)*260ms)}

/* --- 02 · planimetria di emergenza: muri, tramezzi, percorso di esodo --- */
.sc-planimetria .wall{stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
.is-in .sc-planimetria .wall{animation:ahDraw 760ms cubic-bezier(.3,.85,.3,1) forwards;
  animation-delay:calc(160ms + var(--i)*80ms)}
.sc-planimetria .part{opacity:0}
.is-in .sc-planimetria .part{animation:ahFade 520ms ease forwards;
  animation-delay:calc(620ms + var(--i)*70ms)}
.sc-planimetria .route{stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
.is-in .sc-planimetria .route{animation:ahDraw 1150ms 1000ms cubic-bezier(.3,.8,.3,1) forwards}
.sc-planimetria .mark{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.5)}
.is-in .sc-planimetria .mark{animation:ahPop 520ms cubic-bezier(.2,1.3,.4,1) forwards;
  animation-delay:calc(1200ms + var(--i)*90ms)}
.sc-planimetria .quota{opacity:0}
.is-in .sc-planimetria .quota{animation:ahFade 700ms 1500ms ease forwards}
@keyframes ahPop{to{opacity:1;transform:scale(1)}}

/* --- 03 · il modello si eleva: le piastre salgono una per volta --- */
.sc-modello .plate{opacity:0;transform:translateY(46px)}
.is-in .sc-modello .plate{animation:ahRise 900ms cubic-bezier(.16,1,.3,1) forwards;
  animation-delay:calc(200ms + var(--i)*150ms)}
@keyframes ahRise{to{opacity:1;transform:translateY(0)}}
.sc-modello .post{stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
.is-in .sc-modello .post{animation:ahDraw 700ms ease-out forwards;
  animation-delay:calc(320ms + var(--i)*150ms)}
.sc-modello .grid{opacity:0}
.is-in .sc-modello .grid{animation:ahFade 900ms 120ms ease forwards}
.sc-modello .quota{opacity:0}
.is-in .sc-modello .quota{animation:ahFade 800ms 1420ms ease forwards}
.is-in .sc-modello .driftG{animation:ahDrift 30s 1600ms ease-in-out infinite alternate}
@keyframes ahDrift{to{transform:translate3d(-14px,-9px,0)}}

/* --- 04 · fascicolo di gara: i fogli si impaginano, la barra avanza --- */
.sc-fascicolo .sheet{opacity:0;transform:translate3d(54px,14px,0) rotate(3deg)}
.is-in .sc-fascicolo .sheet{animation:ahDeal 880ms cubic-bezier(.16,1,.3,1) forwards;
  animation-delay:calc(200ms + var(--i)*160ms)}
@keyframes ahDeal{to{opacity:1;transform:translate3d(0,0,0) rotate(var(--rot,0deg))}}
.sc-fascicolo .line{opacity:0}
.is-in .sc-fascicolo .line{animation:ahFade 500ms ease forwards;
  animation-delay:calc(560ms + var(--i)*160ms + var(--j)*55ms)}
.sc-fascicolo .rail{stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
.is-in .sc-fascicolo .rail{animation:ahDraw 1500ms 900ms cubic-bezier(.3,.8,.3,1) forwards}
.sc-fascicolo .stop{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.4)}
.is-in .sc-fascicolo .stop{animation:ahPop 520ms cubic-bezier(.2,1.3,.4,1) forwards;
  animation-delay:calc(1050ms + var(--i)*230ms)}

@keyframes ahFade{to{opacity:1}}

/* ---------- riduci movimento: stato finale, nessuna animazione ---- */
@media (prefers-reduced-motion:reduce){
  .area-hero > .container > *{opacity:1 !important;transform:none !important}
  .ah-scene *{opacity:1 !important;transform:none !important;
    stroke-dashoffset:0 !important}
  .area-hero.is-in *, .area-hero.is-in{animation:none !important}
  .ah-stage{transition:none}
}

/* ==================================================================
   PASSAGGIO DEL MOUSE SULLA SCENA
   Una micro-animazione per area, coerente con ciò che la scena
   rappresenta: non un effetto generico applicato a tutte e quattro.
   Si attiva solo con un puntatore vero (hover:hover), così sui
   dispositivi touch non resta nulla di sospeso.
   ================================================================== */
@media (hover:hover){

  /* 01 · il ciclo accelera e gli archi prendono luce */
  .area-hero:hover .sc-ciclo .runnerG{animation-duration:6s}
  .area-hero .sc-ciclo .arc{transition:stroke-width .45s ease, opacity .45s ease}
  .area-hero:hover .sc-ciclo .arc{stroke-width:3.6}
  .area-hero .sc-ciclo .qlabel{transition:opacity .4s ease}
  .area-hero:hover .sc-ciclo .qlabel{opacity:1}
  .area-hero .sc-ciclo .tick{transition:opacity .5s ease}
  .area-hero:hover .sc-ciclo .tick{opacity:.85}

  /* 02 · il percorso di esodo si mette in movimento */
  .area-hero:hover .sc-planimetria .route{
    stroke-dasharray:12 9;
    animation:rvFlow 1.1s linear infinite !important;
  }
  @keyframes rvFlow{to{stroke-dashoffset:-21}}
  .area-hero .sc-planimetria .mark{transition:opacity .4s ease}
  .area-hero:hover .sc-planimetria .mark:nth-of-type(odd){opacity:.75}

  /* 03 · il modello si apre: i solai si distanziano, il nucleo si accende */
  .area-hero .sc-modello .plate{transition:transform .75s cubic-bezier(.22,1,.3,1)}
  .area-hero:hover .sc-modello .plate{transform:translateY(calc(var(--i) * -5px))}
  .area-hero .sc-modello .quota{transition:opacity .5s ease}
  .area-hero:hover .sc-modello .quota{opacity:.95}

  /* 04 · il fascicolo si sfoglia e le clausole si accendono */
  .area-hero .sc-fascicolo .sheet{transition:transform .6s cubic-bezier(.22,1,.3,1)}
  .area-hero:hover .sc-fascicolo .sheet{
    transform:translate3d(calc(var(--i) * 7px), calc(var(--i) * -5px),0) rotate(var(--rot,0deg));
  }
  .area-hero .sc-fascicolo .stop{transition:transform .5s cubic-bezier(.2,1.3,.4,1)}
  .area-hero:hover .sc-fascicolo .stop:last-of-type{transform:scale(1.22)}
}

/* ==================================================================
   INGRESSO DELLE SEZIONI ALLO SCORRIMENTO
   Le regole si applicano solo quando il JavaScript ha marcato il
   documento: senza JavaScript la pagina resta completa e leggibile.
   ================================================================== */
html.has-reveal [data-rv]{opacity:0;transform:translate3d(0,24px,0);will-change:opacity,transform}
html.has-reveal [data-rv].rv-in{
  animation:rvUp 720ms cubic-bezier(.16,1,.3,1) forwards;
  animation-delay:var(--rd,0ms);
}
@keyframes rvUp{to{opacity:1;transform:translate3d(0,0,0)}}

/* le schede arrivano di lato, così si distinguono dai blocchi di testo */
html.has-reveal [data-rv="card"]{transform:translate3d(16px,18px,0) scale(.985)}
html.has-reveal [data-rv="card"].rv-in{animation-name:rvCard}
@keyframes rvCard{to{opacity:1;transform:translate3d(0,0,0) scale(1)}}

/* una scheda che si solleva appena quando ci passi sopra */
@media (hover:hover){
  .mini-card{transition:transform .35s cubic-bezier(.22,1,.3,1), box-shadow .35s ease,
             border-color .35s ease}
  .mini-card:hover{transform:translateY(-3px);border-color:#9FC6D1;
    box-shadow:0 10px 26px rgba(0,32,46,.08)}
}

@media (prefers-reduced-motion:reduce){
  html.has-reveal [data-rv]{opacity:1 !important;transform:none !important;animation:none !important}
  .mini-card{transition:none}
  .area-hero:hover .sc-modello .plate,
  .area-hero:hover .sc-fascicolo .sheet{transform:none}
  .area-hero:hover .sc-planimetria .route{animation:none !important;stroke-dasharray:none}
}

/* ==================================================================
   FASCIA SCURA "COSA FACCIAMO"
   Il fondo non e' un blu piatto: due aloni ampi e sfocati sopra un
   gradiente obliquo, e un raccordo morbido con le sezioni chiare
   sopra e sotto, cosi' la fascia non taglia la pagina ma ci sfuma
   dentro. Tutti i colori del testo sono scelti e misurati per il
   fondo scuro, non ereditati da quello chiaro.
   ================================================================== */
.section.band-deep{
  position:relative; isolation:isolate; color:#EAF3F6;
  /* il contenuto deve cominciare SOTTO il raccordo sfumato, altrimenti
     l'occhiello finisce su un fondo ancora chiaro e perde contrasto */
  --raccordo:clamp(150px,14vw,215px);
  padding-top:calc(var(--raccordo) + clamp(34px,3.4vw,52px));
  padding-bottom:calc(var(--raccordo) + clamp(30px,3vw,46px));
  background:
    radial-gradient(900px 540px at 16% 10%, rgba(0,170,195,.17), transparent 62%),
    radial-gradient(780px 500px at 88% 92%, rgba(0,105,140,.20), transparent 64%),
    linear-gradient(168deg,#002A3D 0%,#00202E 54%,#00182352 100%),
    #00202E;
}
/* Raccordi: sopra e sotto c'e' il bianco, da quando i due chiari del
   sito sono diventati uno solo. Stessa curva 3t^2-2t^3 delle fasce:
   pendenza nulla ai due capi, quindi nessuno spigolo da cui l'occhio
   possa ricavare una riga. */
.section.band-deep::before,
.section.band-deep::after{content:"";position:absolute;left:0;right:0;
  height:var(--raccordo);pointer-events:none;z-index:0}
.section.band-deep::before{top:0;background:linear-gradient(to top,
  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%)}
.section.band-deep::after{bottom:0;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%)}
.section.band-deep > *{position:relative;z-index:1}

.section.band-deep .eyebrow{color:#63E8F7 !important}
.section.band-deep h2{color:#FFFFFF}
.section.band-deep .lead{color:#D2E3EA}

.section.band-deep .mini-card{
  background:rgba(255,255,255,.055);
  border-color:rgba(255,255,255,.16);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset;
}
.section.band-deep .mini-card b{color:#FFFFFF}
.section.band-deep .mini-card span{color:#BED3DB}

@media (hover:hover){
  .section.band-deep .mini-card:hover{
    background:rgba(255,255,255,.095);
    border-color:rgba(99,232,247,.42);
    box-shadow:0 14px 32px rgba(0,0,0,.30);
  }
}


/* ==================================================================
   SEZIONE "SCHEMI"
   La nota sugli altri standard stava in fondo alla griglia, staccata
   di cinque righe di schede dal testo a cui si riferisce. Ora sta
   nella colonna di sinistra, sotto il testo introduttivo.
   I riquadri delle norme si retroilluminano al passaggio del mouse:
   alone ciano intorno al bordo, fondo che schiarisce dall'alto.
   ================================================================== */
.nota-blocco{margin-top:20px;color:#4A6270;font-size:1rem;line-height:1.72;max-width:48ch}

@media (hover:hover){
  .sez-schemi .mini-card{
    transition:transform .3s cubic-bezier(.22,1,.3,1), box-shadow .3s ease,
               border-color .3s ease, background .3s ease;
  }
  .sez-schemi .mini-card:hover{
    transform:translateY(-3px);
    border-color:var(--cyan-dark);
    background:linear-gradient(180deg,#F1FBFD 0%,#FFFFFF 62%);
    /* tre strati: anello ciano aderente, alone diffuso, ombra di appoggio */
    box-shadow:0 0 0 3px rgba(0,233,250,.20),
               0 0 26px rgba(0,233,250,.26),
               0 12px 30px rgba(0,110,130,.15);
  }
  .sez-schemi .mini-card:hover b{color:var(--cyan-dark)}
}
@media (prefers-reduced-motion:reduce){
  .sez-schemi .mini-card{transition:none}
  .sez-schemi .mini-card:hover{transform:none}
}