/* Hub: navigazione condivisa tra proposta, prototipo, insight e Figma */
:root{
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --ease-in-out:cubic-bezier(0.77,0,0.175,1);
  --hub-h:44px;
  --hub-bg:#0b0b0b; --hub-fg:#f0efec; --hub-muted:#a3a39e; --hub-blue:#1a3dff; --hub-hair:#262930;
}
@view-transition{navigation:auto}
::view-transition-old(root){animation:hub-out 160ms var(--ease-out) both}
::view-transition-new(root){animation:hub-in 260ms var(--ease-out) both}
@keyframes hub-out{to{opacity:0;transform:translateY(-6px)}}
@keyframes hub-in{from{opacity:0;transform:translateY(8px)}}
.hub{view-transition-name:hub;position:sticky;top:0;z-index:40;height:var(--hub-h);background:var(--hub-bg);color:var(--hub-fg);font:13px/1 "Inter",system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;border-bottom:1px solid var(--hub-hair)}
.hub-in{max-width:1240px;margin:0 auto;padding:0 32px;height:100%;display:flex;align-items:center;gap:20px}
@media (max-width:640px){.hub-in{padding:0 16px;gap:12px}}
.hub-brand{display:inline-flex;align-items:center;gap:10px;color:inherit;text-decoration:none;font-weight:500;white-space:nowrap;flex:0 0 auto}
.hub-sq{width:12px;height:12px;background:var(--hub-blue);transition:transform 320ms var(--ease-out);will-change:transform}
.hub-brand:hover .hub-sq{transform:rotate(90deg) scale(1.15)}
.hub-brand em{font-style:normal;color:var(--hub-muted);font-weight:400}
@media (max-width:640px){.hub-brand em{display:none}}
.hub-tabs{position:relative;display:inline-flex;flex:0 1 auto;max-width:100%;overflow-x:auto;scrollbar-width:none;margin-left:auto}
.hub-tabs::-webkit-scrollbar{display:none}
.hub-list{display:inline-flex;gap:2px;padding:4px;border-radius:6px;white-space:nowrap}
.hub-list a{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:4px;color:var(--hub-muted);text-decoration:none;font-weight:500;transition:color 160ms ease;position:relative}
.hub-list a:hover{color:var(--hub-fg)}
.hub-list a:active{transform:scale(0.97)}
.hub-list a .k{font-size:11px;color:inherit;opacity:.8}
.hub-list-on{position:absolute;inset:0;background:var(--hub-fg);color:var(--hub-bg);pointer-events:none;clip-path:inset(0 100% 0 0 round 4px);transition:clip-path 280ms var(--ease-out)}
.hub-list-on a{color:var(--hub-bg)}
.hub-list-on a .k{opacity:.5}
.hub-list a:focus-visible{outline:2px solid var(--hub-blue);outline-offset:-2px}
.hub-next{display:inline-flex;align-items:center;gap:8px;color:var(--hub-muted);text-decoration:none;white-space:nowrap;flex:0 0 auto;transition:color 160ms ease}
.hub-next:hover{color:var(--hub-fg)}
.hub-next i{display:inline-block;width:14px;height:1px;background:currentColor;position:relative;transition:transform 240ms var(--ease-out)}
.hub-next i::after{content:"";position:absolute;right:0;top:-3px;width:6px;height:6px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.hub-next:hover i{transform:translateX(4px)}
@media (max-width:900px){.hub-next{display:none}}
/* le pagine con header sticky scendono sotto l'hub */
.hub ~ .top,.hub ~ header.top{top:var(--hub-h)}
html{scroll-padding-top:calc(var(--hub-h) + 90px)}

/* Reveal on scroll (generico) */
[data-reveal]{opacity:0;transform:translateY(14px);transition:opacity 480ms var(--ease-out),transform 480ms var(--ease-out);transition-delay:calc(var(--i,0) * 60ms)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal="clip"]{transform:none;clip-path:inset(0 0 100% 0);transition:clip-path 640ms var(--ease-in-out),opacity 300ms ease}
[data-reveal="clip"].in{clip-path:inset(0 0 0 0)}
/* pressione dei pulsanti */
.btn,.chip,.seg button,.hub-list a{transition-property:transform,color,background-color,border-color;transition-duration:160ms;transition-timing-function:var(--ease-out)}
.btn:active,.seg button:active{transform:scale(0.97)}
@media print{[data-reveal]{opacity:1;transform:none;clip-path:none}}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{transform:none;transition:opacity 200ms ease;clip-path:none}
  .hub-list-on{transition:none}
  .hub-sq,.hub-next i{transition:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}