/* =============================================================
   Aesir — Space Motion  ·  space.css
   Layer di motion design sopra la struttura .ab-* esistente.
   Regola d'oro: si animano solo transform e opacity.
   ============================================================= */

:root{
  --asm-void:#0b0d24;
  --asm-navy:#161a3a;
  --asm-deep:#282a5d;
  --asm-teal:#4890aa;
  --asm-mint:#65cba3;
  --asm-ease:cubic-bezier(.22,.61,.36,1);
  --asm-ease-out:cubic-bezier(.16,1,.3,1);
  --asm-header-h:88px;
}

/* -------------------------------------------------------------
   1 · Canvas del campo stellare
   Un canvas per ogni scena scura. Sta sopra la foto e sotto il testo.
   ------------------------------------------------------------- */
.asm-stars{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  pointer-events:none;
  z-index:0;
  opacity:0;
  transition:opacity 1.1s var(--asm-ease);
}
.asm-stars.is-lit{opacity:1}

/* il campo stellare procedurale del tema lascia il posto al canvas */
.asm-stars-on .ab-hero::before,
.asm-stars-on .ab-phero::before,
.asm-stars-on .ab-sec--navy::before{opacity:0 !important}

/* il contenuto resta sempre sopra ogni layer decorativo */
.asm .ab-hero > .ab-wrap,
.asm .ab-phero > .ab-wrap,
.asm .ab-sec--navy > .ab-wrap,
.asm .ab-final > .ab-wrap{position:relative;z-index:2}

/* -------------------------------------------------------------
   2 · Hero cinematica
   Sequenza: buio → spazio → profondità → Aesir → titolo → CTA
   ------------------------------------------------------------- */
.asm-veil{
  position:absolute;
  inset:0;
  z-index:3;
  background:radial-gradient(120% 100% at 62% 46%, rgba(8,9,24,.86) 0%, #05060f 62%, #04050c 100%);
  pointer-events:none;
  opacity:1;
  transition:opacity 1s var(--asm-ease);
}
.asm-veil.is-gone{opacity:0}

/* Stato di partenza e stato rivelato.
   Il passaggio avviene tramite custom properties, non tramite due regole in
   competizione: cosi' la specificita' non puo' mai far vincere lo stato nascosto
   (era il bug che teneva h1 e paragrafo a opacita' 0). */
.asm-js .ab-hero .ab-hero-kicker,
.asm-js .ab-hero > .ab-wrap > h1,
.asm-js .ab-hero > .ab-wrap > p,
.asm-js .ab-hero .ab-hero-actions,
.asm-js .ab-hero .ab-stats > *,
.asm-js .ab-hero .ab-note,
.asm-js .ab-phero .ab-hero-kicker,
.asm-js .ab-phero > .ab-wrap > h1,
.asm-js .ab-phero > .ab-wrap > p,
.asm-js .ab-phero .ab-hero-actions{
  opacity:var(--asm-o,0);
  transform:translate3d(0,var(--asm-y,18px),0);
  transition:opacity .82s var(--asm-ease-out), transform .82s var(--asm-ease-out);
  will-change:transform,opacity;
  animation:asmFailsafe .4s ease-out 1.6s forwards;
}
/* il titolo pesa piu' di tutto: sale da piu' in basso e con un filo di scala */
.asm-js .ab-hero > .ab-wrap > h1,
.asm-js .ab-phero > .ab-wrap > h1{
  transform:translate3d(0,var(--asm-y,26px),0) scale(var(--asm-s,.985));
  transform-origin:left center;
  transition-duration:1.05s;
}
.asm-js .ab-hero .is-in,
.asm-js .ab-phero .is-in{--asm-o:1;--asm-y:0px;--asm-s:1;animation:none}

/* Failsafe: se il motore non parte (per esempio bloccato dal CMP dei cookie)
   il contenuto compare comunque. Nessuno stato nascosto resta permanente. */
@keyframes asmFailsafe{to{opacity:1;transform:none}}

/* parallasse del mouse: solo desktop con puntatore fine, ampiezze minime */
.asm .ab-hero,.asm .ab-phero{--asm-mx:0;--asm-my:0}
@media (hover:hover) and (pointer:fine){
  .asm .ab-hero > .ab-wrap,
  .asm .ab-phero > .ab-wrap{
    transform:translate3d(calc(var(--asm-mx) * -3px), calc(var(--asm-my) * -2px),0);
    transition:transform .9s var(--asm-ease);
  }
}

/* uscita dalla hero: il contenuto si allontana, non scivola via */
.asm .ab-hero > .ab-wrap{
  transform:translate3d(0, calc(var(--asm-exit,0) * 46px), 0) scale(calc(1 - var(--asm-exit,0) * .028));
  opacity:calc(1 - var(--asm-exit,0) * .55);
}
@media (hover:hover) and (pointer:fine){
  .asm .ab-hero > .ab-wrap{
    transform:translate3d(calc(var(--asm-mx) * -3px), calc(var(--asm-my) * -2px + var(--asm-exit,0) * 46px), 0) scale(calc(1 - var(--asm-exit,0) * .028));
  }
}

/* -------------------------------------------------------------
   3 · Reveal allo scroll
   ------------------------------------------------------------- */
.asm-js .asm-rv{
  opacity:var(--asm-o,0);
  transform:translate3d(0,var(--asm-y,22px),0);
  transition:opacity .78s var(--asm-ease-out), transform .78s var(--asm-ease-out);
  transition-delay:var(--asm-d,0ms);
}
.asm-js .asm-rv--title{transform:translate3d(0,var(--asm-y,34px),0);transition-duration:.95s}
.asm-js .asm-rv.is-in{--asm-o:1;--asm-y:0px}

/* -------------------------------------------------------------
   4 · Parallasse a profondità sulle fasce fotografiche
   ------------------------------------------------------------- */
.asm .asm-band{overflow:hidden}
.asm .asm-band::before{
  transform:translate3d(0, calc(var(--asm-p,0) * 42px), 0) scale(1.06);
  will-change:transform;
}

/* -------------------------------------------------------------
   5 · Header: sticky, poi vetro.
   Il trattamento dipende dal colore che la barra ha a riposo:
   .asm-head-light -> vetro chiaro, testi invariati
   .asm-head-dark  -> vetro navy, testi chiari
   La classe la assegna space.js leggendo la luminanza reale,
   cosi' il contrasto non dipende dal markup del tema.
   ------------------------------------------------------------- */
/* .asm-header regge solo lo sticky: e' il contenitore alto quanto serve. */
.asm .asm-header{
  position:sticky;
  top:var(--asm-top,0px);
  z-index:120;
}
/* .asm-headbar e' la barra che si vede: e' lei a prendere il vetro. */
.asm .asm-headbar{
  transition:background-color .45s var(--asm-ease), box-shadow .45s var(--asm-ease), border-color .45s var(--asm-ease), backdrop-filter .45s var(--asm-ease);
}
.asm .asm-headbar.is-glass{
  -webkit-backdrop-filter:saturate(140%) blur(15px);
  backdrop-filter:saturate(140%) blur(15px);
}
.asm .asm-headbar.is-glass > *{background-color:transparent}

/* barra chiara: nessun cambio di colore dei testi, zero rischio contrasto */
.asm .asm-headbar.asm-head-light.is-glass{
  background-color:rgba(255,255,255,.82);
  border-bottom-color:rgba(20,22,58,.10);
  box-shadow:0 14px 34px -26px rgba(8,10,30,.55);
}

/* barra scura o trasparente sopra la hero: vetro navy e testi chiari */
.asm .asm-headbar.asm-head-dark.is-glass{
  background-color:rgba(13,15,38,.74);
  box-shadow:0 1px 0 rgba(255,255,255,.08), 0 18px 40px -28px rgba(4,6,20,.9);
}
.asm .asm-headbar.asm-head-dark.is-glass .elementor-section,
.asm .asm-headbar.asm-head-dark.is-glass .e-con{background-color:transparent}
.asm .asm-headbar.asm-head-dark.is-glass a:not([class*="cta"]):not([class*="button"]):not([class*="btn"]),
.asm .asm-headbar.asm-head-dark.is-glass .elementor-nav-menu a{color:rgba(255,255,255,.92)}
.asm .asm-headbar.asm-head-dark.is-glass a:not([class*="cta"]):not([class*="button"]):not([class*="btn"]):hover,
.asm .asm-headbar.asm-head-dark.is-glass .elementor-nav-menu a:hover{color:#fff}

/* filo di avanzamento lettura */
.asm-progress{
  position:fixed;top:0;left:0;height:2px;width:100%;
  transform:scaleX(var(--asm-scroll,0));
  transform-origin:0 50%;
  background:linear-gradient(90deg, var(--asm-teal), var(--asm-mint));
  z-index:130;pointer-events:none;
  opacity:0;transition:opacity .4s var(--asm-ease);
}
.asm-progress.is-on{opacity:.9}

/* -------------------------------------------------------------
   6 · Microinterazioni
   ------------------------------------------------------------- */
.asm .asm-cta{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  transition:transform .35s var(--asm-ease), box-shadow .35s var(--asm-ease);
}
.asm .asm-cta::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg, rgba(101,203,163,.28), rgba(72,144,170,.34));
  transform:translate3d(-101%,0,0);
  transition:transform .5s var(--asm-ease-out);
}
.asm .asm-cta:hover{transform:translate3d(0,-2px,0);box-shadow:0 14px 30px -18px rgba(9,12,34,.75)}
.asm .asm-cta:hover::after{transform:none}
.asm .asm-cta:focus-visible{outline:2px solid var(--asm-mint);outline-offset:3px}

/* link testuali: sottolineatura che si apre da sinistra */
.asm .ab-page a.asm-link{
  position:relative;text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:0% 1px;
  transition:background-size .42s var(--asm-ease-out);
}
.asm .ab-page a.asm-link:hover{background-size:100% 1px}

/* card: sollevamento minimo, bordo che prende luce */
.asm .asm-card{
  transition:transform .45s var(--asm-ease), box-shadow .45s var(--asm-ease), border-color .45s var(--asm-ease);
  will-change:transform;
}
.asm .asm-card:hover{
  transform:translate3d(0,-4px,0);
  box-shadow:0 26px 50px -34px rgba(11,14,40,.55);
}

/* immagini: zoom 1.00 → 1.03 dentro una maschera */
.asm .asm-zoom{overflow:hidden}
.asm .asm-zoom img{transition:transform .9s var(--asm-ease-out)}
.asm .asm-zoom:hover img{transform:scale(1.03)}

/* -------------------------------------------------------------
   7 · Marquee partner
   ------------------------------------------------------------- */
.asm .asm-marquee{
  position:relative;
  overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.asm .asm-marquee__track{
  display:flex;
  width:max-content;
  gap:0;
  animation:asmMarquee var(--asm-mq,64s) linear infinite;
  will-change:transform;
}
.asm .asm-marquee:hover .asm-marquee__track{animation-play-state:paused}
@keyframes asmMarquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* -------------------------------------------------------------
   8 · Contatori
   ------------------------------------------------------------- */
.asm .asm-count{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* -------------------------------------------------------------
   9 · Orbite: traiettorie sottilissime che legano gli elementi
   ------------------------------------------------------------- */
.asm .asm-orbit{
  position:absolute;
  inset:auto;
  pointer-events:none;
  z-index:1;
  opacity:0;
  transition:opacity 1.4s var(--asm-ease);
}
.asm .asm-orbit.is-in{opacity:.5}
.asm .asm-orbit path,.asm .asm-orbit ellipse,.asm .asm-orbit circle{
  fill:none;
  stroke:url(#asmOrbitStroke);
  stroke-width:1;
  vector-effect:non-scaling-stroke;
}

/* -------------------------------------------------------------
   10 · Mobile: meno effetti, più leggibilità
   ------------------------------------------------------------- */
@media (max-width:768px){
  .asm .ab-hero > .ab-wrap{opacity:1;transform:none}
  .asm .asm-band::before{transform:none}
  .asm .asm-card:hover{transform:none;box-shadow:none}
  .asm-progress{height:2px}
  .asm-js .asm-rv{transform:translate3d(0,14px,0)}
}

/* -------------------------------------------------------------
   11 · prefers-reduced-motion: resta solo il fade
   ------------------------------------------------------------- */
.asm-calm .asm-stars{display:none}
.asm-calm .ab-hero > .ab-wrap,
.asm-calm .ab-phero > .ab-wrap{transform:none !important;opacity:1 !important}
.asm-calm .asm-band::before{transform:none !important}
.asm-calm .asm-marquee__track{animation:none !important}
.asm-calm .asm-progress{display:none}
@media (prefers-reduced-motion:reduce){
  .asm *,.asm *::before,.asm *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.16s !important;
    scroll-behavior:auto !important;
  }
  .asm-js .asm-rv,.asm-js .ab-hero .ab-hero-kicker,.asm-js .ab-hero > .ab-wrap > h1,
  .asm-js .ab-hero > .ab-wrap > p,.asm-js .ab-hero .ab-hero-actions,
  .asm-js .ab-hero .ab-stats > *,.asm-js .ab-hero .ab-note{transform:none !important}
}