/* ==================================================================
   LDL — la home entra sezione per sezione, ognuna a modo suo.

   Sei sezioni, sei movimenti diversi. Lo stato di partenza vale solo
   se il JavaScript ha messo .ha-anim sull'elemento radice: senza, la
   pagina resta completa e visibile.
   ================================================================== */
html.ha-anim [data-an]{opacity:0;will-change:opacity,transform}
html.ha-anim [data-an].an-in{
  animation-duration:860ms;
  animation-timing-function:cubic-bezier(.16,1,.3,1);
  animation-fill-mode:forwards;
  animation-delay:calc(var(--i,0) * var(--passo,90ms))}

/* --- 1. AREE DI INTERVENTO: si avvicinano -------------------------
   Le quattro schede arrivano dal fondo, ingrandendosi fino alla loro
   misura: come quattro tessere che si posano. */
.an-aree{--passo:90ms}
html.ha-anim .an-aree [data-an]{transform:scale(.90)}
html.ha-anim .an-aree [data-an].an-in{animation-name:anAvvicina}
@keyframes anAvvicina{from{opacity:0;transform:scale(.90)}
                      to  {opacity:1;transform:none}}
/* il titolo invece si distende: parte con le lettere larghe e le chiude */
html.ha-anim .an-aree .intestazione{transform:none}
html.ha-anim .an-aree .intestazione.an-in{animation-name:anDistendi}
@keyframes anDistendi{from{opacity:0;letter-spacing:.08em}
                      to  {opacity:1;letter-spacing:normal}}

/* --- 2. PERCHE' LDL: si incontrano --------------------------------
   Le fotografie entrano da sinistra, il testo da destra: si incontrano
   al centro, che e' esattamente quello che dice la sezione. */
.an-perche{--passo:0ms}
html.ha-anim .an-perche .container > div:nth-child(1){transform:translate3d(-40px,0,0)}
html.ha-anim .an-perche .container > div:nth-child(1).an-in{animation-name:anDaSinistra;
  animation-duration:980ms}
html.ha-anim .an-perche .container > div:nth-child(2){transform:translate3d(40px,0,0)}
html.ha-anim .an-perche .container > div:nth-child(2).an-in{animation-name:anDaDestra;
  animation-duration:980ms;animation-delay:140ms}
@keyframes anDaSinistra{from{opacity:0;transform:translate3d(-40px,0,0)} to{opacity:1;transform:none}}
@keyframes anDaDestra {from{opacity:0;transform:translate3d(40px,0,0)}  to{opacity:1;transform:none}}

/* --- 3. METODO LDL: si riempie dall'alto --------------------------
   I cinque passi si scoprono dall'alto verso il basso, uno dopo
   l'altro, come un modulo che si compila. */
.an-metodo{--passo:110ms}
html.ha-anim .an-metodo [data-an]{clip-path:inset(0 0 100% 0)}
html.ha-anim .an-metodo [data-an].an-in{animation-name:anScende;animation-duration:760ms;
  animation-timing-function:cubic-bezier(.3,.9,.25,1)}
@keyframes anScende{from{opacity:0;clip-path:inset(0 0 100% 0)}
                    25% {opacity:1}
                    to  {opacity:1;clip-path:inset(0 0 0 0)}}

/* --- 4. ESPERIENZA SUL CAMPO: la tendina sale ---------------------
   Le fotografie si scoprono dal basso, mentre l'immagine dentro perde
   un soffio di ingrandimento: lo stacco di una lastra che si rivela. */
.an-campo{--passo:130ms}
html.ha-anim .an-campo [data-an]{clip-path:inset(100% 0 0 0)}
html.ha-anim .an-campo [data-an].an-in{animation-name:anTendina;animation-duration:1000ms}
@keyframes anTendina{from{opacity:0;clip-path:inset(100% 0 0 0)}
                     20% {opacity:1}
                     to  {opacity:1;clip-path:inset(0 0 0 0)}}
html.ha-anim .an-campo [data-an] img{transform:scale(1.07);transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
html.ha-anim .an-campo [data-an].an-in img{transform:none}

/* --- 5. APPROFONDIMENTI: si ribaltano in avanti -------------------
   Le schede ruotano sull'asse orizzontale, incernierate in alto: il
   gesto di una pagina che si apre verso chi legge. */
.an-appro{--passo:95ms;perspective:1100px}
html.ha-anim .an-appro [data-an]{transform:perspective(1100px) rotateX(-58deg);
  transform-origin:50% 0%}
html.ha-anim .an-appro [data-an].an-in{animation-name:anRibalta;animation-duration:900ms}
@keyframes anRibalta{from{opacity:0;transform:perspective(1100px) rotateX(-58deg)}
                     to  {opacity:1;transform:perspective(1100px) rotateX(0)}}

/* --- 6. PARLIAMONE: va a fuoco ------------------------------------
   L'ultima sezione arriva sfocata e si mette a fuoco: chiude la pagina
   senza spostare niente, che a fine lettura e' la cosa piu' quieta. */
.an-parla{--passo:120ms}
html.ha-anim .an-parla [data-an]{filter:blur(9px);transform:none}
html.ha-anim .an-parla [data-an].an-in{animation-name:anFuoco;animation-duration:900ms}
@keyframes anFuoco{from{opacity:0;filter:blur(9px)} to{opacity:1;filter:blur(0)}}

@media (prefers-reduced-motion:reduce){
  html.ha-anim [data-an]{opacity:1 !important;transform:none !important;
    clip-path:none !important;filter:none !important;animation:none !important;
    letter-spacing:normal !important}
  html.ha-anim .an-campo [data-an] img{transform:none !important;transition:none}
}

/* ------------------------------------------------------------------
   Contenimento laterale.
   Gli ingressi che partono spostati di lato (le fotografie da sinistra,
   il testo da destra) tengono l'elemento fuori dal suo posto finche'
   non entra: senza questo, la pagina guadagna una barra di scorrimento
   orizzontale di una ventina di pixel sotto i 1200px di larghezza.
   "clip" invece di "hidden" perche' taglia solo in orizzontale e non
   crea un contenitore di scorrimento. */
html.ha-anim .an-aree,  html.ha-anim .an-perche, html.ha-anim .an-metodo,
html.ha-anim .an-campo, html.ha-anim .an-appro,  html.ha-anim .an-parla{
  overflow-x:clip}