/* =========================================================================
   MOTION — Nuovi Orizzonti · "Almanacco Industriale"
   -------------------------------------------------------------------------
   Preloader col logo, cursore a losanga dorata, barra di lettura, losanghe
   fluttuanti e pulviscolo nell'hero, bottoni magnetici, tilt delle schede.
   La regia è in assets/js/motion.js (GSAP + ScrollTrigger + Lenis).

   Sicurezza: senza JavaScript o con "riduci movimento" attivo la pagina
   resta ferma e completamente leggibile.
   ========================================================================= */

:root{
  --mx-out:cubic-bezier(.16,1,.3,1);
  --mx-io:cubic-bezier(.65,0,.35,1);
}

/* ---------- Preloader ---------- */
#mx-loader{
  position:fixed;inset:0;z-index:10000;background:var(--ink);
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:30px;
}
#mx-loader .l-logo{
  width:min(150px,40vw);opacity:0;transform:translateY(12px);
  border-radius:50%;background:var(--parchment);padding:10px;
  box-shadow:0 0 60px rgba(197,148,79,.3);
}
#mx-loader .l-name{
  font-family:var(--serif);font-size:1.1rem;color:var(--parchment);
  opacity:0;transform:translateY(10px);letter-spacing:.02em;
}
#mx-loader .l-name span{color:var(--gold)}
#mx-loader .l-bar{
  width:min(230px,52vw);height:1px;background:var(--line-soft);
  position:relative;overflow:hidden;
}
#mx-loader .l-bar i{
  position:absolute;inset:0;width:0;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold),var(--gold-hi));
  box-shadow:0 0 18px var(--gold);
}
#mx-loader .l-count{
  font-family:var(--mono);font-size:11px;letter-spacing:.3em;color:var(--bone-dim);
}

/* ---------- Barra di avanzamento della lettura ---------- */
.mx-progress{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:9001;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold),var(--gold-hi));
  transform:scaleX(0);transform-origin:0 50%;
  pointer-events:none;
}

/* ---------- Cursore a losanga (solo mouse) ---------- */
#mx-cursor{
  position:fixed;top:0;left:0;width:7px;height:7px;background:var(--gold);
  transform:translate(-50%,-50%) rotate(45deg);border-radius:1px;z-index:9999;
  pointer-events:none;opacity:0;
  transition:width .25s,height .25s,opacity .25s;
}
#mx-cursor-ring{
  position:fixed;top:0;left:0;width:40px;height:40px;border:1px solid var(--line);
  border-radius:50%;transform:translate(-50%,-50%);z-index:9998;pointer-events:none;opacity:0;
  transition:width .3s var(--mx-out),height .3s var(--mx-out),border-color .3s,opacity .3s;
}
html.mx-cursor-on #mx-cursor,
html.mx-cursor-on #mx-cursor-ring{opacity:1}
body.cursor-hover #mx-cursor{width:5px;height:5px}
body.cursor-hover #mx-cursor-ring{width:64px;height:64px;border-color:var(--gold)}
@media (hover:none),(pointer:coarse){#mx-cursor,#mx-cursor-ring{display:none !important}}
html.mx-cursor-on a,
html.mx-cursor-on button{cursor:none}
html.mx-cursor-on input,
html.mx-cursor-on textarea{cursor:text}

/* ---------- Losanghe fluttuanti e pulviscolo nell'hero ---------- */
.mx-float{
  position:absolute;z-index:1;color:var(--gold);opacity:.42;
  pointer-events:none;will-change:transform;
}
.mx-float svg{width:26px;height:26px;display:block;filter:drop-shadow(0 0 8px rgba(197,148,79,.5))}
.mx-float.f1{top:22%;left:8%}
.mx-float.f2{top:26%;right:9%}
.mx-float.f3{bottom:24%;left:14%}
@media (max-width:860px){
  .mx-float.f1{top:15%;left:6%}
  .mx-float.f2{top:13%;right:7%}
  .mx-float.f3{bottom:30%;right:10%;left:auto}
}
.mx-mote{
  position:absolute;z-index:1;width:3px;height:3px;border-radius:50%;
  background:var(--gold-hi);opacity:.5;pointer-events:none;will-change:transform;
}

/* =========================================================================
   Micro-interazioni (attive anche con "riduci movimento": durate brevi,
   servono solo a far capire dove si sta cliccando).
   ========================================================================= */

/* ---------- Bottoni: bagliore che attraversa ---------- */
.btn{overflow:hidden;isolation:isolate}
.btn::before{
  content:"";position:absolute;top:0;bottom:0;left:-70%;width:45%;z-index:-1;
  background:linear-gradient(105deg,transparent,rgba(230,197,137,.35),transparent);
  transform:skewX(-18deg);
  transition:left .6s var(--mx-out);
}
.btn:hover::before,.btn:focus-visible::before{left:130%}
.btn:active{transform:scale(.985)}

/* ---------- Figure: riscaldo e crocini ---------- */
.figure{transition:filter .6s var(--mx-out),transform .6s var(--mx-out),border-color .6s}
.figure:hover{filter:contrast(1.05) saturate(1.1);transform:translateY(-4px);border-color:var(--line)}
.figure__crop span{transition:transform .45s var(--mx-out)}
.figure:hover .figure__crop span:nth-child(1){transform:translate(-5px,-5px)}
.figure:hover .figure__crop span:nth-child(2){transform:translate(5px,-5px)}
.figure:hover .figure__crop span:nth-child(3){transform:translate(-5px,5px)}
.figure:hover .figure__crop span:nth-child(4){transform:translate(5px,5px)}

/* ---------- Occhielli: la losanga pulsa piano ---------- */
@media (prefers-reduced-motion: no-preference){
  .eyebrow__mark::after{animation:mx-pulse 2.8s var(--mx-io) infinite}
  @keyframes mx-pulse{0%,100%{transform:rotate(45deg) scale(1);opacity:1}50%{transform:rotate(45deg) scale(.6);opacity:.5}}
}

/* ---------- Menu mobile: le voci entrano una dopo l'altra ---------- */
@media (max-width:1024px) and (prefers-reduced-motion: no-preference){
  html.js .nav.is-open .nav__link,
  html.js .nav.is-open .nav__cta{
    animation:mx-navin .55s var(--mx-out) both;
    animation-delay:calc(var(--i,0) * 60ms);
  }
  @keyframes mx-navin{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
}

/* ---------- Form: l'etichetta si accende col campo ---------- */
.field label{transition:color .3s,letter-spacing .35s var(--mx-out)}
.field:focus-within label{color:var(--gold-hi);letter-spacing:.26em}

/* ---------- Contatti e piè di pagina ---------- */
.cta__row svg{transition:transform .4s var(--mx-out)}
.cta__row:hover svg{transform:translateY(-2px) scale(1.15)}
.footer__list a{display:inline-block;transition:color .3s,transform .3s var(--mx-out)}
.footer__list a:hover{transform:translateX(4px)}

/* ---------- Riduci movimento: tutto fermo, tutto visibile ---------- */
@media (prefers-reduced-motion:reduce){
  #mx-loader{display:none !important}
  .mx-float,.mx-mote{display:none !important}
}