/* Bridge Build Hero — stili front-end. Portati dal prototipo approvato (prototipo-v9.html). */

.bbh-root{--bbh-accent:#65CCC5;--bbh-accent2:#2FA376;--bbh-accent-ink:#2a8f88;--bbh-tint:24,27,49;--bbh-paper:#efefec;
 --bbh-t1p:#181b31;--bbh-t2p:#4a4f5c;--bbh-t1r:#fff;--bbh-t2r:#d5dbe2;--bbh-btn:#65CCC5;
 --bbh-cw:1140px;--bbh-edge:max(16px,calc((100vw - var(--bbh-cw)) / 2));
 --bbh-logo-x:calc(50vw + 225px); /* centro dello spazio tra il testo (450 px) e il bordo destro del box */
 --bbh-logo-max:calc((var(--bbh-cw) - 450px) * .8); /* intro del logo (con le sue guide) dentro il box */
 position:relative;display:block;width:100%;height:var(--bbh-h,680vh);margin:0;padding:0;font-family:Barlow,system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-align:left;line-height:normal;letter-spacing:normal;text-transform:none;text-shadow:none}
.bbh-root *,.bbh-root *::before,.bbh-root *::after{box-sizing:border-box}
.bbh-root :where(h1,p,ol,li,div,span,a,strong,em,i,b){margin:0;padding:0;border:0;background:none;box-shadow:none;max-width:none;width:auto;height:auto;min-height:0;float:none;text-indent:0}
.bbh-root ol,.bbh-root li{list-style:none}

/* Estensione a tutta la finestra anche dentro un contenitore stretto. */
.bbh-root.bbh-fullbleed{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw)}
html.bbh-clip-x,body.bbh-clip-x{overflow-x:clip}

.bbh-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--bbh-paper);color:var(--bbh-t1r)}
.bbh-copy h1,.bbh-copy p,.bbh-btn,.bbh-steps li,.bbh-tb,.bbh-tb strong,.bbh-hint{transition:color .6s,background .6s,box-shadow .6s,border-color .6s}
.bbh-scrim{transition:opacity .8s}
.bbh-scrim{opacity:0}.bbh-stage.real .bbh-scrim{opacity:1}

.bbh-co{position:absolute;z-index:2;left:0;top:0;display:flex;flex-direction:column;align-items:center;pointer-events:none;opacity:0;transition:opacity .35s;will-change:transform}
.bbh-co span{font:600 12px/1 "Barlow Condensed",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#181b31;background:#fff;border-left:3px solid var(--bbh-accent);padding:8px 11px;white-space:nowrap;box-shadow:0 6px 18px rgba(24,27,49,.14)}
.bbh-co i{display:block;width:1px;height:42px;background:var(--bbh-accent)}
.bbh-co b{display:block;width:10px;height:10px;border-radius:50%;background:var(--bbh-accent);box-shadow:0 0 0 5px rgba(255,255,255,.18)}

/* Area utile: sotto la fascia coperta dal menu del sito. Percentuali e centrature dei figli sono riferite a questa area. */
.bbh-ui{position:absolute;z-index:auto;left:0;right:0;bottom:0;top:var(--bbh-top,0px);pointer-events:none}
.bbh-ui>*{pointer-events:auto}
.bbh-logo{position:absolute;z-index:1;left:var(--lx,var(--bbh-logo-x));top:var(--ly,44%);width:var(--lw,46vw);max-width:min(var(--lmax,860px),var(--bbh-logo-max));transform:translate(-50%,-50%);pointer-events:none}
.bbh-logo svg{width:100%;height:auto;display:block;overflow:visible}
.bbh-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.bbh-scrim{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(90deg,rgba(var(--bbh-tint),.86) 0%,rgba(var(--bbh-tint),.6) 30%,rgba(var(--bbh-tint),.15) 50%,rgba(var(--bbh-tint),0) 62%)}

.bbh-copy{position:absolute;z-index:3;left:max(16px,calc((100% - var(--bbh-cw)) / 2));top:clamp(84px,14vh,150px);max-width:540px;padding-right:16px}
.bbh-kicker{font:500 13px/1 "Barlow Condensed",sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--bbh-accent);display:flex;gap:.6em;align-items:center}
.bbh-kicker i{display:inline-block;width:28px;height:1px;background:currentColor}
.bbh-copy h1{font:600 clamp(40px,6vw,86px)/.95 Barlow,sans-serif;letter-spacing:-.02em;margin:18px 0;color:var(--bbh-t1r);text-shadow:0 2px 30px rgba(10,12,30,.35)}
.bbh-copy h1 em{font-style:normal;background:linear-gradient(90deg,var(--bbh-accent),var(--bbh-accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.bbh-copy p{font:300 clamp(16px,1.3vw,19px)/1.5 Barlow,sans-serif;color:var(--bbh-t2r);max-width:430px}
.bbh-cta{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}
.bbh-btn,.bbh-btn:hover,.bbh-btn:focus{font:600 14px/1 Barlow,sans-serif;letter-spacing:.04em;padding:15px 24px;border-radius:var(--bbh-radius,10px);text-decoration:none;color:var(--bbh-b1-text,#181b31);background:linear-gradient(90deg,var(--bbh-btn),var(--bbh-b1-bg2,var(--bbh-accent2)));box-shadow:inset 0 0 0 1px var(--bbh-b1-border,transparent)}
.bbh-btn:hover{filter:brightness(1.06)}
.bbh-btn.ghost,.bbh-btn.ghost:hover,.bbh-btn.ghost:focus{background:var(--bbh-b2-bg,rgba(var(--bbh-tint),.25));color:var(--bbh-b2-text,var(--bbh-t1r));box-shadow:inset 0 0 0 1px var(--bbh-b2-border,rgba(255,255,255,.4));backdrop-filter:blur(4px)}

.bbh-steps{position:absolute;z-index:3;right:max(16px,calc((100% - var(--bbh-cw)) / 2));top:50%;transform:translateY(-50%);list-style:none;font:500 12px/1 "Barlow Condensed",sans-serif;letter-spacing:.16em;text-transform:uppercase;text-shadow:0 1px 8px rgba(10,12,30,.7);transition:opacity .6s,transform .6s}
.bbh-steps[hidden]{display:none}
.bbh-steps li{display:flex;align-items:center;gap:12px;justify-content:flex-end;padding:11px 0;color:rgba(255,255,255,.45);transition:color .4s}
.bbh-steps li b{font-weight:500;width:22px;text-align:right}
.bbh-steps li::after{content:"";width:6px;height:6px;border-radius:50%;border:1px solid currentColor;transition:background .4s}
.bbh-steps li.on{color:var(--bbh-t1r)}.bbh-steps li.on::after{background:var(--bbh-accent);border-color:var(--bbh-accent)}
.bbh-steps li.cur{color:var(--bbh-accent)}
.bbh-stage.intro .bbh-steps{opacity:0;transform:translate(14px,-50%);pointer-events:none}

.bbh-tb{position:absolute;z-index:3;right:max(16px,calc((100% - var(--bbh-cw)) / 2));bottom:clamp(16px,4vh,40px);border:1px solid rgba(101,204,197,.45);font:400 11px/1.3 "Barlow Condensed",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--bbh-accent);display:grid;grid-template-columns:1fr 1fr 1fr;background:rgba(var(--bbh-tint),.62);backdrop-filter:blur(6px)}
.bbh-tb div{padding:7px 12px;border-right:1px solid rgba(101,204,197,.3)}.bbh-tb div:last-child{border-right:0}
.bbh-tb strong{display:block;font-weight:600;color:var(--bbh-t1r);font-size:13px;font-variant-numeric:tabular-nums}
.bbh-bar{position:absolute;z-index:3;left:0;bottom:0;height:2px;width:100%;background:linear-gradient(90deg,var(--bbh-accent),var(--bbh-accent2));transform-origin:0 50%;transform:scaleX(0)}
.bbh-hint{position:absolute;z-index:3;left:50%;bottom:24px;transform:translateX(-50%);font:500 14px/1 "Barlow Condensed",sans-serif;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.6);transition:opacity .4s}
.bbh-hint::after{content:"";display:block;width:1px;height:36px;margin:12px auto 0;background:linear-gradient(var(--bbh-accent),transparent)}

/* Caricamento: sulla carta, piccolo, in basso; il logo si disegna mentre il modulo 3D arriva. */
/* Link "salta l'animazione": compare quando l'animazione parte (al posto di "Scorri"), stile secondario. */
.bbh-root .bbh-skip{all:unset;box-sizing:border-box;position:absolute;z-index:4;left:50%;bottom:24px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:10px;cursor:pointer;white-space:nowrap;font:500 13px/1 "Barlow Condensed",sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--bbh-t1r);padding:8px 2px;border-bottom:1px solid currentColor;opacity:0;pointer-events:none;transition:opacity .4s,color .6s}
.bbh-root .bbh-skip::after{content:"";width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px)}
.bbh-root .bbh-stage.skip-on .bbh-skip{opacity:.85;pointer-events:auto}
.bbh-root .bbh-stage.skip-on .bbh-skip:hover{opacity:1}
.bbh-root .bbh-skip:focus-visible{outline:2px solid var(--bbh-accent);outline-offset:4px}
.bbh-root .bbh-stage.paper .bbh-skip{color:var(--bbh-t1p)}
.bbh-root.bbh-static .bbh-skip,.bbh-root.bbh-fallback .bbh-skip{display:none}

.bbh-load{position:absolute;left:0;right:0;bottom:104px;z-index:4;text-align:center;pointer-events:none;font:500 12px "Barlow Condensed",sans-serif;letter-spacing:.3em;text-transform:uppercase;color:var(--bbh-accent-ink);transition:opacity .6s}
.bbh-root.bbh-ready .bbh-load,.bbh-root.bbh-fallback .bbh-load{opacity:0}

/* Fase "tavola" (carta bianca): testi scuri. */
.bbh-stage.paper .bbh-copy h1{color:var(--bbh-t1p);text-shadow:none}
.bbh-stage.paper .bbh-copy p{color:var(--bbh-t2p)}
.bbh-stage.paper .bbh-btn.ghost{color:var(--bbh-b2-text,var(--bbh-t1p));background:var(--bbh-b2-bg,transparent);box-shadow:inset 0 0 0 1px var(--bbh-b2-border,rgba(24,27,49,.3))}
.bbh-stage.paper .bbh-steps{text-shadow:none}
.bbh-stage.paper .bbh-steps li{color:rgba(24,27,49,.32)}
.bbh-stage.paper .bbh-steps li.on{color:var(--bbh-t1p)}
.bbh-stage.paper .bbh-steps li.cur{color:var(--bbh-accent-ink)}
.bbh-stage.paper .bbh-steps li.cur span{font-size:14px}
.bbh-stage.paper .bbh-tb{background:rgba(255,255,255,.65);color:#7a7f88;border-color:rgba(24,27,49,.18)}
.bbh-stage.paper .bbh-tb div{border-color:rgba(24,27,49,.12)}
.bbh-stage.paper .bbh-tb strong{color:var(--bbh-t1p)}
.bbh-stage.paper .bbh-hint{color:rgba(24,27,49,.55)}

/* Tablet. */
@media (max-width:1024px){
  .bbh-root{height:var(--bbh-h-t,var(--bbh-h,680vh))}
  .bbh-ui{top:var(--bbh-top-t,var(--bbh-top,0px))}
  .bbh-logo{left:var(--lx-t,var(--bbh-logo-x));top:var(--ly-t,44%);width:var(--lw-t,46vw);max-width:min(var(--lmax-t,860px),var(--bbh-logo-max))}
}
/* Mobile: pianta ruotata, logo sotto i pulsanti, niente elenco fasi, cartiglio a tutta larghezza. */
@media (max-width:820px){
  .bbh-root{height:var(--bbh-h-m,var(--bbh-h-t,var(--bbh-h,580vh)))}
  .bbh-ui{top:var(--bbh-top-m,var(--bbh-top-t,var(--bbh-top,0px)))}
  .bbh-steps,.bbh-hint{display:none}
  .bbh-scrim{background:linear-gradient(180deg,rgba(var(--bbh-tint),.9) 0%,rgba(var(--bbh-tint),.65) 40%,rgba(var(--bbh-tint),0) 60%)}
  .bbh-copy{top:76px;left:clamp(16px,6vw,96px)}
  .bbh-copy p{font-size:15px;max-width:340px}
  .bbh-cta{margin-top:20px}
  .bbh-root.bbh-nobtn-m .bbh-cta{display:none}
  .bbh-root .bbh-skip{bottom:78px}
  .bbh-tb{left:16px;right:16px;bottom:18px}
  .bbh-logo{left:var(--lx-m,50%);top:var(--ly-m,67%);width:var(--lw-m,90vw);max-width:var(--lmax-m,860px)}
}

/* Senza WebGL: la hero resta leggibile come composizione statica scura. */
.bbh-root.bbh-fallback .bbh-canvas,.bbh-root.bbh-fallback .bbh-logo,.bbh-root.bbh-fallback .bbh-co{display:none}
.bbh-root.bbh-fallback .bbh-stage{background:radial-gradient(120% 90% at 80% 100%,rgba(var(--bbh-tint),.6),transparent 60%),linear-gradient(135deg,rgb(var(--bbh-tint)),#0d0f1d)}
.bbh-root.bbh-fallback .bbh-scrim{opacity:0}
.bbh-root.bbh-fallback .bbh-steps{opacity:1;transform:translateY(-50%)}

/* Senza pista di scroll: movimento ridotto, anteprima nell'editor, fallback. */
.bbh-root.bbh-static{height:100vh;height:100svh}
.bbh-root.bbh-static .bbh-stage{position:relative}
.bbh-root.bbh-static .bbh-hint{display:none}

@media (prefers-reduced-motion:reduce){
  .bbh-copy h1,.bbh-copy p,.bbh-btn,.bbh-steps li,.bbh-tb,.bbh-tb strong,.bbh-hint,.bbh-scrim{transition:none}
}