/* ---- movimento ---- */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.28s}
.testata{view-transition-name:testata}

/* testata che si compatta */
.testata,.testata .wrap{transition:min-height .25s ease,box-shadow .25s ease}
.testata.scorrendo{box-shadow:0 6px 24px rgba(15,34,87,.10)}
.testata.scorrendo .wrap{min-height:62px}
.marchio__segno svg{transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.marchio:hover .marchio__segno svg{transform:rotate(90deg)}

/* menu mobile che scende */
@media (max-width:1020px){
  .menu{display:flex;visibility:hidden;opacity:0;transform:translateY(-10px);transition:opacity .22s ease,transform .22s ease,visibility 0s .22s;box-shadow:0 16px 30px rgba(15,34,87,.12)}
  .menu.aperto{visibility:visible;opacity:1;transform:none;transition:opacity .22s ease,transform .22s ease}
}

/* bottoni */
.bottone{transition:transform .18s ease,background-color .18s ease,box-shadow .18s ease,color .18s ease}
.bottone:hover{transform:translateY(-2px)}
.bottone:active{transform:translateY(0) scale(.97)}
.bottone--giallo:hover{box-shadow:0 8px 20px rgba(246,194,28,.35)}
.bottone--blu:hover{box-shadow:0 8px 20px rgba(27,58,140,.28)}
.importo,.frequenza button,.filtro,.copia button{transition:background-color .18s ease,border-color .18s ease,color .18s ease,transform .15s ease}
.importo:active,.frequenza button:active,.filtro:active,.copia button:active{transform:scale(.95)}

/* schede */
.scheda{transition:border-color .2s ease,transform .25s ease,box-shadow .25s ease}
.scheda:hover{transform:translateY(-6px);box-shadow:0 18px 36px rgba(15,34,87,.12)}
.scheda .foto>*,.scheda .foto{transition:transform .5s ease}
.scheda:hover .foto{transform:scale(1.04)}
.scheda h3{transition:color .2s ease}
.scheda:hover h3{color:var(--blu)}
.servizio a,.scorciatoie a,.promemoria a{background:linear-gradient(var(--giallo),var(--giallo)) 0 100%/0 3px no-repeat;transition:background-size .3s ease;text-decoration:none;padding-bottom:2px}
.servizio a:hover,.scorciatoie a:hover,.promemoria a:hover{background-size:100% 3px}

/* apertura della home: un solo momento orchestrato */
@keyframes sale{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes croce{0%{opacity:0;transform:rotate(-135deg) scale(.2)}70%{opacity:1;transform:rotate(8deg) scale(1.08)}100%{opacity:1;transform:rotate(0) scale(1)}}
@keyframes foto{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
.effetti .eroe h1{animation:sale .8s cubic-bezier(.2,.7,.2,1) both}
.effetti .eroe .lead{animation:sale .8s .12s cubic-bezier(.2,.7,.2,1) both}
.effetti .eroe .azioni{animation:sale .8s .24s cubic-bezier(.2,.7,.2,1) both}
.effetti .eroe .scorciatoie{animation:sale .8s .36s cubic-bezier(.2,.7,.2,1) both}
.effetti .eroe__foto .foto{animation:foto .9s .1s cubic-bezier(.2,.7,.2,1) both}
.effetti .eroe__croce{animation:croce 1.1s .45s cubic-bezier(.2,.7,.2,1) both}
.eroe__croce path{transform-origin:50% 50%;transform:rotate(var(--giro,0deg));transition:transform .2s linear}
.effetti .testata-pagina h1{animation:sale .7s cubic-bezier(.2,.7,.2,1) both}
.effetti .testata-pagina .lead,.effetti .testata-pagina .azioni{animation:sale .7s .1s cubic-bezier(.2,.7,.2,1) both}

/* comparsa allo scorrimento */
.effetti .rivela{opacity:0;transform:translateY(22px);transition:opacity .7s ease var(--ritardo,0ms),transform .7s cubic-bezier(.2,.7,.2,1) var(--ritardo,0ms)}
.effetti .rivela.visto{opacity:1;transform:none}
.effetti .scheda.rivela.visto:hover{transform:translateY(-6px)}

/* linea del tempo che si disegna */
.effetti .tempo{border-left-color:transparent;position:relative}
.effetti .tempo::before{content:"";position:absolute;left:-3px;top:0;bottom:0;width:3px;background:var(--giallo);transform-origin:top;transform:scaleY(0);transition:transform 1.6s cubic-bezier(.4,0,.2,1)}
.effetti .tempo:has(li.visto)::before{transform:scaleY(1)}
.effetti .tempo li::before{transform:scale(0);transition:transform .45s cubic-bezier(.3,1.6,.5,1) calc(var(--ritardo,0ms) + 200ms)}
.effetti .tempo li.visto::before{transform:scale(1)}

/* esito dei moduli */
@keyframes conferma{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.esito{animation:conferma .45s cubic-bezier(.2,.7,.2,1) both}

/* scheletri più morbidi */
.scheletro{animation-duration:1.8s}

@media print{.effetti .rivela{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  .bottone:hover,.scheda:hover,.scheda:hover .foto{transform:none}
}
.marchio__segno{transition:height .25s ease}
.marchio__segno img{transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.marchio:hover .marchio__segno img{transform:rotate(-6deg) scale(1.06)}

.effetti .gruppo__foto picture{display:block;animation:sale .9s .15s cubic-bezier(.2,.7,.2,1) both}
.effetti .gruppo__foto figcaption{animation:sale .7s .5s cubic-bezier(.2,.7,.2,1) both}