/* Transizioni immersive + sfondo interattivo (20/10), spunto: belgradearbor.rs (Awwwards SOTD 17/10/2026, Square43 Studio)
   1 dal progetto all'impianto: schizzo d'architetto che si traccia e diventa render (intro di Belgrade Arbor)
   2 sfondo WebGL fisso: colore per capitolo, luce calda e griglia da progetto che si piega sotto il mouse
   3 parole giganti dietro le sezioni
   4 foto a schegge irregolari che si ricompongono (le "chiome" di Belgrade Arbor)
   5 la villa del progetto che si allarga fino a tutto schermo (sezione Location)
   6 anteprima che segue il mouse sui passi di "Come lavoriamo" (elenco appartamenti)
   7 contatti che si aprono a lamelle come tende (tende della sezione Location)
   8 indicatore di sezione */

/* 2 · sfondo */
html{background:var(--bg)}
body{background:transparent}
#bg-gl{position:fixed;inset:0;width:100vw;height:100vh;height:100lvh;z-index:-1;display:block;pointer-events:none}
.sec{background:transparent!important;overflow-x:clip}
.sec>.wrap{position:relative;z-index:1}

/* 1 · dal progetto all'impianto */
.im-plan{position:relative;height:330vh;z-index:1;background:transparent}
.im-plan__stick{position:sticky;top:0;height:100vh;height:100lvh;overflow:hidden}
.im-plan__ac,.im-plan__sk,.im-plan__rd{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.im-plan__ac{transform-origin:50% 40%}
.im-plan__sk{mix-blend-mode:screen;clip-path:inset(0 100% 0 0)}
.im-plan__rd{clip-path:polygon(0% 100%,22% 100%,48% 100%,74% 100%,100% 100%,100% 100%)}
.im-plan__fade{position:absolute;inset:0;background:radial-gradient(130% 90% at 50% 45%,transparent 35%,rgba(11,10,13,.9));pointer-events:none}
.im-plan__ui{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(40px,8vh,90px);display:flex;justify-content:space-between;align-items:flex-end;gap:24px;pointer-events:none}
.im-plan__h{font:600 clamp(40px,6.4vw,104px)/.98 var(--f-h);letter-spacing:-.045em;text-shadow:0 6px 40px rgba(0,0,0,.6)}
.im-plan__h span{display:block;overflow:hidden}
.im-plan__h span>i{display:block;font-style:normal}
.im-plan__h em{font-style:normal;color:var(--gold)}
.im-plan__step{font:500 11px/1.6 var(--f-m);letter-spacing:.12em;text-transform:uppercase;color:var(--mut);text-align:right;min-width:16ch}
.im-plan__step b{display:block;color:var(--tx);font-weight:500}
.im-plan__ticks{position:absolute;inset:0;pointer-events:none;opacity:0}
.im-plan__ticks i{position:absolute;background:rgba(246,244,249,.35)}
.im-plan__ticks i:nth-child(1){left:var(--pad);right:var(--pad);top:calc(var(--hdr) + 24px);height:1px}
.im-plan__ticks i:nth-child(2){left:var(--pad);top:calc(var(--hdr) + 24px);bottom:24px;width:1px}
.im-plan__ticks i:nth-child(3){right:var(--pad);top:calc(var(--hdr) + 24px);bottom:24px;width:1px}

/* 3 · parole giganti */
.gw{position:absolute;left:0;top:clamp(20px,4vw,60px);z-index:0;white-space:nowrap;pointer-events:none;user-select:none;
  font:700 clamp(110px,21vw,340px)/.85 var(--f-h);letter-spacing:-.06em;text-transform:uppercase;color:transparent;
  -webkit-text-stroke:1px rgba(246,244,249,.16);will-change:transform}

/* 4 · schegge */
.im-shard{clip-path:polygon(10% 16%,58% 0%,100% 24%,90% 88%,36% 100%,0% 66%);will-change:clip-path}
.im-shard img{transform:scale(1.18);will-change:transform}

/* 5 · villa che si allarga */
.im-grow{position:relative;height:220vh;z-index:1}
.im-grow__stick{position:sticky;top:0;height:100vh;height:100lvh;overflow:hidden;display:grid;place-items:center}
.im-grow__word{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);white-space:nowrap;font:700 clamp(84px,17vw,280px)/.9 var(--f-h);letter-spacing:-.06em;text-transform:uppercase;color:var(--tx);opacity:.9}
.im-grow__card{position:relative;width:34vw;aspect-ratio:16/10;border-radius:22px;overflow:hidden;box-shadow:0 40px 90px -30px rgba(0,0,0,.85);will-change:width,height,border-radius}
.im-grow__card img{width:100%;height:100%;object-fit:cover;transform:scale(1.25)}
.im-grow__cap{position:absolute;left:var(--pad);bottom:clamp(36px,7vh,80px);font:500 11px/1.6 var(--f-m);letter-spacing:.12em;text-transform:uppercase;color:var(--tx);opacity:0;text-shadow:0 2px 14px rgba(0,0,0,.7)}
.im-grow__cap b{display:block;font:600 clamp(30px,3.6vw,52px)/1 var(--f-h);letter-spacing:-.03em;text-transform:none;margin-top:8px}

/* 6 · anteprima che segue il mouse */
.im-peek{position:fixed;left:0;top:0;z-index:30;width:300px;aspect-ratio:4/3;border-radius:16px;overflow:hidden;pointer-events:none;
  opacity:0;transform:translate3d(-50%,-50%,0) scale(.6) rotate(-4deg);transition:opacity .35s,transform .45s var(--ease);box-shadow:0 30px 70px -20px rgba(0,0,0,.8)}
.im-peek.on{opacity:1}
.im-peek img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s}
.im-peek img.on{opacity:1}
.steps li{cursor:default;transition:color .3s}

/* 7 · lamelle sui contatti */
.contact{isolation:isolate}
.im-blinds{position:absolute;inset:0;z-index:5;display:flex;pointer-events:none}
.im-blinds i{flex:1;background:linear-gradient(180deg,#1a1620,#0e0c11);transform-origin:50% 50%;border-right:1px solid rgba(255,255,255,.04)}

/* 8 · indicatore */
.tx-idx{position:fixed;left:var(--pad);bottom:28px;z-index:40;display:flex;align-items:center;gap:10px;font:500 11px/1 var(--f-m);letter-spacing:.1em;text-transform:uppercase;color:var(--mut);
  padding:9px 14px;border-radius:999px;background:rgba(11,10,13,.55);backdrop-filter:blur(10px);border:1px solid var(--line);opacity:0;transform:translateY(10px);transition:opacity .4s,transform .4s var(--ease);pointer-events:none}
.tx-idx.on{opacity:1;transform:none}
.tx-idx__n{display:inline-block;height:1em;overflow:hidden;color:var(--tx)}
.tx-idx__n>span{display:block;transition:transform .5s var(--ease)}
.tx-idx__bar{width:46px;height:2px;background:var(--line2);border-radius:2px;overflow:hidden}
.tx-idx__bar i{display:block;height:100%;width:100%;background:var(--amber);transform-origin:left;transform:scaleX(0)}

@media (max-width:860px){
  .im-plan{height:280vh}
  .im-plan__ui{flex-direction:column;align-items:flex-start;bottom:110px}
  .im-plan__step{text-align:left}
  .im-grow{height:190vh}
  .im-grow__card{width:62vw}
  .gw{font-size:31vw}
  .im-peek,.tx-idx{display:none}
}
@media (prefers-reduced-motion:reduce){
  .im-plan,.im-grow{height:auto}
  .im-plan__stick,.im-grow__stick{position:relative;height:80vh}
  .im-plan__ac,.im-plan__sk{display:none}
  .im-plan__rd{clip-path:none}
  .im-shard{clip-path:none}.im-shard img{transform:none}
  .im-grow__card{width:min(92vw,1100px)}.im-grow__card img{transform:none}.im-grow__cap{opacity:1}
  .im-blinds{display:none}
}