/* =====================================================================
   andreadelia.com — movimento «premium» (13 ott 2026)
   Riferimento: lenis.dev. Nessun cambio di grafica: solo scorrimento
   morbido, titoli che entrano parola per parola, immagini a tendina con
   parallasse interna, intestazione che si nasconde scendendo.
   Tutto si spegne con prefers-reduced-motion.
   ===================================================================== */

html.lenis{scroll-behavior:auto}

/* ---------- Titoli parola per parola ---------- */
.mv-parola{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.mv-parola > span{display:inline-block;transform:translate3d(0,108%,0) rotate(4deg);transform-origin:0 100%;
  transition:transform 1.15s cubic-bezier(.19,1,.22,1);transition-delay:calc(var(--i,0) * 55ms + var(--d,0ms))}
.mv-diviso.mv-in .mv-parola > span{transform:none}
/* il titolo diviso non deve più sfumare tutto insieme: entrano le parole */
.js .mv-diviso[data-reveal]{opacity:1;transform:none}
/* evidenziatore giallo del hero: si stende dopo le parole */
.hero h1 .accent::after{transform:scaleX(0);transform-origin:left;transition:transform 1s cubic-bezier(.19,1,.22,1) .55s}
.hero h1 .mv-in .accent::after{transform:scaleX(1)}

/* ---------- Immagini a tendina ---------- */
.mv-figura{clip-path:inset(100% 0 0 0);transition:clip-path 1.3s cubic-bezier(.77,0,.18,1)}
.mv-figura.mv-in{clip-path:inset(0 0 0 0)}
.js .mv-figura[data-reveal]{opacity:1;transform:none}
.mv-figura img{transform:translate3d(0,var(--py,0px),0) scale(calc(var(--ps,1.1) * var(--hz,1)));
  transition:transform 1.6s cubic-bezier(.19,1,.22,1),filter .6s cubic-bezier(.19,1,.22,1);will-change:transform}
.mv-figura:not(.mv-in) img{--ps:1.28}
.gallery figure.mv-figura:hover img{transform:translate3d(0,var(--py,0px),0) scale(calc(var(--ps,1.1) * 1.03))}
/* mentre scorre la parallasse segue la rotella senza ritardo */
.mv-figura.mv-fermo img{transition:filter .6s}

/* ---------- Linee che si disegnano ---------- */
.mv-linea{position:relative;border-top-color:transparent!important}
.mv-linea::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--line-strong);
  transform:scaleX(0);transform-origin:left;transition:transform 1.4s cubic-bezier(.77,0,.18,1)}
.mv-linea.mv-in::before{transform:scaleX(1)}

/* ---------- Parallasse dei titoli ---------- */
[data-mv-par]{will-change:transform}

/* ---------- Intestazione che si nasconde scendendo ---------- */
.site-head{transition:border-color .4s var(--ease),transform .7s cubic-bezier(.19,1,.22,1)}
.site-head.mv-via{transform:translate3d(0,-100%,0)}

/* ---------- Titoli di servizi e progetti: evidenziatore come «progetti visivi.» ---------- */
/* stessa barra del hero (altezza .34em, poco sopra la base), stesso movimento da sinistra */
.mv-evid{background:linear-gradient(var(--accent),var(--accent)) no-repeat 0 82%/0% .34em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .04em;margin:0 -.04em;
  transition:background-size 1s cubic-bezier(.19,1,.22,1)}
@media (hover:hover){
  .svc:hover .mv-evid,.svc:focus-within .mv-evid,.work:hover .mv-evid,.work:focus-visible .mv-evid{background-size:100% .34em}
}
@media (hover:none){
  .svc.mv-in .mv-evid,.work.mv-in .mv-evid{background-size:100% .34em;transition-delay:.3s}
}

/* ---------- Puntatore: pallino giallo sopra il mouse (PROVA 13 ott 2026) ---------- */
.mv-cursore{position:fixed;left:0;top:0;z-index:1000;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 0 1px var(--ink);pointer-events:none;opacity:0;
  transition:width .45s cubic-bezier(.19,1,.22,1),height .45s cubic-bezier(.19,1,.22,1),margin .45s cubic-bezier(.19,1,.22,1),
    opacity .3s,background-color .3s;will-change:transform}
.mv-cursore.is-vivo{opacity:1}
/* sopra link, card e righe progetto il pallino si allarga in un cerchio */
.mv-cursore.is-sopra{width:44px;height:44px;margin:-22px 0 0 -22px;background:color-mix(in srgb,var(--accent) 55%,transparent)}
.mv-cursore.is-giu{width:8px;height:8px;margin:-4px 0 0 -4px}
@media (hover:hover) and (pointer:fine){
  html.mv-cursore-on,html.mv-cursore-on a,html.mv-cursore-on button,html.mv-cursore-on label{cursor:none}
  html.mv-cursore-on input,html.mv-cursore-on textarea{cursor:text}
}

/* ---------- Etichette sotto il titolo della home: gialle e in grassetto al passaggio ---------- */
/* lo spazio del grassetto è riservato da ::after (invisibile), così le etichette non saltano */
.hero__services span{display:inline-grid;transition:background-color .35s cubic-bezier(.19,1,.22,1),color .35s,border-color .35s,font-weight .2s}
.hero__services span::after{content:attr(data-t);font-weight:700;visibility:hidden;height:0;overflow:hidden;pointer-events:none}
.hero__services span:hover{background:var(--accent);color:var(--ink);border-color:var(--ink);font-weight:700}

@media (prefers-reduced-motion:reduce){
  .mv-parola > span,.mv-figura,.mv-figura img,.mv-linea::before{transition:none!important;transform:none!important;clip-path:none!important}
  .hero h1 .accent::after{transform:none}
  .site-head.mv-via{transform:none}
  .mv-evid{transition:none}
}