/* ==================================================================
   LDL — ingresso delle pagine di approfondimento.

   Prima si atterrava di colpo: il titolo era gia' li', fermo. Ora le
   righe dell'intestazione entrano una dopo l'altra, e ogni articolo ha
   il suo movimento, piccolo e discreto: si tratta di leggere, non di
   assistere a uno spettacolo.

   Sono animazioni di solo CSS, senza JavaScript: partono con la pagina
   e non dipendono da niente. Durano meno di un secondo.
   ================================================================== */

.page-hero > .container > *{animation-fill-mode:both;
  animation-timing-function:cubic-bezier(.22,1,.3,1)}
.page-hero > .container > *:nth-child(1){animation-delay:.04s}
.page-hero > .container > *:nth-child(2){animation-delay:.14s}
.page-hero > .container > *:nth-child(3){animation-delay:.24s}
.page-hero > .container > *:nth-child(4){animation-delay:.36s}
.page-hero > .container > *:nth-child(5){animation-delay:.46s}

/* 1 — dissolvenza pura */
body.art-1 .page-hero > .container > *{animation-name:arcDissolvi;animation-duration:.8s}
@keyframes arcDissolvi{from{opacity:0} to{opacity:1}}

/* 2 — sale di poco */
body.art-2 .page-hero > .container > *{animation-name:arcSale;animation-duration:.78s}
@keyframes arcSale{from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none}}

/* 3 — scende di poco */
body.art-3 .page-hero > .container > *{animation-name:arcScende;animation-duration:.78s}
@keyframes arcScende{from{opacity:0;transform:translateY(-14px)} to{opacity:1;transform:none}}

/* 4 — entra da sinistra */
body.art-4 .page-hero > .container > *{animation-name:arcSinistra;animation-duration:.8s}
@keyframes arcSinistra{from{opacity:0;transform:translateX(-22px)} to{opacity:1;transform:none}}

/* 5 — entra da destra */
body.art-5 .page-hero > .container > *{animation-name:arcDestra;animation-duration:.8s}
@keyframes arcDestra{from{opacity:0;transform:translateX(22px)} to{opacity:1;transform:none}}

/* 6 — si avvicina appena */
body.art-6 .page-hero > .container > *{animation-name:arcAvvicina;animation-duration:.82s}
@keyframes arcAvvicina{from{opacity:0;transform:scale(.972)} to{opacity:1;transform:none}}

/* 7 — si mette a fuoco */
body.art-7 .page-hero > .container > *{animation-name:arcFuoco;animation-duration:.86s}
@keyframes arcFuoco{from{opacity:0;filter:blur(7px)} to{opacity:1;filter:blur(0)}}

/* 8 — le lettere si stringono */
body.art-8 .page-hero > .container > *{animation-name:arcStringi;animation-duration:.86s}
@keyframes arcStringi{from{opacity:0;letter-spacing:.07em} to{opacity:1;letter-spacing:normal}}

/* chi legge con il movimento ridotto trova tutto fermo e gia' visibile */
@media (prefers-reduced-motion:reduce){
  .page-hero > .container > *{animation:none !important;opacity:1 !important;
    transform:none !important;filter:none !important;letter-spacing:normal !important}
}