/* =====================================================================
   MakeItWeb – Oro Chiaro · Motion (02/11/2026)
   Animazioni morbide di comparsa, scroll vellutato, parallax leggero,
   luce sui pannelli navy, riflesso sul lingotto, dissolvenza tra pagine.
   Attive solo dove l'head mette la classe html.miw-anim (vedi motion.php).
   Le animazioni hanno solo lo stato di partenza (fill backwards): finite,
   l'elemento torna ai suoi stili e agli hover di site.css.
   ===================================================================== */

:root{
  --mo-ease:cubic-bezier(.22,1,.36,1);
  --mo-ease-io:cubic-bezier(.65,0,.35,1);
  --mo-dist:16px;
  --mo-dur:.8s;
}
@media (max-width:767px){:root{--mo-dist:12px;--mo-dur:.7s}}

/* ---------- Dissolvenza tra le pagine (View Transitions, Chrome/Edge/Safari) ---------- */
/* 05/11: dissolvenza tra le pagine solo da computer */
@media (prefers-reduced-motion:no-preference) and (hover:hover) and (pointer:fine) and (min-width:1024px){
  @view-transition{navigation:auto}
  ::view-transition-old(root){animation:moVtOut .26s cubic-bezier(.4,0,1,1) both}
  ::view-transition-new(root){animation:moVtIn .5s var(--mo-ease) both}
  #masthead{view-transition-name:miw-hdr}
  ::view-transition-group(miw-hdr){animation-duration:.35s}
}
@keyframes moVtOut{to{opacity:0}}
@keyframes moVtIn{from{opacity:0}}

/* ---------- Scroll vellutato (Lenis) ---------- */
html.lenis,html.lenis body{height:auto}
html.lenis{scroll-behavior:auto!important}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent],.lenis [data-lenis-prevent-wheel],.lenis [data-lenis-prevent-touch]{overscroll-behavior:contain}
.lenis.lenis-smooth iframe{pointer-events:none}
.lenis.lenis-smooth:not(.lenis-scrolling) iframe{pointer-events:auto}

/* ---------- Stato iniziale: prima che il JS prepari la pagina il primo blocco resta nascosto ---------- */
html.miw-anim:not(.mo-ready) [data-elementor-type="wp-page"] > :first-child{visibility:hidden}

/* elementi in attesa di comparire */
html.miw-anim [data-mo]:not([data-mo="words"]):not(.mo-in){opacity:0}
html.miw-anim [data-mo="words"]:not(.mo-in) .mo-wi{translate:0 110%}

/* ---------- Comparse ---------- */
html.miw-anim [data-mo].mo-in{animation:var(--mo-a,moUp) var(--mo-dur) var(--mo-ease) var(--d,0ms) backwards}
html.miw-anim [data-mo="up"]{--mo-a:moUp}
html.miw-anim [data-mo="fade"]{--mo-a:moFade}
html.miw-anim [data-mo="card"]{--mo-a:moCard;--mo-dur:.9s}
html.miw-anim [data-mo="panel"]{--mo-a:moPanel;--mo-dur:1s}
html.miw-anim [data-mo="band"]{--mo-a:moFade;--mo-dur:1.4s}
html.miw-anim [data-mo="panel-r"]{--mo-a:moPanelR;--mo-dur:1.1s}
html.miw-anim [data-mo="eyebrow"]{--mo-a:moFadeX;--mo-dur:.9s}
html.miw-anim [data-mo="words"].mo-in{animation:none}

@keyframes moUp{from{opacity:0;translate:0 var(--mo-dist)}}
@keyframes moFade{from{opacity:0}}
@keyframes moFadeX{from{opacity:0;translate:-10px 0}}
@keyframes moCard{from{opacity:0;translate:0 calc(var(--mo-dist) * 1.25);scale:.992}}
@keyframes moPanel{from{opacity:0;translate:0 calc(var(--mo-dist) * 1.25)}}
@keyframes moPanelR{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}

/* titoli: le parole salgono da una maschera, una dopo l'altra */
html.miw-anim .mo-w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .04em .14em;margin:0 -.04em -.14em}
html.miw-anim .mo-wi{display:inline-block}
html.miw-anim [data-mo="words"].mo-in .mo-wi{animation:moWord 1.05s var(--mo-ease) calc(var(--d,0ms) + var(--i,0) * 38ms) backwards}
@keyframes moWord{from{translate:0 110%;opacity:0}}

/* occhiello: la lineetta d'oro si disegna */
html.miw-anim [data-mo="eyebrow"] > span[aria-hidden]{transform-origin:left center}
html.miw-anim [data-mo="eyebrow"].mo-in > span[aria-hidden]{animation:moLine .9s var(--mo-ease) calc(var(--d,0ms) + 120ms) backwards}
html.miw-anim [data-mo="eyebrow"].mo-in > span[aria-hidden]:last-child:not(:first-child){transform-origin:right center}
@keyframes moLine{from{scale:0 1}}

/* foto dentro le card: arrivano leggermente ingrandite e si assestano */
html.miw-anim .mo-in .mo-z{animation:moZoom 1.4s var(--mo-ease) var(--d,0ms) backwards}
@keyframes moZoom{from{scale:calc(var(--mo-s,1) * 1.06)}}

/* parallax leggero delle foto (solo desktop, guidato dal JS) */
html.miw-anim .mo-plx{--mo-s:1.09;scale:var(--mo-s);translate:0 var(--mo-py,0px)}

/* ---------- Luce morbida che segue il mouse sui pannelli navy ---------- */
html.miw-anim .mo-spot-host{isolation:isolate}
html.miw-anim .mo-spot{position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .8s var(--mo-ease);
  background:radial-gradient(520px circle at var(--mx,50%) var(--my,50%),rgba(220,172,87,.13),rgba(220,172,87,.04) 40%,transparent 70%)}
html.miw-anim .mo-spot-host.mo-spot-on > .mo-spot{opacity:1}

/* ---------- Riflesso di luce sul lingotto ---------- */
html.miw-anim .mo-sheen{position:absolute;pointer-events:none;z-index:2;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  background:linear-gradient(100deg,rgba(255,255,255,0) 40%,rgba(255,248,228,.85) 50%,rgba(255,255,255,0) 60%) no-repeat;
  background-size:260% 100%;background-position:130% 0;mix-blend-mode:screen;opacity:.9}
html.miw-anim .mo-sheen.is-run{animation:moSheen 1.9s var(--mo-ease-io) both}
@keyframes moSheen{from{background-position:130% 0}to{background-position:-30% 0}}

/* ---------- Numeri che contano ---------- */
html.miw-anim .mo-count{font-variant-numeric:tabular-nums}

/* ---------- Carosello recensioni: bordi che sfumano ---------- */
@media (min-width:768px){
  html.miw-anim .miw-carlist{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 56px,#000 calc(100% - 56px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 56px,#000 calc(100% - 56px),transparent 100%)}
}

/* ---------- Header: entrata morbida solo alla prima pagina della visita ---------- */
html.miw-anim.mo-first #masthead{animation:moDown 1s var(--mo-ease) .05s backwards}
@keyframes moDown{from{opacity:0;translate:0 -14px}}

@media (prefers-reduced-motion:reduce){
  html.miw-anim [data-mo],html.miw-anim .mo-wi,html.miw-anim .mo-z{animation:none!important;opacity:1!important;translate:none!important}
  .mo-spot,.mo-sheen{display:none!important}
}

/* banda video: con il parallax il video è un po' più grande del riquadro */
html.miw-anim .miw-cine-v.mo-plx{--mo-s:1.12}

/* ---------- foto: compaiono morbide quando finiscono di caricare ---------- */
html.miw-anim img.mo-img-wait{opacity:0}
html.miw-anim img.mo-img-in{animation:moFade .8s var(--mo-ease) backwards}
html.miw-anim .mo-in img.mo-z.mo-img-in{animation:moZoom 1.4s var(--mo-ease) backwards,moFade .8s var(--mo-ease) backwards}

/* ---------- stelle che si accendono ---------- */
html.miw-anim .mo-star{display:inline-block}
html.miw-anim .mo-stars:not(.mo-stars-in) .mo-star{opacity:.18}
html.miw-anim .mo-stars-in .mo-star{animation:moStar .7s var(--mo-ease) calc(120ms + var(--i,0) * 90ms) backwards}
@keyframes moStar{from{opacity:.18;scale:.55}}

/* ---------- modulo: sottolineatura d'oro sul campo attivo ---------- */
html.miw-anim .wpcf7 .wpcf7-form-control-wrap{position:relative;display:block}
html.miw-anim .wpcf7 .wpcf7-form-control-wrap::after{content:"";position:absolute;left:14px;right:14px;bottom:0;height:2px;border-radius:2px;background:#DCAC57;scale:0 1;transition:scale .55s var(--mo-ease);pointer-events:none}
html.miw-anim .wpcf7 .wpcf7-form-control-wrap:focus-within::after{scale:1 1}
html.miw-anim .wpcf7 .wpcf7-form-control-wrap:has(input[type=checkbox],input[type=radio],.wpcf7-not-valid-tip)::after{display:none}

/* ---------- modulo: conferma d'invio ---------- */
html.miw-anim .mo-sent{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:32px;border-radius:inherit;opacity:0;transition:opacity .45s var(--mo-ease)}
html.miw-anim .mo-sent.is-in{opacity:1}
html.miw-anim .mo-sent-ico{width:64px;height:64px;fill:none;stroke:#DCAC57;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
html.miw-anim .mo-sent-ico circle{stroke-dasharray:151;stroke-dashoffset:151}
html.miw-anim .mo-sent-ico path{stroke-dasharray:34;stroke-dashoffset:34}
html.miw-anim .mo-sent.is-in .mo-sent-ico circle{animation:moDraw .9s var(--mo-ease) .15s forwards}
html.miw-anim .mo-sent.is-in .mo-sent-ico path{animation:moDraw .5s var(--mo-ease) .8s forwards}
@keyframes moDraw{to{stroke-dashoffset:0}}
html.miw-anim .mo-sent-t{margin:22px 0 0;font-size:24px;font-weight:700;letter-spacing:-.01em;color:#16254A;outline:none}
html.miw-anim .mo-sent-m{margin:10px 0 0;max-width:36ch;font-size:16px;line-height:1.6;color:#4A5468}
html.miw-anim .mo-sent-b{margin-top:22px;background:none;border:0;padding:0;font:inherit;font-size:15px;font-weight:700;color:#16254A;text-decoration:underline;text-decoration-color:#DCAC57;text-underline-offset:5px;cursor:pointer}
html.miw-anim .mo-sent-t,html.miw-anim .mo-sent-m,html.miw-anim .mo-sent-b{opacity:0;translate:0 8px;transition:opacity .6s var(--mo-ease),translate .6s var(--mo-ease)}
html.miw-anim .mo-sent.is-in .mo-sent-t{opacity:1;translate:0 0;transition-delay:.9s}
html.miw-anim .mo-sent.is-in .mo-sent-m{opacity:1;translate:0 0;transition-delay:1s}
html.miw-anim .mo-sent.is-in .mo-sent-b{opacity:1;translate:0 0;transition-delay:1.1s}

/* ---------- quotazioni vive ---------- */
html.miw-anim .mo-dg{display:inline-block}
html.miw-anim .mo-q-up,html.miw-anim .mo-q-down{border-radius:4px}
html.miw-anim .mo-q-up{animation:moQUp 1.7s ease-out}
html.miw-anim .mo-q-down{animation:moQDown 1.7s ease-out}
@keyframes moQUp{from{background-color:rgba(31,122,77,.18);box-shadow:0 0 0 3px rgba(31,122,77,.18)}to{background-color:transparent;box-shadow:0 0 0 3px transparent}}
@keyframes moQDown{from{background-color:rgba(179,38,30,.15);box-shadow:0 0 0 3px rgba(179,38,30,.15)}to{background-color:transparent;box-shadow:0 0 0 3px transparent}}
html.miw-anim .mo-q-up .mo-dg{animation:moDgUp .55s var(--mo-ease) calc(var(--k,0) * 45ms) backwards}
html.miw-anim .mo-q-down .mo-dg{animation:moDgDown .55s var(--mo-ease) calc(var(--k,0) * 45ms) backwards}
@keyframes moDgUp{from{opacity:0;translate:0 .65em}}
@keyframes moDgDown{from{opacity:0;translate:0 -.65em}}
@media (prefers-reduced-motion:reduce){.mo-sent *{transition:none!important;animation:none!important;opacity:1!important;translate:none!important;stroke-dashoffset:0!important}}
/* ---------- shop: pezzi che ricompaiono dopo filtro o ordinamento ---------- */

@keyframes moSg{from{opacity:0;translate:0 10px}}

/* ---------- finestra di ricerca: si apre morbida ---------- */
html.miw-anim #miw-cerca:not([hidden]){animation:moFade .3s ease backwards}
html.miw-anim #miw-cerca:not([hidden]) .miw-cerca-box{animation:moDrop .5s var(--mo-ease) .05s backwards}
@keyframes moDrop{from{opacity:0;translate:0 -14px;scale:.985}}

/* luce sugli elementi cliccabili: più raccolta, resta dentro il riquadro */
html.miw-anim .mo-spot-host{overflow:hidden}
html.miw-anim .mo-spot-host > .mo-spot{background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(220,172,87,.16),rgba(220,172,87,.05) 45%,transparent 70%)}

/* 03/11 guide: versione leggera */
html.miw-anim.mo-lite{--mo-dist:10px; --mo-dur:.6s}
html.miw-anim.mo-lite [data-mo="card"],html.miw-anim.mo-lite [data-mo="up"]{--mo-a:moUp; --mo-dur:.6s}
html.miw-anim.mo-lite [data-mo="panel"],html.miw-anim.mo-lite [data-mo="band"]{--mo-a:moFade; --mo-dur:.6s}
html.miw-anim.mo-lite [data-mo="eyebrow"],html.miw-anim.mo-lite [data-mo="fade"]{--mo-dur:.6s}