/* Prima schermata della home: il software sale dal cantiere.
   Segnaposti sulla foto = le schede Costi / BIM 3D / Sicurezza (asset/js/immersive.js).
   Movimento allo scorrimento in asset/js/hero-motion.js. */
.hm-hero{--hm-bg:#080f14;--hm-fg:#f6f5f0;--hm-muted:#c1ced6;--hm-accent:#ffd800;--hm-win:58%;--hm-ease:cubic-bezier(.22,1,.36,1);background:var(--hm-bg);color:var(--hm-fg);height:clamp(680px,calc(100svh - 88px),880px);overflow:hidden}
.hm-hero ::selection{background:#ffd80055}
.hm-hero .hm-layout{position:relative;z-index:3;display:block;height:100%;min-height:0;padding-top:clamp(36px,5.2vh,60px)!important;padding-bottom:32px!important;pointer-events:none}
.hm-hero .hm-copy{position:relative;max-width:min(40vw,560px);pointer-events:auto}
.hm-hero h1{font-size:clamp(3.4rem,min(7vw,12.6vh),6.6rem);line-height:.98;letter-spacing:-.045em;margin:0 0 clamp(16px,2.6vh,26px);text-shadow:0 16px 38px #0007}
.hm-hero .i-hero-purpose{font-size:clamp(1.05rem,1.5vw,1.3rem);line-height:1.4;font-weight:600;max-width:24em;margin:0 0 10px;color:var(--hm-fg)}
.hm-hero .i-hero-description{font-size:.96rem;line-height:1.6;max-width:27em;margin:0 0 clamp(18px,3vh,28px);color:var(--hm-muted);text-shadow:0 2px 18px #0009}
.hm-hero .btn{gap:26px;padding:16px 24px}
.hm-hero .btn .e-arrow{transition:transform .25s var(--hm-ease)}
.hm-hero .btn:hover .e-arrow{transform:translate(3px,-3px)}
.hm-hero .b-hero-products{margin-top:clamp(16px,2.8vh,26px);gap:20px}
.hm-hero .i-hero-note{margin:clamp(10px,1.8vh,16px) 0 0;font-size:.78rem;color:var(--hm-muted)}

/* Il palcoscenico riempie la sezione, sotto il testo */
.hm-stage{position:absolute;inset:0;z-index:2;padding:0;animation:none!important;transform:none!important;perspective:1700px;perspective-origin:70% 100%}
.hm-cantiere{position:absolute;top:0;bottom:0;right:0;aspect-ratio:3/2;will-change:transform}
.hm-hero .hm-scena{position:absolute;inset:0;width:100%;height:100%;right:auto;bottom:auto;object-fit:cover;z-index:0;-webkit-mask-image:linear-gradient(90deg,transparent 15%,#000 40%);mask-image:linear-gradient(90deg,transparent 15%,#000 40%)}

/* Segnaposti sul cantiere: ogni scheda porta il suo filo a piombo fino al software */
.hm-hero .hm-pins{position:absolute;inset:0;margin:0;border:0;width:auto;max-width:none;display:block}
.hm-pin{position:absolute;display:flex;flex-direction:column;align-items:flex-start;top:var(--y);left:var(--x);bottom:calc(100% - var(--hm-win));pointer-events:none}
.hm-pin::after{content:"";flex:1;width:0;margin-left:17px;border-left:1.5px dashed var(--hm-accent);opacity:0;transform:scaleY(0);transform-origin:top;transition:transform .45s var(--hm-ease),opacity .2s}
.hm-pin:has([aria-selected=true])::after{opacity:1;transform:scaleY(1)}
.hm-hero .hm-pin .i-mode{pointer-events:auto;display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:7px 15px 7px 11px;border:1px solid #ffffff3d;border-radius:999px;background:#080f14b8;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--hm-fg);font:600 .82rem 'Manrope',sans-serif;white-space:nowrap;box-shadow:0 8px 24px #0006;transition:background-color .2s,color .2s,border-color .2s,transform .2s var(--hm-ease)}
.hm-hero .hm-pin .i-mode::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--hm-accent);box-shadow:0 0 0 3px #ffd80033}
.hm-hero .hm-pin .i-mode:hover{border-color:var(--hm-accent);transform:translateY(-2px)}
.hm-hero .hm-pin .i-mode:active{transform:scale(.97)}
.hm-hero .hm-pin .i-mode[aria-selected=true]{background:var(--hm-accent);border-color:var(--hm-accent);color:#10171d}
.hm-hero .hm-pin .i-mode[aria-selected=true]::before{background:#10171d;box-shadow:none}

/* Il software: entra dal bordo basso e, scorrendo, sale e si raddrizza */
.hm-finestra{position:absolute;z-index:2;top:var(--hm-win);right:clamp(24px,calc((100vw - 1320px)/2),140px);width:min(55vw,820px);transform-origin:50% 100%;transform:rotateX(calc(var(--hm-t-inv,1)*8deg)) translateY(calc(var(--hm-t,0)*-30vh)) scale(calc(.97 + var(--hm-t,0)*.03));will-change:transform}
.hm-hero .hm-finestra .i-stage-window{border-radius:10px;border:1px solid #ffffff2b;background:#101b23;box-shadow:0 -26px 80px #000a,0 0 0 1px #0006}
.hm-hero .hm-finestra .i-stage-view{display:flex;flex-direction:column}
.hm-hero .hm-finestra .i-stage-view[hidden]{display:none}
.hm-hero .hm-finestra .i-stage-caption{order:-1;align-items:center;justify-content:flex-start;gap:18px;padding:10px 16px;font-size:.78rem;font-weight:600;border-bottom:1px solid #ffffff17;color:var(--hm-fg)}
.hm-hero .hm-finestra .i-stage-caption a{white-space:nowrap;font-weight:700}
.hm-hero .hm-finestra .i-stage-image{aspect-ratio:2494/1590}

/* Entrata: si conclude entro 1,5 s; senza animazioni resta tutto visibile */
@media(min-width:901px) and (prefers-reduced-motion:no-preference){
  .hm-hero .hm-copy{animation:none}
  .hm-hero h1,.hm-hero .i-hero-purpose,.hm-hero .i-hero-description,.hm-hero .btn,.hm-hero .b-hero-products,.hm-hero .i-hero-note{animation:hm-sale .8s var(--hm-ease) both}
  .hm-hero .i-hero-purpose{animation-delay:.12s}.hm-hero .i-hero-description{animation-delay:.2s}.hm-hero .btn{animation-delay:.28s}.hm-hero .b-hero-products{animation-delay:.36s}.hm-hero .i-hero-note{animation-delay:.42s}
  .hm-hero .hm-scena{animation:hm-assesta 1.5s var(--hm-ease) both}
  .hm-finestra .i-stage-window{animation:hm-emerge 1s .3s var(--hm-ease) both}
  .hm-pin .i-mode{animation:hm-pin .6s var(--hm-ease) both;animation-delay:calc(.55s + var(--i)*.12s)}
  @keyframes hm-sale{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
  @keyframes hm-assesta{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:none}}
  @keyframes hm-emerge{from{opacity:0;transform:translateY(90px)}to{opacity:1;transform:none}}
  @keyframes hm-pin{from{opacity:0;transform:translateY(-10px) scale(.92)}to{opacity:1;transform:none}}
}

/* Computer con finestra bassa o stretta */
@media(max-width:1180px){.hm-hero .i-hero-description{max-width:24em}.hm-finestra{width:56vw;right:20px}.hm-cantiere{right:-13vw}.hm-hero .hm-scena{-webkit-mask-image:linear-gradient(90deg,transparent 18%,#000 42%);mask-image:linear-gradient(90deg,transparent 18%,#000 42%)}}
@media(max-height:760px) and (min-width:901px){.hm-hero .i-hero-note{display:none}.hm-hero{--hm-win:60%}}

/* Telefono e tablet: testo, cantiere con le schede sotto, software sovrapposto, poi il resto */
@media(max-width:900px){
  .hm-hero{height:auto;display:flex;flex-direction:column}
  .hm-hero .hm-layout{display:contents}
  .hm-hero .hm-copy{display:contents}
  .hm-hero h1{order:1;font-size:clamp(3rem,14vw,4.6rem);margin:26px 20px 14px}
  .hm-hero .i-hero-purpose{order:2;margin:0 20px 18px;font-size:1.1rem}
  .hm-hero .btn{order:3;align-self:flex-start;margin:0 20px 14px;min-height:48px}
  .hm-stage{order:4;position:relative;inset:auto;perspective:none;margin-bottom:26px;display:flex;flex-direction:column;min-width:0}
  .hm-cantiere{display:contents;transform:none!important}
  .hm-hero .hm-scena{position:relative;inset:auto;display:block;width:100%;height:clamp(190px,54vw,340px);aspect-ratio:auto;object-position:78% 22%;-webkit-mask-image:linear-gradient(180deg,#000 60%,transparent);mask-image:linear-gradient(180deg,#000 60%,transparent)}
  .hm-hero .hm-pins{position:relative;inset:auto;display:flex;gap:6px;margin:-26px 20px 12px;z-index:3}
  .hm-pin{position:static;flex:1;display:block}
  .hm-pin::after{display:none}
  .hm-hero .hm-pin .i-mode{width:100%;justify-content:center;min-height:46px;padding:8px 6px;font-size:.8rem}
  .hm-finestra{position:relative;top:auto;right:auto;width:auto;margin:0 20px;transform:none!important}
  .hm-hero .hm-finestra .i-stage-window{box-shadow:0 14px 40px #000a}
  .hm-hero .hm-finestra .i-stage-caption{flex-wrap:wrap;gap:2px 14px;padding:9px 12px}
  .hm-hero .i-hero-description{order:5;margin:0 20px 18px;max-width:none}
  .hm-hero .b-hero-products{order:6;margin:0 20px}
  .hm-hero .i-hero-note{order:7;margin:16px 20px 36px}
}
@media(prefers-reduced-motion:reduce){.hm-finestra{transform:none!important}.hm-cantiere{transform:none!important}.hm-pin::after{transition:none}}