/* =====================================================================
   Smarthink — movimento del sito (dalla 2.16)
   Una sola regia per tutte le pagine, sul tema della crescita: le cose salgono, le linee si
   tracciano da sinistra a destra, i numeri contano fino al valore. Ogni blocco entra in ordine
   di lettura (etichetta, titolo, testo, immagini e card), cosi' il concetto arriva subito.
   - Si muovono solo trasparenza, posizione, scala e ritaglio: niente salti di pagina.
   - Le classi m-* le aggiunge assets/js/motion.js; le aperture partono col CSS, senza aspettare lo script.
   - html.m-motion la mette il tema in <head> solo se chi visita non ha chiesto di ridurre le
     animazioni; se motion.js non parte entro 4 secondi la toglie e tutto resta fermo e completo.
   ===================================================================== */
:root{--m-ease:cubic-bezier(.22,1,.36,1);--m-io:cubic-bezier(.65,0,.35,1);--m-pop:cubic-bezier(.34,1.56,.64,1);--m-y:30px}
@media(max-width:700px){:root{--m-y:20px}}

/* ---------- parole dei titoli (il tema le avvolge in .mw > .mwi) ---------- */
.mw{display:inline-block;vertical-align:top}
.mwi{display:inline-block}
html.m-motion .mw{overflow:hidden;padding:.06em 0 .14em;margin:-.06em 0 -.14em}

/* aperture: il titolo sale parola per parola appena si apre la pagina, poi si disegna la linea oro */
html.m-motion :is(.hero,.post-head,.archive-head) h1{animation:none}
html.m-motion :is(.hero,.post-head,.archive-head) h1 .mwi{animation:m-word 1s var(--m-ease) calc(.12s + var(--wi,0) * .05s) both}
html.m-motion :is(.hero,.post-head) h1 .hl{animation:m-hl 1.1s var(--m-ease) calc(.55s + var(--hlw,6) * .05s) both}
@keyframes m-word{from{translate:0 108%}}
@keyframes m-hl{from{background-size:0% .075em}}

/* titoli di sezione: stessa entrata quando arrivano sullo schermo */
html.m-motion .m-t .mwi{translate:0 108%}
html.m-motion .m-t.m-on .mwi{translate:0 0;transition:translate 1s var(--m-ease) calc(var(--md,0s) + var(--wi,0) * .045s)}
html.m-motion .m-t .hl{background-size:0% .075em}
html.m-motion .m-t.m-on .hl{background-size:100% .075em;transition:background-size 1.1s var(--m-ease) calc(var(--md,0s) + .55s)}

/* ---------- etichette: il trattino oro si allunga, poi arriva il testo ---------- */
html.m-motion .m-eb{opacity:0;translate:-12px 0}
html.m-motion .m-eb::before{scale:0 1;transform-origin:0 50%}
html.m-motion .m-eb.m-on{opacity:1;translate:0 0;transition:opacity .7s var(--m-ease) calc(var(--md,0s) + .18s),translate .8s var(--m-ease) calc(var(--md,0s) + .18s)}
html.m-motion .m-eb.m-on::before{scale:1 1;transition:scale .6s var(--m-ease) var(--md,0s)}
html.m-motion .hero .eyebrow,html.m-motion .post-head .wp-block-post-terms{animation:m-eb .8s var(--m-ease) .05s both}
html.m-motion .hero .eyebrow::before{transform-origin:0 50%;animation:m-dash .6s var(--m-ease) both}
@keyframes m-eb{from{opacity:0;translate:-12px 0}}
@keyframes m-dash{from{scale:0 1}}

/* ---------- testi, card, gruppi: entrano dal basso, uno dopo l'altro ---------- */
html.m-motion .m-o{opacity:0;translate:0 var(--m-y)}
html.m-motion .m-o.m-on{opacity:1;translate:0 0;transition:opacity .8s var(--m-ease) var(--md,0s),translate 1s var(--m-ease) var(--md,0s)}
/* card scure su fondo scuro: un filo di scala in piu', arrivano come schede */
html.m-motion .m-o.m-z{scale:.96}
html.m-motion .m-o.m-z.m-on{scale:1;transition:opacity .8s var(--m-ease) var(--md,0s),translate 1s var(--m-ease) var(--md,0s),scale 1s var(--m-ease) var(--md,0s)}

/* ---------- foto: si scoprono dal basso e si assestano ---------- */
html.m-motion .m-img{clip-path:inset(100% 0 0 0 round var(--mr,24px))}
html.m-motion .m-img img{scale:calc(var(--ps,1) * 1.16)}
html.m-motion .m-img.m-on{clip-path:inset(0 0 0 0 round var(--mr,24px));transition:clip-path 1.2s var(--m-io) var(--md,0s)}
html.m-motion .m-img.m-on img{scale:var(--ps,1);transition:scale 1.6s var(--m-ease) var(--md,0s)}
/* da computer le foto scorrono appena piu' lente della pagina (motion.js aggiorna translate) */
html.m-motion .m-par img{--ps:1.1;scale:var(--ps);will-change:translate}

/* ---------- icone che si disegnano ---------- */
html.m-motion svg.m-ic :is(path,circle,rect,line,polyline){stroke-dasharray:1;stroke-dashoffset:1}
html.m-motion svg.m-ic.m-draw :is(path,circle,rect,line,polyline){stroke-dashoffset:0;transition:stroke-dashoffset 1.1s var(--m-io) calc(var(--md,0s) + var(--pi,0) * .12s)}

/* ---------- linee che si tracciano ---------- */
/* numeri della Home: il filo sopra i numeri si disegna da sinistra */
html.m-motion .pr-nums.m-ln{position:relative;border-image:none;border-top-color:transparent}
html.m-motion .pr-nums.m-ln::before{content:"";position:absolute;left:0;right:0;top:-2px;height:2px;background:linear-gradient(90deg,var(--line),var(--teal) 55%,var(--gold));transform-origin:0 50%;scale:0 1}
html.m-motion .pr-nums.m-ln.m-on::before{scale:1 1;transition:scale 1.4s var(--m-io) .1s}
/* fasi del progetto (Servizi): la linea avanza e i punti si accendono uno alla volta */
html.m-motion .pline.m-ln::before{transform-origin:0 50%;scale:0 1}
html.m-motion .pline.m-ln.m-on::before{scale:1 1;transition:scale 1.6s var(--m-io) .2s}
html.m-motion .pline.m-ln>div::before{scale:0}
html.m-motion .pline.m-ln.m-on>div::before{scale:1;transition:scale .5s var(--m-pop) calc(.35s + var(--k,0) * .4s)}
html.m-motion .pline.m-ln>div>*{opacity:0;translate:0 12px}
html.m-motion .pline.m-ln.m-on>div>*{opacity:1;translate:0 0;transition:opacity .7s var(--m-ease) calc(.45s + var(--k,0) * .4s),translate .8s var(--m-ease) calc(.45s + var(--k,0) * .4s)}
/* gli elenchi con il filo (passi, recapiti, domande): il filo si allunga mentre arrivano */
/* report di visibilita' (Siti web, SEO e GEO): le barre si riempiono una dopo l'altra */
html.m-motion .vrep-r.m-ln i::after{scale:0 1}
html.m-motion .vrep-r.m-ln.m-on i::after{scale:1 1;transition:scale 1.2s var(--m-io) calc(.3s + var(--k,0) * .15s)}
/* sito comprato una volta / in abbonamento (Siti web, 2.25): prima i passi del sito che resta fermo,
   poi quelli del sito che cresce; l'ultimo, quello oro, arriva con un piccolo rimbalzo */
.flow li:nth-child(2){--k:1}
.flow li:nth-child(3){--k:2}
.flow li:nth-child(4){--k:3}
.flow-row.new li:nth-child(1){--k:4}
.flow-row.new li:nth-child(2){--k:5}
.flow-row.new li:nth-child(3){--k:6}
.flow-row.new li:nth-child(4){--k:7}
html.m-motion .flow.m-o li{opacity:0;translate:0 10px}
html.m-motion .flow.m-o.m-on li{opacity:1;translate:0 0;transition:opacity .5s var(--m-ease) calc(var(--md,0s) + .3s + var(--k,0) * .1s),translate .6s var(--m-ease) calc(var(--md,0s) + .3s + var(--k,0) * .1s)}
html.m-motion .flow.m-o li.ok{scale:.8}
html.m-motion .flow.m-o.m-on li.ok{scale:1;transition:opacity .5s var(--m-ease) calc(var(--md,0s) + 1s),translate .6s var(--m-ease) calc(var(--md,0s) + 1s),scale .6s cubic-bezier(.34,1.56,.64,1) calc(var(--md,0s) + 1s)}
/* le regole su cosa resta tuo (Siti web, 2.25): una alla volta, l'icona arriva con un rimbalzo */
.own li:nth-child(2){--k:1}
.own li:nth-child(3){--k:2}
html.m-motion .own.m-o li{opacity:0;translate:0 14px}
html.m-motion .own.m-o.m-on li{opacity:1;translate:0 0;transition:opacity .6s var(--m-ease) calc(var(--md,0s) + .35s + var(--k,0) * .15s),translate .8s var(--m-ease) calc(var(--md,0s) + .35s + var(--k,0) * .15s)}
html.m-motion .own.m-o .own-i{scale:.6}
html.m-motion .own.m-o.m-on .own-i{scale:1;transition:scale .6s cubic-bezier(.34,1.56,.64,1) calc(var(--md,0s) + .45s + var(--k,0) * .15s)}
/* tre siti su misura (Siti web, 2.25): prima la finestra, poi l'etichetta */
html.m-motion .mk.m-o .mk-chip{opacity:0;scale:.6}
html.m-motion .mk.m-o.m-on .mk-chip{opacity:1;scale:1;transition:opacity .35s ease calc(var(--md,0s) + .8s),scale .6s cubic-bezier(.34,1.56,.64,1) calc(var(--md,0s) + .8s)}

/* conto del costo massimo per cliente (Google Ads e Meta Ads, 2.18): le due parti del margine si riempiono */
html.m-motion .calc-bar.m-ln i{scale:0 1}
html.m-motion .calc-bar.m-ln.m-on i{scale:1 1;transition:scale .9s var(--m-io) calc(.45s + var(--k,0) * .25s)}
.calc-bar .b{--k:1}
/* regole del neuromarketing (Comunicazione, 2.18): il filo colorato si allunga sopra ognuna */
html.m-motion .prin li.m-o::after{scale:0 1}
html.m-motion .prin li.m-o.m-on::after{scale:1 1;transition:scale 1s var(--m-io) calc(var(--md,0s) + .1s)}
/* la squadra (Comunicazione, 2.18): i volti arrivano con un piccolo rimbalzo */
html.m-motion .crew li.m-o img{scale:.72}
html.m-motion .crew li.m-o.m-on img{scale:1;transition:scale .8s var(--m-pop) calc(var(--md,0s) + .1s)}

/* ---------- citazioni: le parole si accendono mentre scorri ---------- */
.m-q .mq{transition:opacity .35s ease,color .35s ease}
html.m-motion .m-q .mq{opacity:.16}
html.m-motion .m-q .mq.on{opacity:1}

/* ---------- etichette e card nelle foto dei settori ---------- */
html.m-motion .m-ov{opacity:0;translate:28px 0}
html.m-motion .m-ov.m-on{opacity:1;translate:0 0;transition:opacity .8s var(--m-ease) var(--md,.6s),translate 1s var(--m-ease) var(--md,.6s)}
html.m-motion .m-pp{opacity:0;scale:.4}
html.m-motion .m-pp.m-on{opacity:1;scale:1;transition:opacity .4s ease var(--md,1s),scale .7s var(--m-pop) var(--md,1s)}

/* ---------- aperture senza scena: schede, foto e bottoni entrano dopo il titolo ---------- */
/* dalla 2.20 il testo d'apertura e le foto grandi si vedono dal primo istante (il testo sale appena, la foto
   si assesta): sono gli elementi piu' grandi della prima schermata e Google misura quando compaiono (LCP) */
html.m-motion .hero .lead{animation:m-rise .9s var(--m-ease) .1s both}
html.m-motion .hero .btn-row{animation:m-up .9s var(--m-ease) .66s both}
/* landing (2.18): la riga della prova sotto il bottone, poi i volti della squadra uno dopo l'altro */
html.m-motion .hero .lp-trust{animation:m-up .9s var(--m-ease) .95s both}
html.m-motion .hero .lp-faces img{animation:m-chip .6s var(--m-pop) calc(1.05s + var(--k,0) * .07s) both}
.lp-faces img:nth-child(2){--k:1}
.lp-faces img:nth-child(3){--k:2}
.lp-faces img:nth-child(4){--k:3}
.lp-faces img:nth-child(5){--k:4}
.lp-faces img:nth-child(6){--k:5}
html.m-motion .hero :is(.crumbs,.lp-check li,.faq-nav a,.call-list li,.call-quote,.call-alt,.check li){animation:m-up .8s var(--m-ease) calc(.75s + var(--k,0) * .07s) both}
html.m-motion .hero .hpanel:not([data-scene])>*{animation:m-card 1s var(--m-ease) calc(.55s + var(--k,0) * .14s) both}
html.m-motion .hero .hpanel:not([data-scene])>.hchip{animation:m-chip .8s var(--m-pop) calc(.9s + var(--k,0) * .14s) both}
html.m-motion .hero .hphoto:not([data-scene])>.ph img{animation:m-settle 1.8s var(--m-ease) both}
html.m-motion .hero .hphoto:not([data-scene])>.fcard{animation:m-card 1s var(--m-ease) .95s both}
html.m-motion .hero .hphoto:not([data-scene])>.hchip{animation:m-chip .8s var(--m-pop) 1.25s both}
html.m-motion .hero :is(.call-card,.form-card){animation:m-card 1.1s var(--m-ease) .45s both}
html.m-motion .ris-hero .feat{animation:m-rise-card 1.1s var(--m-ease) .2s both}
html.m-motion .ris-hero .feat .wp-block-post-featured-image img{animation:m-settle 1.6s var(--m-ease) .2s both}
html.m-motion .post-head :is(.post-lead,.wp-block-post-excerpt){animation:m-rise .9s var(--m-ease) .1s both}
html.m-motion .post-head :is(.wp-block-post-date,.post-by){animation:m-up .9s var(--m-ease) .65s both}
html.m-motion .post-wrap>.wp-block-post-featured-image img{animation:m-settle 1.6s var(--m-ease) both}
html.m-motion .hero :is(.lp-check,.faq-nav,.call-list,.check,.hpanel)>:nth-child(2){--k:1}
html.m-motion .hero :is(.lp-check,.faq-nav,.call-list,.check,.hpanel)>:nth-child(3){--k:2}
html.m-motion .hero :is(.lp-check,.faq-nav,.call-list,.check,.hpanel)>:nth-child(4){--k:3}
html.m-motion .hero :is(.lp-check,.faq-nav,.call-list,.check,.hpanel)>:nth-child(5){--k:4}
html.m-motion .hero :is(.lp-check,.faq-nav,.call-list,.check,.hpanel)>:nth-child(6){--k:5}
html.m-motion .hero :is(.lp-check,.faq-nav,.call-list,.check,.hpanel)>:nth-child(7){--k:6}
html.m-motion .hero :is(.lp-check,.faq-nav,.call-list,.check,.hpanel)>:nth-child(8){--k:7}
@keyframes m-up{from{opacity:0;translate:0 22px}}
@keyframes m-rise{from{translate:0 18px}}
@keyframes m-rise-card{from{translate:0 30px;scale:.98}}
@keyframes m-card{from{opacity:0;translate:0 34px;scale:.97}}
@keyframes m-chip{from{opacity:0;scale:.4}}
@keyframes m-reveal{from{clip-path:inset(100% 0 0 0 round var(--mr,24px))}to{clip-path:inset(0 0 0 0 round var(--mr,24px))}}
@keyframes m-settle{from{scale:1.18}}

/* ---------- al passaggio del mouse: cio' che si clicca risponde ---------- */
@media (hover:hover) and (pointer:fine){
  :is(.dcard,.csc,.post-card,a.sec-card,a.card,.feat-card,.csx,.tm-join,.sel-i){transition:translate .55s var(--m-ease),box-shadow .55s var(--m-ease),border-color .3s ease,background .3s ease}
  :is(.dcard,.csc,.post-card,a.sec-card,a.card,.feat-card,.tm-join,.sel-i):hover{translate:0 -6px;box-shadow:0 26px 50px rgba(16,51,59,.16)}
  .sec-dark :is(a.card,.feat-card):hover,.hero .sel-i:hover{box-shadow:0 26px 50px rgba(0,0,0,.35)}
  :is(.dcard,.csc) .ph,.csc .res-ph img,.post-card .wp-block-post-featured-image img,.feat-card .wp-block-post-featured-image img{transition:scale .9s var(--m-ease)}
  .csc:hover .res-ph img,.post-card:hover .wp-block-post-featured-image img,.feat-card:hover .wp-block-post-featured-image img{scale:1.06}
  .dcard:hover .ph{scale:1.02}
  .tm{transition:translate .55s var(--m-ease)}
  .tm:hover .avatar,.tm:hover>img{scale:1.04}
  .tm .avatar,.tm>img{transition:scale .7s var(--m-ease)}
  .val li:hover{translate:0 -4px}
  .val li{transition:translate .5s var(--m-ease),background .3s,border-color .3s}
}
/* la freccia dei link si sposta appena, come un invito a proseguire */
.arr{display:inline-block;transition:translate .45s var(--m-ease)}
:is(a,button,.dcard,.csc,.sel-i,.tm-join):hover .arr,a:focus-visible .arr{translate:5px 0}
:is(a,button):hover .arr.ne{translate:3px -3px}
/* bottone principale: un riflesso passa sopra al passaggio del mouse */
.btn-p{position:relative;overflow:hidden;isolation:isolate}
.btn-p::after{content:"";position:absolute;inset:-2px;z-index:-1;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.6) 50%,transparent 65%);translate:-110% 0;pointer-events:none}
@media (hover:hover){.btn-p:hover::after{translate:110% 0;transition:translate .85s var(--m-ease)}}

/* ---------- domande frequenti: si aprono con un movimento morbido ---------- */
.faq-list details>.fx{overflow:hidden}
.faq-list summary::after{transition:transform .45s var(--m-ease)}

/* ---------- articoli: barra di lettura ---------- */
.m-read{position:fixed;left:0;top:0;z-index:1001;width:100%;height:3px;background:linear-gradient(90deg,var(--teal),var(--gold));transform-origin:0 50%;scale:var(--p,0) 1;pointer-events:none}

/* ---------- passaggio tra le pagine (browser che lo supportano) ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:m-vt-out .28s var(--m-ease) both}
::view-transition-new(root){animation:m-vt-in .5s var(--m-ease) both}
@keyframes m-vt-out{to{opacity:0}}
@keyframes m-vt-in{from{opacity:0;translate:0 14px}}

/* ---------- animazioni ridotte: tutto fermo e completo ---------- */
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  .arr,.btn-p::after{transition:none}
}
@media print{
  html.m-motion :is(.m-o,.m-eb,.m-ov,.m-pp,.mwi,.mq,.pline>div>*){opacity:1!important;translate:none!important;scale:none!important}
  html.m-motion :is(.m-img,.m-img img){clip-path:none!important;scale:none!important}
  html.m-motion svg.m-ic :is(path,circle,rect,line,polyline){stroke-dashoffset:0!important}
  html.m-motion .pr-nums.m-ln::before,html.m-motion .pline.m-ln::before,html.m-motion .pline.m-ln>div::before,html.m-motion .vrep-r.m-ln i::after,html.m-motion .calc-bar.m-ln i,html.m-motion .prin li::after,html.m-motion .crew img{scale:none!important}
  html.m-motion .hero :is(.lp-trust,.lp-faces img){animation:none!important}
  html.m-motion :is(.flow li,.own li,.own-i,.mk-chip){opacity:1!important;translate:none!important;scale:none!important}
  html.m-motion .hl{background-size:100% .075em!important}
}

/* Home: la linea oro sotto "Il tuo reparto marketing esterno" si disegna dopo le parole, non prima
   (dalla 2.20 col CSS, insieme all'entrata del titolo) */
html.m-motion.h-motion .h2 .h-anim .h2-split .hl{animation:m-hl 1.2s var(--m-ease) .95s both}

/* 2.21 — mappa del Salento (pagina Agenzia di marketing a Lecce): la card entra, poi i puntini,
   l'ufficio e i paesi dei clienti. L'anello dell'ufficio pulsa tre volte e si ferma. */
html.m-motion .hero .lmap{animation:m-card 1.1s var(--m-ease) .45s both}
html.m-motion .hero .lmap .lm-land{animation:lm-in 1.2s ease .7s both}
html.m-motion .hero .lmap .lm-home{animation:lm-pop .7s var(--m-ease) 1.05s both}
html.m-motion .hero .lmap .lm-pin{animation:lm-pop .6s var(--m-ease) calc(1.3s + var(--i,0) * .12s) both}
html.m-motion .hero .lmap .lm-ring{transform-box:fill-box;transform-origin:50% 50%;animation:lm-ring 2.2s ease-out 2.4s 3}
@keyframes lm-in{from{opacity:0}}
@keyframes lm-pop{from{opacity:0;transform:translateY(5px)}}
@keyframes lm-ring{0%{transform:scale(1);opacity:.8}55%{transform:scale(1.9);opacity:0}56%{transform:scale(.7);opacity:0}100%{transform:scale(1);opacity:.8}}