/* =====================================================================
   Wooden Space — livello animazioni (solo CSS + JS vanilla, nessuna libreria)
   - Gli stati "nascosti" esistono SOLO se:
       1) lo script ha messo la classe .js su <html>
       2) l'utente non ha chiesto di ridurre il movimento
     Senza JavaScript, o con "riduci movimento", tutto è visibile subito.
   - Si animano solo transform / translate / scale / opacity / filter / clip-path
     (più stroke-dashoffset per i tratti SVG "a matita").
   ===================================================================== */

:root{
  --ws-ease:cubic-bezier(.2,.7,.2,1);
  --ws-ease-out:cubic-bezier(.16,1,.3,1);
  --ws-spring:cubic-bezier(.34,1.56,.64,1);
}

/* ---------- barra di avanzamento della lettura ---------- */
.ws-progress{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:150;
  background:linear-gradient(90deg, var(--amber), var(--amber-light));
  transform:scaleX(0); transform-origin:0 50%;
  pointer-events:none;
}

/* ---------- header: compattamento e comparsa allo scroll ---------- */
header{transition:box-shadow .3s ease, transform .55s var(--ws-ease);}
header.ws-hide{transform:translate3d(0,-100%,0);}
.nav-wrap .brand{transform-origin:0 50%; transition:scale .5s var(--ws-ease);}
header.scrolled .nav-wrap .brand{scale:.92;}

/* link del menu: sottolineatura che si disegna (solo transform) + sezione attiva */
nav a:not(.btn)::after{width:100%; transform:scaleX(0); transform-origin:100% 50%; transition:transform .45s var(--ws-ease);}
nav a:not(.btn):hover::after, nav a.is-active::after{transform:scaleX(1); transform-origin:0 50%;}
nav a.is-active{color:var(--amber);}
.mobile-nav a:not(.btn)::after{width:36px; left:4px; bottom:9px;}

/* ---------- pulsanti: riempimento che sale + leggero effetto magnetico ---------- */
.btn{
  isolation:isolate;
  transition:transform .3s var(--ws-ease), box-shadow .3s ease, background-color .3s ease,
             color .3s ease, border-color .45s ease, translate .5s var(--ws-ease-out);
}
.btn::after{display:none;} /* il vecchio riflesso lascia il posto al riempimento */
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--ws-fill, var(--brown));
  transform:scaleY(0); transform-origin:50% 100%;
  transition:transform .5s var(--ws-ease);
}
.btn:hover::before{transform:scaleY(1);}
.btn:hover{box-shadow:0 12px 24px -8px rgba(92,58,33,.45);}
.btn-primary{--ws-fill:var(--brown);}
.btn-primary:hover{background:var(--amber); border-color:var(--brown);}
.btn-outline{--ws-fill:var(--white);}
.btn-outline:hover{background:transparent;}
.btn-outline-dark{--ws-fill:var(--brown);}
.btn-outline-dark:hover{background:transparent;}
.btn:disabled::before{transform:scaleY(0);}

/* focus visibili coerenti (colore ambra del sito) */
.btn:focus-visible, nav a:focus-visible, .brand:focus-visible, .filter-btn:focus-visible,
footer a:focus-visible, .map-link:focus-visible, .contact-row a:focus-visible, .back:focus-visible{
  outline:2px solid var(--amber); outline-offset:3px; border-radius:2px;
}

/* link con sottolineatura animata */
.contact-row a, footer ul a, .footer-bottom a{position:relative; display:inline-block;}
.contact-row a::after, footer ul a::after, .footer-bottom a::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px;
  background:currentColor; opacity:.8;
  transform:scaleX(0); transform-origin:100% 50%;
  transition:transform .45s var(--ws-ease);
}
.contact-row a:hover::after, footer ul a:hover::after, .footer-bottom a:hover::after{transform:scaleX(1); transform-origin:0 50%;}
.map-link svg{transition:transform .4s var(--ws-ease);}
.map-link:hover svg{transform:translate(3px,-3px);}

/* ---------- card: sollevamento e ombra calda ---------- */
.service-card{position:relative; overflow:hidden;}
.service-card::before{
  content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:linear-gradient(90deg, var(--amber), var(--amber-light));
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform .6s var(--ws-ease);
}
.service-card:hover::before{transform:scaleX(1);}
.service-card:hover{box-shadow:0 24px 44px -14px rgba(92,58,33,.55), 0 8px 18px -6px rgba(185,130,47,.18);}

.gallery-item:hover{box-shadow:0 24px 46px -12px rgba(92,58,33,.45), 0 6px 14px -4px rgba(185,130,47,.16);}
.gallery-item::after{ /* cornice sottile che si posa sulla foto */
  content:""; position:absolute; inset:10px; border-radius:8px;
  border:1px solid rgba(215,169,92,.75);
  opacity:0; transform:scale(1.05);
  transition:opacity .45s ease, transform .6s var(--ws-ease);
}
.gallery-item:hover::after, .gallery-item:focus-visible::after{opacity:1; transform:scale(1);}
.gallery-item img{transition:transform .8s var(--ws-ease), scale 1.5s var(--ws-ease-out); transition-delay:0s, var(--d,0s);}
.filter-btn:active{transform:scale(.97);}
.filter-btn{transition:background .25s ease, color .25s ease, border-color .25s ease, transform .2s ease;}

/* galleria: transizione fluida tra categorie (FLIP gestito in JS) */
html.js .gallery-grid{position:relative;}
html.js .gallery-grid .gallery-item{z-index:1;}
html.js .gallery-item.is-entering{animation:wsGalleryIn .7s var(--ws-ease-out) both; animation-delay:calc(var(--gi,0) * 60ms);}
@keyframes wsGalleryIn{from{opacity:0; transform:scale(.9);} to{opacity:1; transform:none;}}
.ws-ghost{
  position:absolute; z-index:0; overflow:hidden; border-radius:14px;
  animation:wsGhostOut .45s var(--ws-ease) forwards;
}
.ws-ghost img{width:100%; height:100%; object-fit:cover; display:block;}
@keyframes wsGhostOut{to{opacity:0; transform:scale(.88);}}
html.js .ws-now .gallery-item, html.js .ws-now .gallery-item img{transition:none !important;}

/* lightbox: la foto si posa con un leggero zoom */
.lightbox figure{transform:scale(.96); transition:transform .45s var(--ws-ease);}
.lightbox.open figure{transform:none;}

/* ---------- titoli: parole che salgono da dietro una linea ---------- */
.ws-w{display:inline-block; padding-bottom:.14em; margin-bottom:-.14em;}
.ws-wi{display:inline-block;}

/* tratto "a matita" sotto i titoli di sezione */
.ws-has-stroke{position:relative;}
.ws-stroke{
  position:absolute; left:50%; bottom:-15px; margin-left:-60px;
  width:120px; height:12px; overflow:visible;
}
.about-copy .ws-stroke{left:0; margin-left:0;}
.ws-stroke path{fill:none; stroke:var(--amber); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; opacity:.85;}
.why .ws-stroke path{stroke:var(--amber-light);}

/* venature del legno che si disegnano tra le sezioni */
html.js section.ws-has-grain{position:relative;}
.ws-grain{position:absolute; left:0; right:0; top:22px; height:40px; z-index:0;}
.ws-grain svg{display:block; width:100%; height:100%;}
.ws-grain path, .ws-grain ellipse{fill:none; stroke:var(--amber); stroke-opacity:.38; stroke-width:1.1; stroke-linecap:round;}
.why .ws-grain path, .why .ws-grain ellipse{stroke:var(--amber-light); stroke-opacity:.3;}

/* nessuna sezione può allargare la pagina di lato */
html.js section:not(.hero), html.js footer{overflow-x:clip;}

/* anello "a compasso" attorno alla foto dell'hero */
.ws-ring{
  position:absolute; left:50%; top:50%; translate:-50% -50%;
  width:calc(min(100%, 440px) + 56px); max-width:none; aspect-ratio:1/1; height:auto;
  overflow:visible;
}
.ws-ring circle{fill:none;}
.ws-ring .ws-ring-main{stroke:var(--amber-light); stroke-opacity:.55; stroke-width:.55; transform:rotate(-90deg); transform-box:view-box; transform-origin:50% 50%;}
.ws-ring .ws-ring-ticks{stroke:var(--amber-light); stroke-opacity:.5; stroke-width:1.6; stroke-dasharray:.35 4.6;}
.ws-ring g{transform-box:view-box; transform-origin:50% 50%;}
@media (max-width:980px){ .ws-ring{width:calc(min(100%, 440px) + 36px);} }
html.js .hero-art .hero-photo-frame{animation:none;}
html.js .hero-art .ws-float{animation:floatY 5.5s ease-in-out infinite; animation-delay:1.3s;}

/* contatori: larghezza bloccata mentre il numero scorre */
.ws-counting{display:inline-block; text-align:center; white-space:nowrap;}

/* firma: la linea sopra si traccia (a riposo identica al bordo originale) */
html.js .signature[data-rv]{border-top-color:transparent; position:relative;}
html.js .signature[data-rv]::before{
  content:""; position:absolute; left:0; right:0; top:-1px; height:1px;
  background:var(--cream-dark); transform-origin:0 50%;
}

/* le vecchie animazioni d'ingresso dell'hero sono sostituite dalla sequenza JS */
html.js .hero-copy .eyebrow, html.js .hero-copy h1, html.js .hero-copy p.lead,
html.js .hero-copy .hero-actions, html.js .hero-art{animation:none; opacity:1;}
html.js .eyebrow[data-rv]{display:inline-block;}

/* =====================================================================
   STATI NASCOSTI + TRANSIZIONI (solo con JS e movimento consentito)
   ===================================================================== */
@media (prefers-reduced-motion: no-preference){

  html.js [data-rv]:not(.rv-done){
    transition:
      opacity .9s var(--ws-ease) var(--d,0s),
      transform 1s var(--ws-ease) var(--d,0s),
      translate 1s var(--ws-ease) var(--d,0s),
      scale 1.3s var(--ws-ease-out) var(--d,0s),
      filter .9s var(--ws-ease) var(--d,0s),
      clip-path 1.25s var(--ws-ease-out) var(--d,0s);
  }
  html.js [data-rv].in:not(.rv-done){will-change:transform, opacity;}

  /* varianti */
  html.js [data-rv="up"]:not(.in){opacity:0; transform:translate3d(0,34px,0);}
  html.js [data-rv="down"]:not(.in){opacity:0; transform:translate3d(0,-14px,0);}
  html.js [data-rv="fade"]:not(.in){opacity:0;}
  html.js [data-rv="blur"]:not(.in){opacity:0; filter:blur(8px); transform:translate3d(0,14px,0);}
  html.js [data-rv="scale"]:not(.in){opacity:0; transform:scale(.93);}
  html.js [data-rv="pop"]:not(.in){opacity:0; scale:.35;}
  html.js [data-rv="left"]:not(.in){opacity:0; transform:translate3d(-44px,0,0);}
  html.js [data-rv="right"]:not(.in){opacity:0; transform:translate3d(44px,0,0);}
  /* eyebrow: si scopre come un tratto che scorre */
  html.js [data-rv="clip-x"]{clip-path:inset(0 0 0 0);}
  html.js [data-rv="clip-x"]:not(.in){clip-path:inset(0 100% 0 0); opacity:.2;}
  /* foto: la tavola che scorre (dal basso) con leggero rientro di scala */
  html.js [data-rv="photo"]{clip-path:inset(-40px -40px -70px -40px round 14px);}
  html.js [data-rv="photo"]:not(.in){clip-path:inset(100% 0 0 0 round 14px);}
  html.js [data-rv="photo"]:not(.in) img{scale:1.14;}
  /* foto: tavola che scorre di lato (solo clip-path, nessuno spostamento) */
  html.js [data-rv="unveil-x"]{clip-path:inset(-70px -70px -70px -70px);}
  html.js [data-rv="unveil-x"]:not(.in){clip-path:inset(0 100% 0 0); scale:1.08;}
  /* foto hero: si scopre dal basso dentro la cornice tonda */
  html.js [data-rv="unveil"]{clip-path:inset(0 0 0 0);}
  html.js [data-rv="unveil"]:not(.in){clip-path:inset(100% 0 0 0); scale:1.18;}

  /* su telefono e tablet niente movimenti orizzontali */
  @media (max-width:980px){
    html.js [data-rv="left"]:not(.in), html.js [data-rv="right"]:not(.in){transform:translate3d(0,34px,0);}
  }

  /* titoli a maschera */
  html.js [data-rv="words"]:not(.rv-done) .ws-w{clip-path:inset(-.6em -.3em 0 -.3em);}
  html.js [data-rv="words"] .ws-wi{
    transition:transform .95s var(--ws-ease-out), opacity .6s ease;
    transition-delay:calc(var(--d,0s) + var(--i,0) * var(--stag,45ms));
  }
  html.js [data-rv="words"]:not(.in) .ws-wi{transform:translate3d(0,118%,0) rotate(3deg); opacity:0;}

  /* tratti SVG che si disegnano (icone, venature, tratto a matita, anello) */
  html.js .ws-s{
    stroke-dasharray:var(--len, none);
    stroke-dashoffset:var(--len, 0);
    transition:stroke-dashoffset var(--dur,1.4s) var(--ws-ease-out) calc(var(--d,0s) + var(--dd,.2s));
  }
  html.js .in .ws-s, html.js .in.ws-s{stroke-dashoffset:0;}
  html.js .ws-ring .ws-ring-ticks{opacity:0; transition:opacity 1.2s ease calc(var(--d,0s) + .9s);}
  html.js .in .ws-ring .ws-ring-ticks{opacity:1;}
  html.js .ws-ring g{animation:wsSpin 90s linear infinite;}
  @keyframes wsSpin{to{transform:rotate(360deg);}}

  /* firma: linea che si traccia */
  html.js .signature[data-rv]::before{transform:scaleX(0); transition:transform 1.3s var(--ws-ease-out) calc(var(--d,0s) + .25s);}
  html.js .signature.in::before{transform:scaleX(1);}

  /* COME LAVORIAMO: linea tracciata allo scroll, numeri che compaiono */
  html.js .process-steps::before{clip-path:inset(0 calc((1 - var(--p, 0)) * 100%) 0 0);}
  html.js .process-steps::after{
    content:""; position:absolute; top:31px; left:12.5%;
    width:8px; height:8px; margin-left:-4px; border-radius:50%;
    background:var(--amber); box-shadow:0 0 0 3px var(--white);
    transform:translate3d(calc(var(--p, 0) * var(--lw, 0px)), 0, 0);
    opacity:var(--tip, 0); transition:opacity .4s ease;
  }
  html.js .process-step .step-num{
    transition:opacity .45s ease var(--d,0s), transform .8s var(--ws-spring) var(--d,0s), background .35s ease;
  }
  html.js .process-step.step-done .step-num{transition:opacity .45s ease, transform .35s ease, background .35s ease;}
  html.js .process-step:not(.step-on) .step-num{opacity:0; transform:scale(.35) rotate(-35deg);}
  html.js .process-step h3, html.js .process-step p{
    transition:opacity .8s var(--ws-ease), transform .9s var(--ws-ease);
    transition-delay:calc(var(--d,0s) + .15s);
  }
  html.js .process-step p{transition-delay:calc(var(--d,0s) + .25s);}
  html.js .process-step:not(.step-on) h3, html.js .process-step:not(.step-on) p{opacity:0; transform:translate3d(0,18px,0);}

  /* pulsante di chiamata: entra dopo l'apertura */
  html.js:not(.hero-in) .call-float{opacity:0; scale:.4;}
  html.js.hero-in .call-float{animation:wsPop .8s var(--ws-spring) .9s both;}
  @keyframes wsPop{from{opacity:0; scale:.4;} to{opacity:1; scale:1;}}

  /* pagine legali: niente lampo prima che lo script prepari i blocchi */
  html.js:not(.anim-on) main .container > *{opacity:0;}

  /* venature del legno che scorrono appena, come una tavola (solo desktop) */
  @media (min-width:981px) and (hover:hover) and (pointer:fine){
    html.js .wood-texture{overflow:clip;}
    html.js .wood-texture::before{left:-40px; right:-40px; transform:translate3d(var(--gx, 0px),0,0);}
  }
}

@media (max-width:980px){
  .process-steps::after{display:none;}
}

/* riduci movimento: tutto visibile subito, nessuno spostamento */
@media (prefers-reduced-motion: reduce){
  .reveal, .reveal-scale{opacity:1 !important; transform:none !important;}
  header.ws-hide{transform:none;}
  .lightbox figure{transform:none;}
}

/* === loghi fermi, niente pulsanti magnetici (richiesta cliente) === */
.brand,.brand *,.nav-wrap .brand,header.scrolled .nav-wrap .brand,.hero .floating-logo,.floating-logo,.intro-logo,.intro-logo *{animation:none!important;transition:none!important;scale:none!important;translate:none!important;rotate:none!important;opacity:1!important;clip-path:none!important;}
.hero-actions .btn,.nav-cta .btn,.process-cta .btn,#map-load{translate:none!important;}
html,body{cursor:auto!important;}