/* ==========================================================
   HOME - Hero "finestra che si apre" (prefisso ggh-)
   Markup: elemento Raw HTML, file hero-gruppogreen.html
   ========================================================== */
/* Salient mette body{overflow:hidden}, che blocca position:sticky.
   Solo sulla pagina con la hero: clip taglia lo sforamento laterale
   come prima ma non crea un contenitore di scorrimento. */
body:has(.ggh){overflow:visible;overflow-x:clip}

.ggh{
  --ggh-green:#159238;
  --ggh-dark:#323333;
  --ggh-hh:172px; /* altezza header (barra recensioni 52 + header 120): il testo si centra nello spazio sotto */
  position:relative;
  height:260vh;
  color:#fff;
  font-family:'Open Sans',Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.ggh *,.ggh *::before,.ggh *::after{box-sizing:border-box}
.ggh h1,.ggh h2,.ggh p{margin:0;padding:0}

.ggh-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--ggh-dark)}
.ggh-layer{position:absolute;inset:0}

/* vista che si scopre */
.ggh-view{will-change:transform}
.ggh .ggh-view img{display:block;width:100% !important;height:100% !important;max-width:none !important;object-fit:cover}

/* luce che entra dallo spiraglio */
.ggh-glow{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;
  background:radial-gradient(ellipse 22% 70% at 50% 50%,rgba(255,255,255,.95) 0%,rgba(255,255,255,.35) 40%,rgba(255,255,255,0) 75%)}

/* ante */
.ggh-sashes{z-index:5;perspective:1500px;perspective-origin:50% 45%}
.ggh-sash{position:absolute;top:0;bottom:0;width:50%;overflow:hidden;will-change:transform;backface-visibility:hidden}
.ggh-sash--l{left:0;width:calc(50% + 1px);transform-origin:0 50%}
.ggh-sash--r{right:0;transform-origin:100% 50%}
.ggh .ggh-sash > img{display:block;position:absolute;top:0;height:100% !important;width:200% !important;max-width:none !important;object-fit:cover}
.ggh .ggh-sash--l > img{left:0}
.ggh .ggh-sash--r > img{right:0}
.ggh-dim{position:absolute;inset:0;background:#000;opacity:0}

.ggh-shade{position:absolute;inset:0;z-index:8;pointer-events:none;
  background:linear-gradient(to bottom,rgba(0,0,0,.55) 0%,rgba(0,0,0,.22) 30%,rgba(0,0,0,.32) 62%,rgba(0,0,0,.62) 100%)}

/* testi */
.ggh-content{position:absolute;z-index:10;left:50%;top:calc(50% + var(--ggh-hh) / 2);width:min(980px,90vw);text-align:center;transform:translate(-50%,-50%)}
.ggh-inner{will-change:transform}
.ggh-msg{width:100%}
.ggh-m2{position:absolute;left:0;top:50%;transform:translateY(-50%);pointer-events:none}
.ggh .ggh-title{max-width:15ch;margin:0 auto;padding:0;text-wrap:balance;color:#fff;font-family:'Outfit',sans-serif;font-weight:500;font-size:clamp(40px,5.6vw,86px);line-height:1.04;letter-spacing:-.02em;text-shadow:0 2px 30px rgba(0,0,0,.25)}
.ggh-split .ggh-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.ggh-split .ggh-w > span,.ggh-split .ggh-sc{display:inline-block}
.ggh-m1 .ggh-split .ggh-w > span{transform:translateY(110%);transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.ggh-m2 .ggh-split .ggh-sc{transform:translateY(110%)}
.ggh-m2 .ggh-text,.ggh-m2 .ggh-btns{opacity:0}
.ggh .ggh-text{font-family:'Outfit',sans-serif;font-size:clamp(15px,1.25vw,18px);line-height:1.6;max-width:640px;margin:22px auto 0;padding:0;color:rgba(255,255,255,.92);text-shadow:0 1px 14px rgba(0,0,0,.55)}
.ggh-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:34px}
.ggh a.ggh-btn{font-family:'Outfit',sans-serif;font-weight:400;font-size:17px;line-height:1;height:50px;padding:0 26px;display:inline-flex;align-items:center;border-radius:200px;text-decoration:none;color:#fff;transition:transform .25s}
.ggh a.ggh-btn:hover{transform:translateY(-2px);color:#fff}
.ggh a.ggh-btn--primary{background:var(--ggh-green)}
.ggh-fade{opacity:0;transform:translateY(16px);transition:opacity .8s ease,transform .8s ease}
.ggh.is-ready .ggh-m1 .ggh-split .ggh-w > span{transform:none}
.ggh.is-ready .ggh-fade{opacity:1;transform:none}

/* invito a scorrere */
.ggh-hint{position:absolute;z-index:10;left:50%;bottom:3.5vh;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;font:300 12px 'Outfit',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.85);transition:opacity .3s}
.ggh-bar{width:1px;height:38px;background:rgba(255,255,255,.3);position:relative;overflow:hidden}
.ggh-bar::after{content:"";position:absolute;left:0;top:-50%;width:100%;height:50%;background:#fff;animation:ggh-drip 1.8s ease-in-out infinite}
@keyframes ggh-drip{to{top:100%}}

@media (max-width:1199px){
  .ggh{--ggh-hh:131px} /* header mobile Salient (sotto 1200px) */
}
@media (max-width:767px){
  .ggh{height:210vh}
  .ggh-content{top:calc(50% + var(--ggh-hh) / 2 - 2vh)}
  .ggh .ggh-title{font-size:clamp(34px,10.5vw,46px)}
  .ggh .ggh-text{font-size:15px;margin-top:16px}
  .ggh a.ggh-btn{font-size:15px;height:46px;padding:0 20px}
  .ggh-msg.ggh-m1{width:90%;margin:0 auto}
}
@media (prefers-reduced-motion:reduce){
  .ggh-bar::after{animation:none}
  .ggh-m1 .ggh-w > span,.ggh-fade{transition:none}
}