/* HVMBAK HELISA — style warsztatu. landing.css (arkusz landingu 1:1) i src/aktualizacje.css zostają nietknięte; tutaj jest tylko to,
   co w tej sekcji NOWE: warstwa helisy, szkło tafli pod helisę (zamiast wody z krążkami i gradientu), szkiełka łączników, uchwyty osi
   i nagłówek narzędzia. Część „SEKCJA” jest tym, co po wyborze Kuby pójdzie na landing; część „NARZĘDZIE” zostaje tutaj.

   Liczby szkła sterowane z panelu (start.js wpisuje je w <html>): --hx-mleko biel tafli, --hx-swiatlo światło w masie, --hx-kraw krawędź,
   --hx-ziarno i --hx-zw ziarno, --hx-cien cień tafli, --hx-krycie krycie helisy widzianej przez szkło. */

/* ════════ SEKCJA ════════ */

/* WARSTWA HELISY: w dokumencie (przewija się ze stroną), nad szarym tłem strony, pod całą treścią. Kafle z ostrą helisą wstawia silnik.
   Otwory na tafle wycina clip-path (start.js): to, co widać w tafli, rysuje jej własne płótno .hx-mroz. Sekcja pod drabinką (#dostep) jest
   nieprzezroczysta i ma krawędź szkła, więc helisa kończy się pod tą krawędzią bez żadnego przycinania. */
#helisa{position:absolute;left:0;top:0;width:100%;height:0;overflow:hidden;z-index:-1;pointer-events:none;contain:layout paint}
#helisa canvas{image-rendering:auto}

/* MASKA POD PŁYTĄ (komputer): helisa może wychodzić spod płyty, a płyta ma przezroczystą piastę i otwór, przez które byłoby widać jej kawałek.
   Krążek w kolorze tła leży w tym samym przyklejonym polu co płyta (jedzie z nią bez skryptu), nad warstwą helisy i pod płótnem płyty.
   Tło = ten sam gradient co .tlo, też przypięty do okna (background-attachment: fixed), więc krążka nie widać. Średnica płyty to 0,90 boku płótna
   (vendor/plyta: wypelnienie), maska ma 0,885, żeby rant płyty przykrył jej brzeg. Na telefonie płyta stoi daleko od drabinki: maski nie ma. */
.hx-maska{position:absolute;z-index:-1;left:50%;top:50%;width:calc(min(38vw,calc(var(--vh,1svh)*74))*.885);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 40%,#f7f8f9 0%,#eceef0 60%,#e2e5e8 100%) fixed}
@media(max-width:820px){ .hx-maska{display:none} }

/* TAFLA: szkło z sekcji 2 landingu (.szklo: krawędź, światło w masie, cień) + to, co widać przez nie (płótno .hx-mroz) + mleko + ziarno.
   Tło tafli jest puste: biel leży NAD helisą (::before), nie pod nią, inaczej nie byłoby jej widać na metalu. */
html.helisa .rozwoj .szklo{background:none;border-color:rgba(13,13,13,calc(.05 + .05*var(--hx-kraw,1)));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,calc(.6*var(--hx-kraw,1))),inset 0 1px 0 rgba(255,255,255,calc(.95*var(--hx-kraw,1))),inset 0 -1px 0 rgba(13,13,13,.05),
    0 1px 2px rgba(20,28,36,calc(.08*var(--hx-cien,1))),0 18px 36px -24px rgba(20,28,36,calc(.22*var(--hx-cien,1))),0 50px 80px -48px rgba(20,28,36,calc(.30*var(--hx-cien,1)))}
.hx-mroz{position:absolute;left:-1px;top:-1px;width:calc(100% + 2px);height:calc(100% + 2px);z-index:-3;display:block;pointer-events:none;opacity:var(--hx-krycie,.88)}
html.helisa .rozwoj .szklo::before{content:'';position:absolute;inset:0;z-index:-2;pointer-events:none;background:rgba(255,255,255,var(--hx-mleko,.09))}
html.helisa .rozwoj .szklo .masa{opacity:var(--hx-swiatlo,.5)}
/* ziarno: kafelek szumu niebieskiego z kryciem (img/ziarno-a.png, ten sam co w pasku „Dołącz”), mieszany soft-light: rozjaśnia jasne
   i przyciemnia ciemne miejsca zamiast kłaść szarą zasłonę */
html.helisa .rozwoj .szklo::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url(../img/ziarno-a.png) 0 0/var(--hx-zw,52px) var(--hx-zw,52px);mix-blend-mode:soft-light;opacity:var(--hx-ziarno,.16)}
/* tafle stoją od razu: przy nieruchomej helisie wjazd kryciem pokazywałby przez pół sekundy dziurę w helisie */
html.helisa.rozwoj-js .rozwoj-karta{opacity:1;transition:none}

/* ŁĄCZNIKI: „kreski” = jak na landingu; „szkielka” = słowo na małej tafli w osi kolumny, między taflami (helisa w osi przechodzi za nimi);
   „brak” = bez kresek i słów między taflami. Kreska od teczki Aktualizacje do pierwszej tafli zostaje zawsze. */
html[data-lk=szkielka] .rozwoj-linie path:not(:first-of-type),html[data-lk=szkielka] .rozwoj-linie text,
html[data-lk=brak] .rozwoj-linie path:not(:first-of-type),html[data-lk=brak] .rozwoj-linie text{display:none}
.hx-szkielko{position:absolute;left:50%;top:0;z-index:1;transform:translate(-50%,-50%);display:none;padding:8px 13px 7px 15px;white-space:nowrap;
  font-family:'Archivo',sans-serif;font-stretch:var(--text-wdth);font-size:12px;font-weight:600;letter-spacing:.14em;line-height:1;text-transform:uppercase;color:var(--bordo)}
html[data-lk=szkielka] .hx-szkielko{display:block}
.hx-szkielko span{position:relative;z-index:1}
@media(max-width:820px){ .hx-szkielko{font-size:11px;letter-spacing:.12em;padding:7px 10px 6px 12px} }

/* ════════ NARZĘDZIE ════════ */

/* nagłówek narzędzia zamiast hero i sekcji 2 */
.hx-start{position:relative;z-index:3;padding:26px 5vw calc(var(--vh,1svh)*7);display:flex;flex-direction:column;gap:16px}
.hx-start img{height:20.7px;width:auto;align-self:flex-start}
.hx-start p{margin:26px 0 0;max-width:46ch;font-family:'Archivo',sans-serif;font-stretch:75%;font-size:clamp(15px,1.25vw,18px);line-height:1.5;color:rgba(13,13,13,.72)}
.hx-start p b{font-family:var(--display);font-weight:900;text-transform:uppercase;color:var(--black);letter-spacing:0}
.hx-skok{align-self:flex-start;display:inline-flex;gap:10px;align-items:center;cursor:pointer;background:none;border-radius:0;
  font-family:'Inter',system-ui,sans-serif;font-stretch:normal;font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--black);
  padding:12px 16px;border:1px solid rgba(13,13,13,.2)}
.hx-skok:hover{background:rgba(13,13,13,.05)}
@media(max-width:820px){ .hx-start{padding:18px 18px calc(var(--vh,1svh)*5)} .hx-start img{height:17px} }

/* uchwyty osi */
#hxUchwyty{position:absolute;left:0;top:0;width:100%;height:0;z-index:30;pointer-events:none}
#hxUchwyty.ukryte,html.pn-schowany #hxUchwyty{display:none}
#hxUchwyty svg{position:absolute;left:0;top:0;width:1px;height:1px;overflow:visible}
#hxUchwyty path{fill:none;stroke:var(--bordo);stroke-width:1;stroke-dasharray:5 5;opacity:.55}
.hx-uchwyt{position:absolute;left:-8px;top:-8px;width:16px;height:16px;box-sizing:border-box;background:#fff;border:1.5px solid #0d0d0d;
  box-shadow:0 2px 8px rgba(13,13,13,.28);cursor:grab;pointer-events:auto;touch-action:none;will-change:transform}
.hx-uchwyt::after{content:'';position:absolute;inset:-14px}                 /* większe pole chwytu pod palec */
.hx-uchwyt:active{cursor:grabbing}
.hx-uchwyt.wl{background:#0d0d0d;border-color:#fff;outline:1.5px solid #0d0d0d}

/* komunikat, gdy karta graficzna nie wstała */
.hx-brak{position:fixed;left:14px;bottom:14px;z-index:50;max-width:320px;padding:12px 14px;background:#0d0d0d;color:#fff;font:500 12px/1.45 'Inter',system-ui,sans-serif}

/* w samym podglądzie (?goly=1) bez panelu i uchwytów */
html.goly #panel,html.goly #hxUchwyty{display:none}