/* VESTHO v11 — movimento e carattere: header sulla foto, testo che si accende, immagine che si apre (13/11/2026) */

/* header trasparente sopra la slide della home */
body.x-over .site-header{background:transparent!important;border-bottom-color:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;transition:background .35s ease,border-color .35s ease}
body.x-over .site-header:not(.x-solid) .logo,body.x-over .site-header:not(.x-solid) .logo-by,body.x-over .site-header:not(.x-solid) .main-nav>a,body.x-over .site-header:not(.x-solid) .icon-link{color:#fff!important}
body.x-over .site-header:not(.x-solid) .btn-quote{background:rgba(255,255,255,.16)!important;color:#fff!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)!important;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
body.x-over .site-header:not(.x-solid) .nav-toggle{background:rgba(255,255,255,.14)!important;border-color:rgba(255,255,255,.4)!important}
body.x-over .site-header:not(.x-solid) .nav-toggle span{background:#fff!important}
body.x-over .site-header.x-solid{background:rgba(250,248,244,.86)!important;-webkit-backdrop-filter:saturate(1.6) blur(18px)!important;backdrop-filter:saturate(1.6) blur(18px)!important;border-bottom-color:rgba(0,0,0,.08)!important}
body.x-over main>.w-hero:first-child{margin-top:calc(-1 * var(--hh,80px));min-height:clamp(620px,calc(100svh - 36px),1040px)}
body.x-over main>.w-hero:first-child .w-in{padding-top:calc(var(--hh,80px) + 40px)}

/* un solo momento d'ingresso: la slide si compone */
@keyframes xUp{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
.w-hero .w-in>*{animation:xUp 1s cubic-bezier(.2,.7,.2,1) both}
.w-hero .w-in>*:nth-child(2){animation-delay:.12s}.w-hero .w-in>*:nth-child(3){animation-delay:.24s}.w-hero .w-in>*:nth-child(4){animation-delay:.36s}.w-hero .w-in>*:nth-child(5){animation-delay:.48s}

/* le sezioni entrano mentre scorri */
.x-rv{opacity:0;transform:translateY(30px) scale(.985);transition:opacity .9s ease,transform 1s cubic-bezier(.2,.7,.2,1)}
.x-rv.x-in{opacity:1;transform:none}

/* testo che si accende parola per parola */
.x-say{position:relative;height:230vh;background:#111;color:#fff}
.x-say-in{position:sticky;top:0;height:100svh;display:flex;align-items:center}
.x-say p{margin:0 auto;max-width:1180px;padding:0 var(--pad,24px);font-weight:600;letter-spacing:-.03em;line-height:1.14;font-size:clamp(34px,5.4vw,80px)}
.x-say p span{color:rgba(255,255,255,.18);transition:color .35s ease}
.x-say p span.on{color:#fff}
.x-say p span.br{color:rgba(233,225,211,.22)}
.x-say p span.br.on{color:#E9E1D3}

/* immagine che si apre a tutto schermo */
.x-grow{position:relative;height:210vh;background:#fff}
.x-grow-in{position:sticky;top:0;height:100svh;display:flex;align-items:center;justify-content:center;overflow:hidden}
.x-grow-f{position:relative;margin:0;width:calc(var(--g,0) * 34% + 66%);height:calc(var(--g,0) * 34vh + 62vh);border-radius:calc((1 - var(--g,0)) * 28px);overflow:hidden;background:#2B2723;will-change:width,height}
.x-grow-f img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(calc(1.12 - var(--g,0) * .12))}
.x-grow-f::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.66),rgba(0,0,0,.1) 55%);opacity:calc(var(--g,0) * 1.2)}
.x-grow-t{position:absolute;left:0;right:0;bottom:clamp(48px,9vh,96px);text-align:center;color:#fff;padding:0 24px;opacity:calc((var(--g,0) - .55) * 3);transform:translateY(calc((1 - var(--g,0)) * 40px))}
.x-grow-t h2{margin:0;font-weight:600;letter-spacing:-.03em;line-height:1.08;font-size:clamp(38px,5.6vw,84px)}
.x-grow-t p{margin:14px auto 0;max-width:620px;font-size:clamp(17px,1.5vw,21px);line-height:1.5;color:rgba(255,255,255,.9)}
.x-grow-t .a-btns{margin-top:24px}

/* i numeri */
.x-num-sec{background:#111;color:#fff;padding:clamp(72px,9vw,120px) 0}
.x-num-sec .x-h{margin:0 0 clamp(36px,5vw,56px);font-weight:600;letter-spacing:-.028em;line-height:1.12;font-size:clamp(30px,3.6vw,52px);max-width:16ch}
.x-num{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.x-num div{border-top:1px solid #3A352E;padding-top:24px}
.x-num b{display:block;font-weight:600;letter-spacing:-.04em;line-height:1;font-size:clamp(52px,6.4vw,96px);color:#fff}
.x-num span{display:block;margin-top:14px;font-size:16px;line-height:1.5;color:#CFC4B1;max-width:22ch}
@media (max-width:860px){.x-num{grid-template-columns:1fr 1fr;row-gap:40px}}

@media (max-width:760px){
  .x-say{height:200vh}
  .x-grow{height:170vh}
  .x-grow-f{width:calc(var(--g,0) * 12% + 88%);height:calc(var(--g,0) * 30vh + 60vh)}
}
@media (prefers-reduced-motion:reduce){
  .w-hero .w-in>*{animation:none}
  .x-rv{opacity:1;transform:none;transition:none}
  .x-say,.x-grow{height:auto}
  .x-say-in,.x-grow-in{position:relative;height:auto;padding:96px 0}
  .x-say p span{color:#fff}
  .x-grow-f{--g:1;width:100%;height:80vh}
}
