/* Prototype 02 — Integrated CAD Scene: warstwa przestrzenna nad oryginalna strona */

/* kanwa CAD jako tlo strony */
#cad-layer{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .8s cubic-bezier(0.16,0.84,0.44,1)}
#cad-layer canvas{display:block;width:100%;height:100%}

/* sekcje przepuszczaja tlo (tylko w tym prototypie) */
#firma{background:rgba(9,11,14,.84)!important}
#uslugi{background:rgba(8,10,13,.84)!important}
#realizacje{background:rgba(7,9,12,.86)!important}
#bezp{background:rgba(6,8,10,.87)!important}
.proc{background:rgba(5,7,9,.90)!important}
#kontakt{background:rgba(4,6,8,.93)!important}
.proof{background:rgba(244,246,248,.96)!important}

/* nakladka przejscia film -> CAD */
#cad-transition{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:0;visibility:hidden}
#cad-transition.on{opacity:1;visibility:visible}
#cad-transition .frame{position:absolute;inset:0;background:#0B0D10 center/cover no-repeat;transition:filter .5s linear,opacity .45s linear}
#cad-transition svg{position:absolute;inset:0;width:100%;height:100%}
#cad-transition svg line{stroke:#9FC1DA;stroke-width:1.6;opacity:.95;filter:drop-shadow(0 0 3px rgba(6,10,14,.9))}
#cad-transition .tp{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:8px;opacity:0;transition:opacity .25s}
#cad-transition .tp i{width:9px;height:9px;border:1.5px solid #F97316;transform:rotate(45deg);background:rgba(11,13,16,.4)}
#cad-transition .tp b{font-family:'IBM Plex Mono';font-weight:400;font-size:10px;letter-spacing:.14em;color:#9FC1DA;background:rgba(11,13,16,.55);padding:3px 8px;white-space:nowrap}
#cad-transition .tick{position:absolute;width:14px;height:14px;border:0 solid rgba(159,193,218,.8);opacity:0;transition:opacity .3s}
#cad-transition .tick.a{top:5vh;left:3vw;border-width:1px 0 0 1px}
#cad-transition .tick.b{top:5vh;right:3vw;border-width:1px 1px 0 0}
#cad-transition .tick.c{bottom:5vh;left:3vw;border-width:0 0 1px 1px}
#cad-transition .tick.d{bottom:5vh;right:3vw;border-width:0 1px 1px 0}
#cad-transition .tag{position:absolute;top:5vh;left:50%;transform:translateX(-50%);font-family:'IBM Plex Mono';font-size:10px;letter-spacing:.22em;color:rgba(159,193,218,.85);opacity:0;transition:opacity .3s}

/* panel kalibracyjny (tylko ?debugTwin=1) */
#twin-debug{position:fixed;right:10px;top:64px;z-index:999;width:280px;background:rgba(8,10,13,.94);border:1px solid #2a3340;font-family:'IBM Plex Mono';font-size:10px;color:#9FB0C0;padding:10px;display:none;max-height:82vh;overflow:auto;pointer-events:auto}
body.twin-debug #twin-debug{display:block}
#twin-debug h4{font-size:10px;letter-spacing:.14em;color:#F97316;margin:8px 0 4px;font-weight:400}
#twin-debug label{display:flex;justify-content:space-between;align-items:center;gap:6px;margin:2px 0}
#twin-debug input[type=number]{width:64px;background:#0e1216;border:1px solid #2a3340;color:#cfd8e0;font:inherit;padding:2px 4px}
#twin-debug select,#twin-debug button{width:100%;background:#0e1216;border:1px solid #2a3340;color:#cfd8e0;font:inherit;padding:4px;margin:2px 0;cursor:pointer}
#twin-debug .row{display:flex;gap:4px}
#twin-debug .row input{flex:1;width:auto}

@media (max-width:820px){
  #cad-layer,#cad-transition{display:none}
}
@media (prefers-reduced-motion:reduce){
  #cad-transition{display:none}
}