/* ============================================================
   Neon2emme — MOTION SYSTEM
   Animazioni hardware-accelerated (transform/opacity), leggere,
   ottimizzate mobile, con rispetto di prefers-reduced-motion.
   Si applica anche ai contenuti Elementor tramite selettori generici.
   ============================================================ */

/* --- 1. LOADER elegante (spinner brand) --- */
.n2m-loader{
  position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;
  background:var(--n2m-bg);transition:opacity .55s ease,visibility .55s ease;
}
.n2m-loader__mark{
  width:58px;height:58px;border-radius:50%;
  border:3px solid rgba(255,255,255,.10);border-top-color:var(--n2m-accent);
  animation:n2m-spin .85s linear infinite;
}
.n2m-loader.n2m-loaded{opacity:0;visibility:hidden}
@keyframes n2m-spin{to{transform:rotate(360deg)}}

/* --- 2. REVEAL su scroll (fade/slide/zoom) --- */
/* Stato iniziale applicato SOLO quando il JS aggiunge .n2m-reveal:
   se il JS non gira, il contenuto resta visibile (fail-safe). */
.n2m-reveal{opacity:0;transform:translateY(20px);
  transition:opacity .55s var(--n2m-ease),transform .55s var(--n2m-ease);will-change:opacity,transform}
.n2m-reveal[data-anim="zoom"]{transform:scale(.94)}
.n2m-reveal[data-anim="left"]{transform:translateX(-40px)}
.n2m-reveal[data-anim="right"]{transform:translateX(40px)}
.n2m-reveal.n2m-in{opacity:1;transform:none}

/* --- 3. PARALLAX / TILT --- */
[data-parallax]{will-change:transform}
.n2m-tilt{transition:transform .18s var(--n2m-ease);transform-style:preserve-3d}

/* --- 4. HOVER avanzati: zoom immagini in card e widget image --- */
.n2m-card .elementor-widget-image img,
.n2m-service .elementor-widget-image img,
.n2m-card img{transition:transform .5s var(--n2m-ease)}
.n2m-card:hover .elementor-widget-image img,
.n2m-service:hover .elementor-widget-image img,
.n2m-card:hover img{transform:scale(1.05)}

/* Placeholder "vivi": cornice + zoom + shine che attraversa all'hover.
   Le foto reali (stesso widget) erediteranno gli stessi effetti. */
.n2m-media{position:relative;overflow:hidden;border-radius:14px}
.n2m-media img{display:block;width:100%;transition:transform .6s var(--n2m-ease),filter .4s var(--n2m-ease)}
.n2m-media::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.12) 48%,transparent 64%);
  transform:translateX(-130%);transition:transform .75s var(--n2m-ease)}
.n2m-media:hover img{transform:scale(1.06);filter:brightness(1.06)}
.n2m-media:hover::after{transform:translateX(130%)}
.n2m-media:hover{box-shadow:inset 0 0 0 1px var(--n2m-accent)}

/* --- 5. MICRO-INTERAZIONI --- */
.n2m-btn:active,
.elementor-button:active{transform:translateY(0) scale(.97)}
.elementor-button{transition:transform .18s var(--n2m-ease),background-color .2s var(--n2m-ease),box-shadow .2s var(--n2m-ease)}
a,button{-webkit-tap-highlight-color:rgba(255,99,0,.15)}

/* --- 6. TRANSIZIONE DI PAGINA (fade tra pagine) --- */
.n2m-pagefade{position:fixed;inset:0;z-index:9998;background:var(--n2m-bg);
  opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;pointer-events:none}
body.n2m-leaving .n2m-pagefade{opacity:1;visibility:visible}

/* --- 7. SKELETON (per immagini/placeholder in caricamento) --- */
.n2m-skel{background:linear-gradient(100deg,#131316 30%,#20202a 50%,#131316 70%);
  background-size:200% 100%;animation:n2m-shimmer 1.3s ease-in-out infinite}
@keyframes n2m-shimmer{to{background-position:-200% 0}}

/* --- 8. OTTIMIZZAZIONI MOBILE / ACCESSIBILITÀ --- */
@media (hover:none){
  .n2m-tilt{transform:none !important}         /* niente tilt su touch */
  .n2m-hero::before{--n2m-hx:0px;--n2m-hy:0px}  /* niente mouse-parallax su touch */
}
@media (prefers-reduced-motion:reduce){
  .n2m-reveal{opacity:1 !important;transform:none !important;transition:none}
  .n2m-loader{display:none}
  .n2m-hero::before{transition:none}
  .n2m-marquee__track{animation:none !important;transform:none !important}
  .n2m-media::after{display:none}
  *{animation-duration:.001ms !important}
}