/* ==================================================================
   LDL — ingressi in scena, uno diverso per ogni area.

   Prima tutte e quattro le pagine usavano lo stesso movimento: testi e
   riquadri salivano di ventiquattro pixel, sempre uguali. Qui ogni area
   entra come si lavora in quell'area.

   Audit      — da sinistra e da destra, alternati: due parti che si
                confrontano, come una verifica.
   Sicurezza  — dall'alto, con un piccolo assestamento: le cose che
                cadono al loro posto e si fermano.
   BIM        — dal basso con una rotazione sull'asse orizzontale: il
                modello che si alza dal piano.
   Compliance — scoperti da una lama che corre: il documento che si apre.

   Il meccanismo resta quello del sito (la classe .rv-in la mette il
   JavaScript): qui cambiano solo lo stato di partenza e l'animazione.
   ================================================================== */

/* ---------------------------------------------- AUDIT: da lato ---- */
html.has-reveal body.area-audit [data-rv]{
  transform:translate3d(-26px,0,0)}
html.has-reveal body.area-audit [data-rv].rv-in{animation-name:arSin}
html.has-reveal body.area-audit [data-rv="card"]:nth-child(even){
  transform:translate3d(26px,0,0)}
html.has-reveal body.area-audit [data-rv="card"]:nth-child(even).rv-in{animation-name:arDes}
@keyframes arSin{from{opacity:0;transform:translate3d(-26px,0,0)}
                 to  {opacity:1;transform:none}}
@keyframes arDes{from{opacity:0;transform:translate3d(26px,0,0)}
                 to  {opacity:1;transform:none}}

/* ------------------------------------------ SICUREZZA: dall'alto -- */
html.has-reveal body.area-sicurezza [data-rv]{
  transform:translate3d(0,-22px,0)}
html.has-reveal body.area-sicurezza [data-rv].rv-in{
  animation-name:arCade;
  animation-timing-function:cubic-bezier(.22,1.5,.36,1)}
@keyframes arCade{from{opacity:0;transform:translate3d(0,-22px,0)}
                  to  {opacity:1;transform:none}}
html.has-reveal body.area-sicurezza [data-rv="card"]{
  transform:translate3d(0,-26px,0) scale(.97)}
html.has-reveal body.area-sicurezza [data-rv="card"].rv-in{animation-name:arCadeCard}
@keyframes arCadeCard{from{opacity:0;transform:translate3d(0,-26px,0) scale(.97)}
                      60% {opacity:1;transform:translate3d(0,4px,0) scale(1.005)}
                      to  {opacity:1;transform:none}}

/* ------------------------------------------------- BIM: si alza --- */
html.has-reveal body.area-bim [data-rv]{
  transform:perspective(900px) translate3d(0,30px,0) rotateX(9deg);
  transform-origin:50% 100%}
html.has-reveal body.area-bim [data-rv].rv-in{animation-name:arAlza;
  animation-duration:980ms}
@keyframes arAlza{from{opacity:0;transform:perspective(900px) translate3d(0,30px,0) rotateX(9deg)}
                  to  {opacity:1;transform:perspective(900px) translate3d(0,0,0) rotateX(0)}}
html.has-reveal body.area-bim [data-rv="card"]{
  transform:perspective(900px) translate3d(0,24px,0) rotateX(12deg) scale(.985)}
html.has-reveal body.area-bim [data-rv="card"].rv-in{animation-name:arAlzaCard}
@keyframes arAlzaCard{
  from{opacity:0;transform:perspective(900px) translate3d(0,24px,0) rotateX(12deg) scale(.985)}
  to  {opacity:1;transform:perspective(900px) translate3d(0,0,0) rotateX(0) scale(1)}}

/* --------------------------------------- COMPLIANCE: si scopre ---- */
html.has-reveal body.area-compliance [data-rv]{
  transform:none;clip-path:inset(0 100% 0 0)}
html.has-reveal body.area-compliance [data-rv].rv-in{animation-name:arApre;
  animation-duration:900ms;animation-timing-function:cubic-bezier(.3,.9,.25,1)}
@keyframes arApre{from{opacity:0;clip-path:inset(0 100% 0 0)}
                  30% {opacity:1}
                  to  {opacity:1;clip-path:inset(0 0 0 0)}}
html.has-reveal body.area-compliance [data-rv="card"]{
  transform:translate3d(0,0,0) scale(.965);clip-path:inset(0 100% 0 0)}
html.has-reveal body.area-compliance [data-rv="card"].rv-in{animation-name:arApreCard}
@keyframes arApreCard{
  from{opacity:0;transform:scale(.965);clip-path:inset(0 100% 0 0)}
  to  {opacity:1;transform:none;clip-path:inset(0 0 0 0)}}

/* ==================================================================
   IL GIRO DELLA FORMAZIONE
   Cinque passi che scorrono da soli, uno ogni quattro secondi e mezzo.
   Si possono fermare, e si sceglie il passo dai pallini.
   ================================================================== */
.formazione-giro .split{display:grid;grid-template-columns:1.05fr 1fr;
  gap:clamp(28px,4vw,64px);align-items:start}
.formazione-giro .nota-norme{font-size:.95rem;color:var(--tenue,#3A5B67);
  border-left:2px solid var(--filo,#D3E3EA);padding-left:14px;margin-top:22px}
.formazione-giro .rimando{margin-top:20px}
.formazione-giro .rimando a{font-weight:800;color:var(--acqua-scuro,#00525E);
  border-bottom:1px solid rgba(0,122,138,.4);padding-bottom:2px}
@media (hover:hover){.formazione-giro .rimando a:hover{border-bottom-color:var(--acqua,#007A8A)}}

.giro{position:relative}
.vetrina{position:relative;min-height:290px}
.slide{position:absolute;inset:0;margin:0;padding:34px 34px 30px;
  background:linear-gradient(158deg,#FFFFFF 0%,#F2F8FB 52%,#E4F0F6 100%);
  border:1px solid var(--filo,#D3E3EA);border-radius:20px;
  box-shadow:0 16px 40px rgba(11,46,61,.10);
  opacity:0;visibility:hidden;transform:translate3d(28px,0,0);
  transition:opacity .55s ease, transform .55s cubic-bezier(.22,1,.3,1), visibility 0s .55s}
.slide.attiva{opacity:1;visibility:visible;transform:none;
  transition:opacity .55s ease, transform .55s cubic-bezier(.22,1,.3,1)}

.slide h3{margin:0 0 10px;font-size:clamp(1.25rem,1.7vw,1.6rem);color:var(--inchiostro,#0B2E3D)}
.slide p{margin:0;color:var(--corpo,#44636F);font-size:1rem;line-height:1.62}

.giro .comandi{display:flex;align-items:center;gap:16px;margin-top:20px}
.giro .punti{display:flex;gap:9px}
.giro .punto{width:34px;height:4px;border:0;padding:0;border-radius:2px;cursor:pointer;
  background:var(--filo,#D3E3EA);transition:background .3s ease}
.giro .punto.attiva{background:var(--acqua,#007A8A)}
.giro .punto:focus-visible,.giro .ferma:focus-visible{outline:3px solid var(--acqua,#007A8A);
  outline-offset:3px}
.giro .ferma{margin-left:auto;width:34px;height:34px;border-radius:50%;cursor:pointer;
  border:1px solid var(--filo,#D3E3EA);background:#fff;display:grid;place-items:center}
.giro .ferma .ip{width:8px;height:10px;border-left:3px solid var(--corpo,#44636F);
  border-right:3px solid var(--corpo,#44636F)}
.giro .ferma.in-pausa .ip{border:0;width:0;height:0;
  border-left:9px solid var(--corpo,#44636F);
  border-top:5px solid transparent;border-bottom:5px solid transparent}
@media (hover:hover){.giro .ferma:hover{border-color:var(--acqua,#007A8A)}}

@media(max-width:980px){
  .formazione-giro .split{grid-template-columns:1fr}
  .vetrina{min-height:340px}
}
@media(max-width:560px){ .vetrina{min-height:400px} .slide{padding:26px 22px} }

@media (prefers-reduced-motion:reduce){
  .slide{transition:none}
  html.has-reveal body [data-rv]{opacity:1 !important;transform:none !important;
    clip-path:none !important;animation:none !important}
}

/* Stesso contenimento per le aree che entrano di lato: senza, sotto
   una certa larghezza compare una barra di scorrimento orizzontale. */
html.has-reveal body.area-audit .section,
html.has-reveal body.area-sicurezza .section,
html.has-reveal body.area-bim .section,
html.has-reveal body.area-compliance .section{overflow-x:clip}