/* ===== GHouse – warstwa efektów (podgląd) ===== */

/* --- intro: tło jako osobna warstwa (do odsłonięcia), skan, 3D --- */
#gh-intro{background:transparent}
#gh-intro .gh-bg{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 42%,#26303a 0%,#1d242c 55%,#161b21 100%)}
#gh-intro .gh-scan{position:absolute;left:0;right:0;top:0;height:2px;opacity:0;background:linear-gradient(90deg,transparent,#e6cf9c 20%,#fff3d6 50%,#e6cf9c 80%,transparent);box-shadow:0 0 18px 4px rgba(214,182,126,.55),0 0 60px 10px rgba(214,182,126,.18);z-index:3}
#gh-intro .gh-stage{transition:transform 1.05s cubic-bezier(.2,.7,.2,1);transform-style:preserve-3d}
#gh-intro .gh-stage.gh-3d{transform:translateY(-3vh) perspective(1100px) rotateX(20deg) rotateY(-26deg) rotateZ(3deg) scale(1.04)}
#gh-intro .gh-logo{filter:drop-shadow(0 0 0 rgba(0,0,0,0));transition:filter 1s}
#gh-intro .gh-stage.gh-3d .gh-logo{filter:drop-shadow(26px 34px 26px rgba(0,0,0,.55))}
#gh-intro .gh-stage{z-index:4}
html.gh-flying .marka img{opacity:0}
html.gh-lock .hero .wrap > div > *{opacity:0}

/* --- hero: światło przez lamele, wejście tekstu, znak 3D --- */
.hero .swiatlo{position:absolute;inset:0;pointer-events:none;background:radial-gradient(900px circle at var(--mx,72%) var(--my,38%),rgba(255,222,165,.15),transparent 55%);transition:background .2s}
.hero .swiatlo i{display:none}
.hero h1,.hero h1 em,.hero .etykieta,.hero .lead,.hero .cta{display:block}
.hero .cta{display:flex}
.gh-wejscie .hero .etykieta{animation:gh-up .9s cubic-bezier(.2,.7,.2,1) both}
.gh-wejscie .hero h1{animation:gh-maska 1.1s cubic-bezier(.2,.7,.2,1) .08s both}
.gh-wejscie .hero h1 em{animation:gh-maska 1.1s cubic-bezier(.2,.7,.2,1) .28s both}
.gh-wejscie .hero .lead{animation:gh-up 1s cubic-bezier(.2,.7,.2,1) .5s both}
.gh-wejscie .hero .cta{animation:gh-up 1s cubic-bezier(.2,.7,.2,1) .65s both}
@keyframes gh-up{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes gh-maska{from{opacity:0;clip-path:inset(0 0 100% 0);transform:translateY(40px)}to{opacity:1;clip-path:inset(0 0 -10% 0);transform:none}}
.znak3d{justify-self:center;width:min(100%,380px);aspect-ratio:1;perspective:900px}
.znak3d .obr{width:100%;height:100%;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.7,.2,1);will-change:transform}
.znak3d svg{width:100%;height:100%;overflow:visible;display:block;filter:drop-shadow(18px 24px 18px rgba(0,0,0,.5))}
.gh-wejscie .znak3d{animation:gh-znak 1.4s cubic-bezier(.2,.7,.2,1) .2s both}
@keyframes gh-znak{from{opacity:0;transform:translateY(30px) scale(.94)}to{opacity:1;transform:none}}

/* --- linia wymiarowa przewijania (lewa krawędź, desktop) --- */
.wymiar{position:fixed;left:14px;top:calc(var(--hdr) + 24px);bottom:24px;width:22px;z-index:40;pointer-events:none;display:none}
@media (min-width:1180px){.wymiar{display:block}}
.wymiar .os{position:absolute;left:10px;top:0;bottom:0;width:1px;background:rgba(127,127,127,.35)}
.wymiar .post{position:absolute;left:9px;top:0;width:3px;height:0;background:var(--mosiadz);box-shadow:0 0 10px rgba(212,182,126,.6)}
.wymiar .t{position:absolute;left:4px;width:13px;height:1px;background:rgba(127,127,127,.55)}
.wymiar .t::before{content:"";position:absolute;left:-2px;top:-3px;width:7px;height:7px;border-left:1px solid rgba(127,127,127,.7);transform:rotate(45deg)}
.wymiar .etk{position:absolute;left:4px;margin-top:10px;font:10px/1 var(--f-mono);letter-spacing:.14em;color:var(--mosiadz);white-space:nowrap;text-transform:uppercase;writing-mode:vertical-rl;background:var(--sciana);padding:4px 0}
.wymiar .etk{background:transparent;text-shadow:0 0 6px rgba(0,0,0,.35)}
.wymiar .etk em{font-style:normal;color:var(--tekst-2);margin-left:8px}

/* --- proces: sekcja przypięta, rysunek rysowany przewijaniem --- */
.proces{position:relative;height:420vh;background:#1d242c;color:var(--na-grafit)}
.proces-scena{position:sticky;top:var(--hdr);height:calc(100vh - var(--hdr));height:calc(100svh - var(--hdr));overflow:hidden;display:flex;align-items:center;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);
  background-size:100px 100px,100px 100px,20px 20px,20px 20px}
.proces-uklad{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px;align-items:center;width:100%}
.proces h2{font-size:clamp(32px,4.4vw,56px);font-weight:800;margin:10px 0 28px}
.proces-kroki{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.proces-kroki li{display:grid;grid-template-columns:44px 1fr;gap:10px;padding:14px 0 14px 14px;border-left:2px solid rgba(236,234,229,.12);opacity:.38;transition:opacity .4s,border-color .4s,transform .4s}
.proces-kroki li span{font:12px var(--f-mono);letter-spacing:.12em;color:var(--mosiadz);padding-top:6px}
.proces-kroki li h3{font-size:22px;margin:0 0 4px}
.proces-kroki li p{margin:0;color:var(--na-grafit-2);font-size:15px}
.proces-kroki li.on{opacity:1;border-color:var(--mosiadz);transform:translateX(6px)}
.proces-rys{position:relative}
.proces-rys svg{width:100%;height:auto;display:block;overflow:hidden}
.proces-rys .l{fill:none;stroke:#9aa3ab;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.proces-rys .l.m{stroke:#d4b67e;stroke-width:1.8}
.proces-rys .l.wym{stroke:#7f97a8;stroke-width:.9}
.proces-rys .l.cien{stroke:#5d6670}
.proces-rys .l.os{stroke:#5d6670;stroke-dasharray:14 5 2 5}
.proces-rys .l.granica{stroke:#c9ced2;stroke-width:1.4}
.proces-rys .l.zab{stroke:#7f97a8}
.proces-rys .l.drz{stroke:#6f8466}
.proces-rys .l.tlo{stroke:#5d6670}
.proces-rys .l.szw{stroke:#5d6670;stroke-width:.7}
.proces-rys .l.lid{stroke:#6c7680;stroke-width:.8}
.proces-rys .l.okno{fill:#1d242c}
.proces-rys .l.brama{stroke:#6c7680;stroke-width:.8}
.proces-rys .l.przer{stroke:#d4b67e;opacity:0}
.proces-rys .widac .l.zab{stroke-dasharray:7 5}
.proces-rys .widac .l.granica{stroke-dasharray:16 4 2 4}
.proces-rys .widac .l.przer{stroke-dasharray:4 6}
.proces-rys .widac .l.m.przer2{stroke-dasharray:6 5;stroke-width:1}
.proces-rys .szklo{fill:rgba(160,200,220,.06);stroke:none}
.proces-rys .fugi{opacity:0;transition:opacity .8s}
.proces-rys .widac .fugi{opacity:1}
.proces-rys .t{font:10px var(--f-mono);letter-spacing:.12em;fill:#8d99a6;opacity:0;transition:opacity .5s}
.proces-rys .widac .t{opacity:1}
.proces-rys .kreskowanie{opacity:0;transition:opacity .6s}
.proces-rys .widac .kreskowanie{opacity:.6}
.proces-rys .et{transition:opacity .6s}
.proces-rys .plan{transform-origin:0 0}
.proces-rys .skan{stroke:#e6cf9c;stroke-width:1.5;filter:drop-shadow(0 0 5px rgba(230,207,156,.8))}
.proces-rys .tabliczka rect,.proces-rys .tabliczka path{fill:rgba(29,36,44,.92);stroke:#6c7680;stroke-width:.8}
.proces-rys .tabliczka path{fill:none}
.proces-rys .tabliczka text{font:9px var(--f-mono);letter-spacing:.12em;fill:#8d99a6}
.proces-rys .tabliczka .tb2{fill:#d4b67e;font-size:10px}
.proces-rys .tabliczka .tb3{fill:#c9ced2;font-size:10px}
.proces-stopka{display:flex;justify-content:space-between;margin-top:14px;font:11px var(--f-mono);letter-spacing:.08em;color:#8d99a6;border-top:1px solid rgba(236,234,229,.1);padding-top:10px}

/* --- przed/po: rysunek ↔ wizualizacja --- */
.ba{position:relative;margin:0;overflow:hidden;background:#e9e7e2;aspect-ratio:16/9;cursor:ew-resize;touch-action:pan-y;user-select:none;-webkit-user-select:none;box-shadow:0 30px 60px -30px rgba(0,0,0,.45)}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.ba img.szk{clip-path:inset(0 calc(100% - var(--x)) 0 0)}
.ba .uchwyt{position:absolute;top:0;bottom:0;left:var(--x);width:44px;margin-left:-22px;background:none;border:0;padding:0;cursor:ew-resize}
.ba .uchwyt::before{content:"";position:absolute;left:21px;top:0;bottom:0;width:2px;background:var(--mosiadz-jasny);box-shadow:0 0 14px rgba(212,182,126,.7)}
.ba .uchwyt::after{content:"‹ ›";position:absolute;left:2px;top:50%;width:40px;height:40px;margin-top:-20px;border-radius:50%;background:var(--grafit);border:2px solid var(--mosiadz-jasny);color:var(--mosiadz-jasny);font:600 15px/36px var(--f-mono);letter-spacing:.1em;text-align:center}
.ba .uchwyt:focus-visible{outline:none}.ba .uchwyt:focus-visible::after{box-shadow:0 0 0 3px rgba(212,182,126,.5)}
.ba-l,.ba-p{position:absolute;top:12px;font:11px var(--f-mono);letter-spacing:.14em;padding:5px 8px;background:rgba(23,25,27,.75);color:#e9e7e2;pointer-events:none}
.ba-l{left:12px}.ba-p{right:12px;color:var(--mosiadz-jasny)}
.ba img{transition:opacity .5s ease}
.ba.zmiana img{opacity:0}
.ba-l{background:rgba(255,255,255,.8);color:#2c2f32}
.ba-tabs{display:grid;grid-template-columns:repeat(3,1fr);}
.ba-tabs.dwa{grid-template-columns:1fr 1fr;}
.ba-tabs{margin-top:0;border-top:1px solid var(--linia)}
.ba-tabs button{text-align:left;background:none;border:0;border-top:2px solid transparent;margin-top:-1px;padding:16px 18px 4px 0;cursor:pointer;color:var(--tekst-2);font:inherit;transition:color .3s,border-color .3s}
.ba-tabs button b{display:block;font-family:var(--f-disp);font-stretch:85%;font-size:19px;color:var(--tekst);margin-bottom:2px}
.ba-tabs button span{font-size:13px}
.ba-tabs button.on{border-top-color:var(--mosiadz)}
.ba-tabs button:not(.on){opacity:.6}.ba-tabs button:hover{opacity:1}
/* --- działy: światło za kursorem --- */
.dzial::before{content:"";position:absolute;inset:0;background:radial-gradient(420px circle at var(--cx,50%) var(--cy,50%),rgba(212,182,126,.16),transparent 60%);opacity:0;transition:opacity .4s;pointer-events:none}
.dzial:hover::before{opacity:1}


@media (max-width:960px){
  .proces{height:380vh}
  .proces-uklad{grid-template-columns:1fr;gap:12px}
  .proces-rys{order:-1}
  .proces h2{font-size:28px;margin:4px 0 10px}
  .proces-tekst .etykieta{display:none}
  .proces-kroki li{display:none;border-left:0;padding:0;transform:none}
  .proces-kroki li.on{display:grid;opacity:1}
  .proces-stopka{margin-top:6px}
  .ba{aspect-ratio:4/3}
  .ba-tabs{grid-template-columns:1fr}
  .ba-tabs button{padding:12px 0 8px}
  .ba-tabs button span{display:none}
  .znak3d{width:min(34vw,170px);justify-self:start;order:-1}
}
@media (prefers-reduced-motion:reduce){
  .hero .swiatlo i{animation:none}
  .proces{height:auto}.proces-scena{position:relative;height:auto;padding:64px 0}
}

.proces-przyklad{margin:-16px 0 24px;color:var(--na-grafit-2);font-size:15px}
@media (max-width:960px){.proces-przyklad{display:none}}