/* Movimento del sito. Vale solo con html.movimento, che la testa della
   pagina mette quando il browser puo' e l'utente non ha chiesto meno
   movimento: senza quella classe niente e' nascosto e niente si muove. */

/* Da una pagina all'altra: dissolvenza con la barra in alto che resta ferma
   (View Transitions tra documenti; i browser che non le conoscono cambiano
   pagina come sempre). */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  header.wp-block-template-part{view-transition-name:paghera-testata}
  ::view-transition-old(root){animation:paghera-esce .28s cubic-bezier(.4,0,1,1) both}
  ::view-transition-new(root){animation:paghera-entra .7s cubic-bezier(.16,1,.3,1) both}
  ::view-transition-group(paghera-testata){animation:none}
}
@keyframes paghera-esce{to{opacity:0}}
@keyframes paghera-entra{from{opacity:0;transform:translateY(14px)}}

/* le fotografie di testata si posano: partono appena piu' vicine e arretrano */
@keyframes paghera-posa{from{transform:scale(1.08)}to{transform:scale(1)}}
.movimento .hero-casa .wp-block-cover__image-background,
.movimento .testata-pagina__sfondo,
.movimento .sezione-hero__sfondo{animation:paghera-posa 2.8s cubic-bezier(.16,1,.3,1) both;transform-origin:50% 62%}

/* il resto della testata segue il titolo */
@keyframes paghera-affiora{from{opacity:0;transform:translateY(10px)}}
.movimento .hero-casa h1 ~ *,.movimento .testata-pagina__titolo ~ *,.movimento .sezione-hero__titolo ~ *{animation:paghera-affiora 1s cubic-bezier(.16,1,.3,1) .55s both}

/* ingresso in scena: il testo sale e si schiarisce */
.movimento .entra{opacity:0;transform:translate3d(0,28px,0)}
.movimento .entra--titolo{transform:translate3d(0,16px,0)}
.movimento .entra.visto{opacity:1;transform:none;
  transition:opacity 1s cubic-bezier(.16,1,.3,1) var(--ritardo,0ms),transform 1.15s cubic-bezier(.16,1,.3,1) var(--ritardo,0ms)}
/* le fotografie invece si svelano dal basso come un sipario, e dentro si posano */
.movimento .entra--foto{transform:none}
.movimento .entra--foto.visto{transition:opacity .7s cubic-bezier(.16,1,.3,1) var(--ritardo,0ms)}
/* il ritaglio va sulla foto, non sulla tessera: Chrome conta il clip-path
   dell'elemento osservato e una tessera ritagliata del tutto non entrerebbe
   mai "in vista" */
.movimento .entra--foto img,.movimento .entra--foto video{clip-path:inset(100% 0 0 0)}
.movimento .entra--foto.visto img,.movimento .entra--foto.visto video{clip-path:inset(0 0 0 0);
  transition:clip-path 1.25s cubic-bezier(.16,1,.3,1) var(--ritardo,0ms),transform 1.9s cubic-bezier(.16,1,.3,1) var(--ritardo,0ms)}
.movimento .entra img{transform:scale(1.08)}
.movimento .entra.visto img{transform:none;transition:transform 1.9s cubic-bezier(.16,1,.3,1) var(--ritardo,0ms)}
/* nel prima e dopo la foto non si ingrandisce: il bordo del taglio deve restare sotto la linea */
.movimento .entra .pd__img{transform:none}

/* il filetto d'ottone sopra le etichette dei numeri si disegna */
.movimento .entra .numeri-fascia__et::before{transform:scaleX(0);transform-origin:0 50%}
.movimento .paghera-rtl .entra .numeri-fascia__et::before{transform-origin:100% 50%}
.movimento .entra.visto .numeri-fascia__et::before{transform:none;transition:transform 1.1s cubic-bezier(.16,1,.3,1) calc(var(--ritardo,0ms) + .35s)}


/* ---------------------------------------------------------------- v4
   Pochi momenti guidati dallo scorrimento, nessuna sezione che trattiene la
   pagina. I valori --s / --p li scrive movimento.js (0 = inizio, 1 = fine). */

/* Testata della home: la foto resta, scende piu' lenta della pagina e si
   avvicina; titolo e testo salgono e sfumano mentre si scorre via. Si usano
   translate/scale separati da transform, che e' gia' della "posa" iniziale. */
.movimento .hero-casa{--s:0}
.movimento .hero-casa .wp-block-cover__image-background{translate:0 calc(var(--s) * 18%);scale:calc(1 + var(--s) * .1)}
.movimento .hero-casa .wp-block-cover__inner-container{translate:0 calc(var(--s) * -70px);opacity:calc(1 - var(--s) * 1.5)}

/* Titoli grandi parola per parola. Se lo script non arriva entro 2,5 s il
   titolo compare comunque: nessun contenuto resta nascosto. */
@keyframes paghera-compare{to{opacity:1}}
.movimento .hero-casa h1:not(.diviso),.movimento .testata-pagina__titolo:not(.diviso),.movimento .sezione-hero__titolo:not(.diviso){opacity:0;animation:paghera-compare .01s 2.5s forwards}
.diviso{opacity:1}
.diviso .parola{display:inline-block;overflow:hidden;vertical-align:top;padding-block:.08em;margin-block:-.08em}
.diviso .parola > span{display:inline-block;animation:paghera-parola 1.15s cubic-bezier(.16,1,.3,1) calc(.12s + var(--i) * 70ms) backwards}
@keyframes paghera-parola{from{transform:translateY(105%)}}

/* Progetto in evidenza: la foto parte incorniciata e si apre a tutto
   riquadro mentre arriva, il testo le scivola accanto. */
.movimento .paghera-evidenza-foto{--p:1;overflow:hidden}
.movimento .paghera-evidenza-foto img{clip-path:inset(calc((1 - var(--p)) * 9%) calc((1 - var(--p)) * 12%));scale:calc(1.14 - var(--p) * .14)}
.movimento .wp-block-column:has(> .paghera-evidenza-foto) + .wp-block-column > *{translate:calc((1 - var(--p)) * 48px) 0;opacity:calc(.15 + var(--p) * 1.2)}
.movimento .paghera-rtl .wp-block-column:has(> .paghera-evidenza-foto) + .wp-block-column > *{translate:calc((1 - var(--p)) * -48px) 0}

/* Hanno scelto Paghera: i nomi scorrono lenti in una fascia continua.
   Si fermano col pulsante, al passaggio del mouse e quando un link ha il fuoco. */
.referenze--scorre .referenze__nastro{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.referenze--scorre .referenze__nomi{flex-wrap:nowrap;width:max-content;animation:paghera-nastro var(--durata,70s) linear infinite}
.referenze--scorre .referenze__nomi li{white-space:nowrap}
.referenze--scorre .referenze__nomi li:last-child::after{content:"·";margin-inline:.55em;color:var(--wp--preset--color--ottone)}
.paghera-rtl .referenze--scorre .referenze__nomi{animation-direction:reverse}
.referenze--scorre:hover .referenze__nomi,.referenze--scorre:focus-within .referenze__nomi,.referenze--ferma .referenze__nomi{animation-play-state:paused}
@keyframes paghera-nastro{to{transform:translateX(-50%)}}
.paghera-rtl .referenze--scorre .referenze__nomi{animation-name:paghera-nastro-rtl}
@keyframes paghera-nastro-rtl{to{transform:translateX(50%)}}
.referenze__testa{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.referenze__pausa{flex:none;display:inline-flex;align-items:center;gap:.5rem;padding:.45rem .9rem;border:1px solid var(--wp--preset--color--linea);border-radius:999px;
  background:transparent;color:var(--wp--preset--color--inchiostro);font:500 .75rem/1 var(--wp--preset--font-family--jost);letter-spacing:.04em;cursor:pointer;transition:border-color .3s,color .3s}
.referenze__pausa:hover{border-color:var(--wp--preset--color--verde);color:var(--wp--preset--color--verde)}
.referenze__pausa:focus-visible{outline:2px solid var(--wp--preset--color--verde);outline-offset:2px}
.referenze__pausa::before{content:"";width:8px;height:9px;border-inline:2px solid currentColor;box-sizing:border-box}
.referenze--ferma .referenze__pausa::before{border:0;border-inline-start:8px solid currentColor;border-block:5px solid transparent;height:10px;width:0}

/* Cursore d'ottone (solo mouse): accompagna quello del sistema, non lo sostituisce */
.cursore-ottone{position:fixed;left:0;top:0;z-index:60;pointer-events:none;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;
  border:1px solid var(--wp--preset--color--ottone);opacity:0;display:flex;align-items:center;justify-content:center;
  transition:width .45s cubic-bezier(.16,1,.3,1),height .45s cubic-bezier(.16,1,.3,1),margin .45s cubic-bezier(.16,1,.3,1),background-color .35s,opacity .3s}
.cursore-ottone.c-visibile{opacity:.9}
.cursore-ottone span{font:500 .6875rem/1 var(--wp--preset--font-family--jost);letter-spacing:.06em;color:#F7F6F1;opacity:0;transition:opacity .25s}
.cursore-ottone.c-etichetta{width:82px;height:82px;margin:-41px 0 0 -41px;background:rgba(21,32,26,.72);border-color:var(--wp--preset--color--ottone-chiaro)}
.cursore-ottone.c-etichetta span{opacity:1}

/* Aree: al passaggio il velo si alleggerisce mentre la foto si avvicina */
.area__velo{transition:opacity .8s cubic-bezier(.16,1,.3,1)}
.area:hover .area__velo,.area:focus-visible .area__velo{opacity:.82}

/* Filo d'ottone in cima: quanto manca alla fine della pagina */
.filo-lettura{position:fixed;inset-inline:0;top:0;z-index:60;height:2px;pointer-events:none;background:var(--wp--preset--color--ottone);
  transform:scaleX(var(--letto,0));transform-origin:0 50%}
.paghera-rtl .filo-lettura{transform-origin:100% 50%}

@media print{.cursore-ottone,.filo-lettura{display:none}.diviso .parola > span,.movimento .hero-casa h1{animation:none!important;opacity:1!important}}

/* i numeri non cambiano larghezza mentre contano */
.numeri-fascia__cifra{font-variant-numeric:tabular-nums}
.conta-voce{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* in stampa tutto e' gia' in scena */
@media print{.movimento .entra,.movimento .entra img,.movimento .entra video,.movimento .hero-casa h1,.movimento .testata-pagina__titolo,.movimento .sezione-hero__titolo{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important;animation:none!important}}