/* HVMBAK KURSORY — style warsztatu (15.10.2026). Nakładka na style sekcji 2 z landingu (index.html = kopia nagłówka landingu + src/tafla.css + src/sekcja2.css).
   Wszystko włącza się atrybutami data-* na <html> i zmiennymi --kz-* na .podzial, które ustawia warsztat/strona.js ze stanu (warsztat/stan.js).
   Zasady z landingu, których ten plik pilnuje:
   – tafla z backdrop-filter nie dostaje nigdy własnego opacity < 1 (w Chrome przestaje rozmywać): przygasanie drugiej tafli idzie na .tresc,
   – ton wybranej tafli to kolor warstwy bieli (::before z src/tafla.css), nie tło tafli, więc szkło, światło w masie i ziarno zostają na swoich miejscach,
   – przy wersalikach znak stoi od linii pisma: ukośnik przed tytułem to element w tekście (span.kz-uk), nie ozdoba pozycjonowana z zewnątrz. */

/* ——— scena ——— */
html[data-wys="ekran"] .szyba{min-height:100vh;min-height:calc(var(--vh,1vh)*100);display:flex;flex-direction:column;justify-content:center;padding-block:48px}
html[data-wys="ekran"] .pdz-zejscie{height:clamp(110px,10vw,150px)}
.kz-dno{height:1px}
#err{display:none}

/* ——— płótno kursorów 3D: pod kafelkami (jak na żywo) albo nad szkłem ——— */
html[data-wa="nad"] .szron-pudlo{z-index:2}

/* ——— kursory płaskie: znak z okien zapytań Łańcucha (src/lancuch.css .lc-kursor), liczby 1:1; wielkość mnoży warsztat/strona.js ——— */
.kz-kursor{position:absolute;left:0;top:0;z-index:0;width:22px;height:30px;translate:var(--kx,0) var(--ky,0);scale:var(--ks,1);transform-origin:2.2px 2px;
  pointer-events:none;opacity:0;transition:opacity .3s;filter:drop-shadow(1px 2px 1.5px rgba(13,13,13,.3));will-change:translate}
.kz-kursor.wid{opacity:1}
html[data-wa="nad"] .kz-kursor{z-index:2}

/* ——— wybrana tafla ——— */
.podzial{--kz-wz:420ms;--kz-wp:1.03;--kz-wk:.78;--kz-wu:.6;--kz-wd:0;--kz-wg:1.5px;--kz-wb:3px;--kz-wc:.99;--kz-ton:255,255,255;--kz-ramka:transparent}
.pdz-js .podzial .pdz-kol.szklo.tafla[data-r]{transition:transform var(--kz-wz) cubic-bezier(.2,.8,.2,1),border-color .4s ease,box-shadow var(--kz-wz) ease,outline-color var(--kz-wz) ease;
  outline:var(--kz-wg) solid transparent;outline-offset:-1px}
.pdz-js .podzial .pdz-kol.szklo.tafla[data-r].wid.kz-wyb{transform:scale(var(--kz-wp));outline-color:var(--kz-ramka)}
.pdz-js .podzial .pdz-kol.szklo.tafla[data-r].wid.kz-wcisk{transform:scale(var(--kz-wc));transition-duration:90ms}
/* ton = warstwa bieli tafli (::before, z-index -2 nad optyką): przechodzi kolorem */
.pdz-kol.szklo.tafla::before{transition:background-color var(--kz-wz) ease}
.pdz-kol.szklo.tafla.kz-wyb::before{background-color:rgba(var(--kz-ton),var(--kz-wk))}
/* rozmycie szkła wybranej (na żywo 3 px; selektor z id, bo tak stoi reguła „CZYSTE SZKŁO” w index.html landingu) */
#pdzLewa.szklo .optyka,#pdzPrawa.szklo .optyka{transition:-webkit-backdrop-filter var(--kz-wz) ease,backdrop-filter var(--kz-wz) ease}
#pdzLewa.szklo.kz-wyb .optyka,#pdzPrawa.szklo.kz-wyb .optyka{-webkit-backdrop-filter:blur(var(--kz-wb)) saturate(1.06);backdrop-filter:blur(var(--kz-wb)) saturate(1.06)}
/* kuleczki rysowane w tafli (kopia siatki tła, „CZYSTE SZKŁO”) gasną w wybranej: powiększona tafla rozjeżdża ich siatkę z siatką tła */
#pdzLewa .optyka::after,#pdzPrawa .optyka::after{transition:opacity var(--kz-wz) ease}
#pdzLewa.kz-wyb .optyka::after,#pdzPrawa.kz-wyb .optyka::after{opacity:0}
/* uniesienie: cień tafli rośnie z --kz-wu (części wewnętrzne jak w src/tafla.css) */
.pdz-kol.szklo.tafla.kz-wyb{box-shadow:inset 0 0 0 1px rgba(255,255,255,calc(.6*var(--tf-kraw))),inset 0 1px 0 rgba(255,255,255,calc(.95*var(--tf-kraw))),inset 0 -1px 0 rgba(13,13,13,.05),
  0 1px 2px rgba(20,28,36,calc(.08*var(--tf-cien))),0 18px 36px -24px rgba(20,28,36,calc(.22*var(--tf-cien) + .45*var(--kz-wu))),0 50px 80px -48px rgba(20,28,36,calc(.30*var(--tf-cien) + .5*var(--kz-wu))),
  0 34px 70px -34px rgba(20,28,36,calc(.5*var(--kz-wu)))}
/* czarny panel: białe pismo, białe kreski, światło w masie ściszone (białe gradienty na czerni robiły mleko) */
.pdz-kol .tresc,.pdz-kol .pdz-h,.pdz-kol li::before,.pdz-kol .pdz-dop,.pdz-kol .pdz-dop p,.pdz-kol .masa,.pdz-kol .swiatlo{transition:color var(--kz-wz) ease,background-color var(--kz-wz) ease,border-color var(--kz-wz) ease,opacity var(--kz-wz) ease}
html[data-wt="czern"] .pdz-kol.kz-wyb .tresc,html[data-wt="czern"] .pdz-kol.kz-wyb .pdz-h,html[data-wt="czern"] .pdz-kol.kz-wyb .pdz-dop p{color:#fff}
html[data-wt="czern"] .pdz-kol.kz-wyb .tresc,html[data-wt="czern"] .pdz-kol.kz-wyb .tresc *{text-shadow:none}
html[data-wt="czern"] .pdz-kol.kz-wyb li::before{background:#fff}
html[data-wt="czern"] .pdz-kol.kz-wyb .pdz-dop{border-top-color:rgba(255,255,255,.3)}
html[data-wt="czern"] .pdz-kol.kz-wyb .masa,html[data-wt="czern"] .pdz-kol.kz-wyb .swiatlo{opacity:.22}
html[data-wt="czern"] .pdz-kol.kz-wyb::after{opacity:calc(var(--tf-ziarno)*.5)}
/* ukośnik baby blue przed tytułem wybranej: element w tekście, zerowej szerokości, wystaje w lewo (direction:rtl), więc nie przesuwa tytułu */
.kz-uk{display:inline-block;width:0;direction:rtl;white-space:pre;color:var(--baby);opacity:0;transition:opacity var(--kz-wz) ease;font-style:normal}
.pdz-kol.kz-wyb .kz-uk{opacity:1}
/* druga tafla przygasa (treść, nie tafla: tafla z kryciem < 1 przestaje rozmywać) */
.pdz-kol.kz-inna .tresc{opacity:calc(1 - var(--kz-wd))}

/* ——— kropki: płótno fali zamiast siatki ::before (ta sama siatka: co 20 px od środka szerokości i od góry sekcji, zanik na górnych 140 px) ——— */
.kz-kropki{position:absolute;left:0;top:0;width:100%;z-index:0;pointer-events:none;display:none}
html[data-fw="1"] .kz-kropki{display:block}
/* siatka CSS zaczyna się tam, gdzie kończy się płótno (--kz-fala-dol, wielokrotność 20 px, ustawia kropki.js), bez drugiego zaniku u góry */
html[data-fw="1"] .szyba::before{top:var(--kz-fala-dol,0px);-webkit-mask-image:none;mask-image:none}

@media(prefers-reduced-motion:reduce){ .pdz-js .podzial .pdz-kol.szklo.tafla[data-r],.pdz-kol.szklo.tafla::before,.kz-uk,.pdz-kol .tresc{transition-duration:.01s!important} }