/* ===========================================================
   nativo/studio — Hero animata (plugin WordPress)
   =========================================================== */
/* Il font Gilroy è caricato dal sito (Elementor → Font personalizzati). */
.nv-hero{
  --nv-bg:#ffffff;
  --nv-ink:#1d1d1b;
  --nv-muted:#8a8884;
  --nv-grad:linear-gradient(110deg,#fbd9c4 0%,#f6a25a 14%,#f25a24 30%,#d91f1f 44%,#2a0606 60%,#05060c 70%,#2c2f5a 84%,#2b8fb8 100%);
  --nv-ease:cubic-bezier(.16,.84,.24,1);
  --nv-ease-rise:cubic-bezier(.19,1,.22,1); /* expo-out: partenza decisa, arrivo morbido */

  position:relative;
  min-height:calc(100vh - var(--wp-admin--admin-bar--height, 0px) - var(--nv-offset, 0px));
  min-height:calc(100svh - var(--wp-admin--admin-bar--height, 0px) - var(--nv-offset, 0px));
  width:100%;
  margin:0;
  overflow:hidden;
  background:var(--nv-bg);
  color:var(--nv-ink);
  font-family:"Gilroy","Helvetica Neue",Arial,sans-serif;
  display:grid;
  grid-template-rows:auto 1fr auto;
  padding:clamp(20px,3.2vw,48px);
  box-sizing:border-box;
  isolation:isolate;
}
.nv-hero *,.nv-hero *::before,.nv-hero *::after{box-sizing:border-box}

/* ---------- Orb sfumato (gradiente identitario) ---------- */
.nv-hero__orb-wrap{
  position:absolute; inset:0; z-index:-2; pointer-events:none;
  transform:translate3d(var(--nv-mx,0px), calc(var(--nv-my,0px) + var(--nv-p,0) * 18vh), 0);
  transition:transform .8s var(--nv-ease);
}
.nv-hero__orb{
  position:absolute;
  width:min(78vmax,1200px); aspect-ratio:1;
  right:-18vmax; bottom:-30vmax;
  border-radius:50%;
  background:
    radial-gradient(circle at 28% 62%, #f6a25a 0%, transparent 38%),
    radial-gradient(circle at 40% 45%, #ef3b1f 0%, transparent 46%),
    radial-gradient(circle at 70% 30%, #050507 0%, transparent 50%),
    radial-gradient(circle at 78% 74%, #2b8fb8 0%, transparent 34%),
    radial-gradient(circle at 60% 60%, #2a0a12 0%, transparent 60%);
  filter:blur(60px) saturate(1.15);
  opacity:0;
  transform:scale(.6) rotate(-20deg);
  animation:
    nv-orb-in 2.4s var(--nv-ease) 1s forwards,
    nv-orb-drift 18s ease-in-out 3.4s infinite alternate;
}
@keyframes nv-orb-in{to{opacity:.95; transform:scale(1) rotate(0)}}
@keyframes nv-orb-drift{
  0%  {transform:scale(1)    rotate(0deg)   translate(0,0)}
  50% {transform:scale(1.08) rotate(14deg)  translate(-3vmax,-2vmax)}
  100%{transform:scale(.96)  rotate(-8deg)  translate(-6vmax,1vmax)}
}

/* ---------- Grana ---------- */
.nv-hero__grain{
  position:absolute; inset:-50%; z-index:-1; pointer-events:none;
  opacity:.22; mix-blend-mode:overlay; /* la grana resta sul gradiente, il bianco rimane bianco */
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:nv-grain 1s steps(4) infinite;
}
@keyframes nv-grain{
  0%{transform:translate(0,0)} 25%{transform:translate(-3%,2%)}
  50%{transform:translate(2%,-3%)} 75%{transform:translate(-1%,3%)} 100%{transform:translate(0,0)}
}

/* ---------- Slash ---------- */
.nv-hero__slash{
  position:absolute; z-index:-1; pointer-events:none;
  left:58%; top:50%;
  width:clamp(2px,.28vw,4px); height:150vh;
  transform:translate(-50%,-50%) rotate(16deg);
  transform-origin:50% 50%;
}
.nv-hero__slash::before{
  content:""; position:absolute; inset:0;
  background:var(--nv-ink);
  transform:scaleY(0); transform-origin:50% 100%;
  animation:nv-slash-draw 1s var(--nv-ease) .05s forwards,
            nv-slash-fade 1.4s var(--nv-ease) 1.2s forwards;
}
@keyframes nv-slash-draw{to{transform:scaleY(1)}}
@keyframes nv-slash-fade{to{opacity:.09}}

/* ---------- Barra superiore ---------- */
.nv-hero__top,.nv-hero__bottom{
  display:flex; justify-content:space-between; align-items:center; gap:24px;
  font-size:clamp(.8rem,.9vw,.95rem); letter-spacing:.01em;
}
.nv-hero__logo{font-size:clamp(1.1rem,1.5vw,1.45rem); font-weight:500; letter-spacing:-.01em; color:var(--nv-ink); text-decoration:none}
.nv-hero__logo b{font-weight:300; display:inline-block; transform:skewX(-14deg) scaleY(1.25); margin:0 .02em}
.nv-hero__meta{color:var(--nv-muted)}
.nv-fade{opacity:0; transform:translateY(8px); animation:nv-fade .9s var(--nv-ease) forwards}
@keyframes nv-fade{to{opacity:1; transform:none}}

/* ---------- Titolo ---------- */
.nv-hero__body{
  display:flex; align-items:center; justify-content:center; padding:clamp(24px,5vh,64px) 0;
  /* uscita allo scroll: il titolo sale piano e si dissolve */
  transform:translate3d(0,calc(var(--nv-p,0) * -90px),0);
  opacity:calc(1 - var(--nv-p,0) * 1.4);
  will-change:transform,opacity;
}
/* il titolo resta nascosto finché il JS non lo ha diviso in parole (niente lampo di testo statico);
   se il JS non parte, dopo 2,5s compare comunque */
.nv-hero:not(.nv-hero--ready) .nv-hero__title{visibility:hidden; animation:nv-failsafe 0s 2.5s forwards}
@keyframes nv-failsafe{to{visibility:visible}}
.nv-hero__title{
  margin:0;
  font-weight:600;
  font-size:min(100px, 7.2vw);   /* 100px su desktop, scala solo sotto i ~1390px */
  line-height:1;                 /* 100px su 100px */
  letter-spacing:-.02em;
  width:100%;
  max-width:1366px;   /* contenitore massimo del titolo */
  margin-left:auto; margin-right:auto;
  text-align:left;    /* bandiera a sinistra, blocco centrato nel contenitore */
}
.nv-line{display:block}
.nv-w{
  display:inline-block; overflow:hidden; vertical-align:top;
  /* spazio extra per ascendenti/discendenti con interlinea stretta */
  padding:.2em .03em .32em; margin:-.2em -.01em -.32em;
}
.nv-w > span{
  display:inline-block;
  transform-origin:0 100%;
  will-change:transform,opacity;
  backface-visibility:hidden;
  animation:nv-rise 1.6s var(--nv-ease-rise) both;
  animation-delay:calc(.25s + var(--i) * 80ms);
}
@keyframes nv-rise{
  0%  {transform:translate3d(0,105%,0) rotate(2.5deg); opacity:0}
  35% {opacity:1}
  100%{transform:translate3d(0,0,0) rotate(0); opacity:1}
}

/* parole chiave con gradiente che scorre */
.nv-key > span{
  /* il gradiente va dipinto anche su ascendenti e discendenti (g, p, virgola) */
  padding:.2em 0 .32em; margin:-.2em 0 -.32em;
  background:var(--nv-grad);
  background-size:400% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:
    nv-rise 1.6s var(--nv-ease-rise) both,
    nv-flow 9s ease-in-out infinite alternate;
  animation-delay:calc(.25s + var(--i) * 80ms), calc(var(--i) * -0.9s);
}
@keyframes nv-flow{from{background-position:0% 50%} to{background-position:100% 50%}}

/* ---------- Barra inferiore ---------- */
.nv-hero__bottom{opacity:calc(1 - var(--nv-p,0) * 3)}
/* "Scorri" al centro: griglia a tre colonne, email a destra */
.nv-hero__bottom{display:grid; grid-template-columns:1fr auto 1fr; align-items:end}
.nv-hero__bottom > .nv-hero__scroll{grid-column:2}
.nv-hero__bottom > .nv-hero__meta{grid-column:3; justify-self:end}
.nv-hero__scroll{display:inline-flex; flex-direction:column; align-items:center; gap:10px; color:var(--nv-ink); text-decoration:none}
.nv-hero__scroll i{position:relative; width:1px; height:42px; background:rgba(29,29,27,.15); overflow:hidden}
.nv-hero__scroll i::after{
  content:""; position:absolute; left:0; top:-40%; width:100%; height:40%;
  background:var(--nv-ink); animation:nv-scroll 1.8s var(--nv-ease) infinite;
}
@keyframes nv-scroll{to{top:100%}}
.nv-hero__bottom a{color:inherit; text-decoration:none}
.nv-hero__bottom a:hover{text-decoration:underline; text-underline-offset:3px}

/* ---------- Mobile ---------- */
@media (max-width:720px){
  .nv-hero__title{font-size:11.5vw}
  .nv-line{display:inline}  /* su mobile il testo scorre libero, senza parole isolate */
  .nv-hero__meta--hide{display:none}
  .nv-hero__slash{left:72%}
  .nv-hero__orb{right:-40vmax; bottom:-34vmax}
}

/* ---------- Movimento ridotto ---------- */
@media (prefers-reduced-motion:reduce){
  .nv-hero *,.nv-hero *::before,.nv-hero *::after{animation:none !important; transition:none !important}
  .nv-w > span,.nv-fade{transform:none; opacity:1}
  .nv-hero__orb{opacity:.95; transform:none}
  .nv-hero__slash::before{transform:none; opacity:.09}
  .nv-hero__body,.nv-hero__bottom{transform:none; opacity:1}
  .nv-hero .nv-hero__title{visibility:visible}
}

/* ---------- Integrazione WordPress ---------- */
/* esce dal contenitore del tema e occupa tutta la larghezza */
.nv-hero--fullbleed{
  width:calc(100vw - var(--nv-sbw, 0px)); max-width:calc(100vw - var(--nv-sbw, 0px));
  margin-left:calc(50% - 50vw + var(--nv-sbw, 0px) / 2);
  margin-right:calc(50% - 50vw + var(--nv-sbw, 0px) / 2);
}
/* evita che gli stili del tema sovrascrivano titolo e link */
.nv-hero .nv-hero__title{
  font-family:inherit; font-weight:600; color:var(--nv-ink); text-transform:none;
  padding:0; border:0; background:none;
}
.nv-hero .nv-hero__title em{font-style:normal; font-weight:inherit}
.nv-hero a{box-shadow:none}
/* niente scroll orizzontale causato dal full-bleed */
html:has(.nv-hero--fullbleed), body:has(.nv-hero--fullbleed){overflow-x:clip}

/* ---------- Pausa fuori schermo ---------- */
.nv-hero--paused .nv-hero__orb,
.nv-hero--paused .nv-hero__grain,
.nv-hero--paused .nv-key > span,
.nv-hero--paused .nv-hero__scroll i::after{animation-play-state:paused}