/* Sciana: prace w glebi miedzy zarodnikami z klatki 0, przeciaganie po przestrzeni bez konca, klik przelatuje obraz na pelny ekran. Jezyk znakow z toru. */
:root{ --turkus:#02d0aa; --zolty:#FFB01F; --s-cien:rgba(14,15,18,.3) }
html.tor-ciemny{ --s-cien:rgba(0,0,0,.62) }
html,body{ overflow:hidden; overscroll-behavior:none; background:var(--tlo) }
#zaTyl,#przed{ position:fixed; inset:0; width:100%; height:100%; display:block; pointer-events:none }
#zaTyl{ z-index:1 } #przed{ z-index:6; transition:opacity .45s ease }
html.otwarte #przed{ opacity:.25 }
#sciana{ position:fixed; inset:0; z-index:3; overflow:hidden; cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none; transition:opacity .45s ease }
#nav{ z-index:20 }
html.przeciaga #sciana{ cursor:grabbing }
.kafel{ position:absolute; left:0; top:0; padding:0; margin:0; border:0; background:#1a1b1e; cursor:pointer; will-change:transform; transform-origin:50% 50%; box-shadow:0 4px 8px var(--s-cien),0 26px 48px var(--s-cien); outline:0 }
.kafel img{ display:block; width:100%; height:100%; object-fit:cover; pointer-events:none; opacity:0; transition:opacity .5s ease; -webkit-user-drag:none }
.kafel img.jest{ opacity:1 }
.kafel::after{ content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 0 var(--turkus); transition:box-shadow .2s ease; pointer-events:none }
@media (hover:hover){ .kafel:hover::after{ box-shadow:inset 0 0 0 2px var(--turkus) } }
.kafel:focus-visible::after{ box-shadow:inset 0 0 0 3px var(--zolty) }
html.otwarte #sciana{ opacity:.07; pointer-events:none }
#etykieta{ position:fixed; left:0; top:0; z-index:15; pointer-events:none; opacity:0; transition:opacity .18s; padding:.5rem .7rem; color:#f2f2ee; background:rgba(12,14,16,.84); clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px); font:700 11px/1 var(--font); letter-spacing:.14em; text-transform:uppercase; white-space:nowrap; will-change:transform }
#etykieta.jest{ opacity:1 }
#etykieta b{ color:var(--zolty); font-weight:800; margin-right:.5em }
#wskazowka{ position:fixed; left:50%; bottom:1.1rem; z-index:12; margin:0; transform:translateX(-50%); pointer-events:none; color:var(--tusz); opacity:.62; font:600 10.5px/1 var(--font); letter-spacing:.2em; text-transform:uppercase; transition:opacity .6s }
html.ruszyl #wskazowka,html.otwarte #wskazowka{ opacity:0 }

#lot{ position:fixed; left:0; top:0; z-index:14; display:none; transform-origin:0 0; box-shadow:0 6px 12px var(--s-cien),0 40px 90px var(--s-cien); will-change:transform; background:#141518 }
#lot.jest{ display:block }
#lot.leci{ transition:transform .72s cubic-bezier(.16,.84,.24,1) }
#lot img{ display:block; width:100%; height:100%; object-fit:contain }

#stan{ position:fixed; inset:0; display:grid; place-content:center; justify-items:center; gap:1rem; text-align:center; color:var(--tusz); z-index:5 }
button:focus-visible,a:focus-visible{ outline:2px solid #0a7c67; outline-offset:2px }
html.tor-ciemny button:focus-visible,html.tor-ciemny a:focus-visible{ outline-color:var(--turkus) }

@media (prefers-reduced-motion:reduce){ #lot.leci{ transition:none } #sciana,.kafel img{ transition:none } }

/* mgla: tlo ma wlasna glebie. W dzien cieple cienie, w nocy resztka swiatla z pracowni. */
#mgla{ position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none }
#mgla::after{ content:""; position:absolute; inset:0; background:radial-gradient(120% 95% at 50% 46%,rgba(0,0,0,0) 40%,rgba(40,36,30,.17) 100%) }
html.tor-ciemny #mgla::after{ background:radial-gradient(120% 95% at 50% 46%,rgba(0,0,0,0) 34%,rgba(0,0,0,.72) 100%) }
#mgla i{ position:absolute; left:0; top:0; display:block; will-change:transform; background-repeat:repeat }
#mgla i:nth-child(1){ width:calc(100vw + 1500px); height:calc(100vh + 1500px); background-size:1500px 1500px;
  background-image:radial-gradient(closest-side at 30% 34%,rgba(96,88,74,.2),rgba(96,88,74,0)),radial-gradient(closest-side at 76% 72%,rgba(96,88,74,.13),rgba(96,88,74,0)) }
#mgla i:nth-child(2){ width:calc(100vw + 1180px); height:calc(100vh + 1180px); background-size:1180px 1180px;
  background-image:radial-gradient(closest-side at 62% 28%,rgba(255,255,255,.7),rgba(255,255,255,0)),radial-gradient(closest-side at 22% 74%,rgba(110,104,90,.13),rgba(110,104,90,0)) }
#mgla i:nth-child(3){ width:calc(100vw + 920px); height:calc(100vh + 920px); background-size:920px 920px;
  background-image:radial-gradient(closest-side at 48% 58%,rgba(120,112,98,.1),rgba(120,112,98,0)) }
html.tor-ciemny #mgla i:nth-child(1){ background-image:radial-gradient(closest-side at 30% 34%,rgba(30,92,80,.26),rgba(30,92,80,0)),radial-gradient(closest-side at 76% 72%,rgba(92,54,18,.2),rgba(92,54,18,0)) }
html.tor-ciemny #mgla i:nth-child(2){ background-image:radial-gradient(closest-side at 62% 28%,rgba(60,66,72,.3),rgba(60,66,72,0)),radial-gradient(closest-side at 22% 74%,rgba(28,84,74,.16),rgba(28,84,74,0)) }
html.tor-ciemny #mgla i:nth-child(3){ background-image:radial-gradient(closest-side at 48% 58%,rgba(120,76,24,.1),rgba(120,76,24,0)) }
#wskazowka{ white-space:nowrap }

/* KARTA PRACY: ten sam material i te same stopnie pisma co plansze na torze, zmierzone na zywo. Kolejnosc czytania: co to jest, jaka to rzecz, ile kosztuje, kup. */
@property --obrys{ syntax:'<angle>'; inherits:false; initial-value:360deg }
#pasek{ --c:13px; --k-tusz:#0e0f12; --k-tekst:#26272b; --k-cichy:#6b6862; --k-nr:#067f6b; --k-zolty:#b87400; --k-linia:rgba(14,15,18,.14);
  position:fixed; z-index:16; isolation:isolate; display:flex; flex-direction:column; color:var(--k-tusz); padding:17px 20px 16px 22px; font-family:var(--font) }
html.tor-ciemny #pasek{ --k-tusz:#f2f2ee; --k-tekst:rgba(236,234,230,.9); --k-cichy:rgba(236,234,230,.6); --k-nr:var(--turkus); --k-zolty:var(--zolty); --k-linia:rgba(255,255,255,.16) }
#pasek[hidden]{ display:none }
#pasek::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c));
  background:radial-gradient(circle 3px at calc(100% - 11px) 11px,#6a7177 0 1.3px,#c9c8c2 2px,rgba(0,0,0,0) 3px),radial-gradient(circle 3px at 11px calc(100% - 11px),#6a7177 0 1.3px,#c9c8c2 2px,rgba(0,0,0,0) 3px),repeating-linear-gradient(0deg,rgba(0,0,0,.02) 0 1px,rgba(0,0,0,0) 1px 3px),linear-gradient(155deg,rgba(250,249,247,.86),rgba(226,224,218,.8));
  -webkit-backdrop-filter:blur(9px) saturate(1.2); backdrop-filter:blur(9px) saturate(1.2) }
html.tor-ciemny #pasek::before{ background:radial-gradient(circle 3px at calc(100% - 11px) 11px,#8d959b 0 1.3px,#15181b 2px,rgba(0,0,0,0) 3px),radial-gradient(circle 3px at 11px calc(100% - 11px),#8d959b 0 1.3px,#15181b 2px,rgba(0,0,0,0) 3px),repeating-linear-gradient(0deg,rgba(255,255,255,.02) 0 1px,rgba(255,255,255,0) 1px 3px),linear-gradient(155deg,rgba(32,38,41,.82),rgba(9,11,13,.88)) }
#pasek::after{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  clip-path:polygon(evenodd,var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c),var(--c) 0,calc(var(--c) + .5px) 1px,1px calc(var(--c) + .5px),1px calc(100% - 1px),calc(100% - var(--c) - .5px) calc(100% - 1px),calc(100% - 1px) calc(100% - var(--c) - .5px),calc(100% - 1px) 1px,calc(var(--c) + .5px) 1px,var(--c) 0);
  background:linear-gradient(112deg,var(--turkus) 0,var(--turkus) 13%,#6b7379 27%,#2d3236 62%,#7d858b 90%,var(--zolty) 95%,var(--zolty) 100%) }
/* budowanie ramki jak na torze: obrys, szklo, tresc */
#pasek > *{ opacity:0 } #pasek::before,#pasek::after{ opacity:0 }
#pasek.jest > *,#pasek.jest::before,#pasek.jest::after{ opacity:1 }
@media (prefers-reduced-motion:no-preference){
  #pasek::after{ -webkit-mask:conic-gradient(from 225deg,#000 var(--obrys),rgba(0,0,0,0) 0); mask:conic-gradient(from 225deg,#000 var(--obrys),rgba(0,0,0,0) 0) }
  #pasek.jest::after{ animation:kartaObrys .62s cubic-bezier(.5,.05,.2,1) both }
  #pasek.jest::before{ animation:kartaSzklo .5s ease-out .12s both }
  #pasek.jest > *{ animation:kartaTresc .34s ease-out .5s both }
}
@keyframes kartaObrys{ from{ --obrys:0deg } to{ --obrys:360deg } }
@keyframes kartaSzklo{ from{ opacity:0 } }
@keyframes kartaTresc{ from{ opacity:0; transform:translateY(4px) } }

#pasek p,#pasek h1{ margin:0 }
#pasek button{ appearance:none; cursor:pointer; color:inherit }
#nr{ color:var(--k-nr); font:600 9.5px/1 var(--font); letter-spacing:.24em; text-transform:uppercase; white-space:nowrap; margin-bottom:9px!important }
#nr b{ color:var(--k-zolty); font-weight:600 }
#tytul{ position:relative; font:800 24px/1.12 var(--font); letter-spacing:-.012em; color:var(--k-tusz) }
#tytul::before{ content:""; position:absolute; left:-22px; top:.08em; width:2px; height:1em; background:var(--turkus); box-shadow:0 0 9px var(--turkus); animation:kartaDioda 7s ease-in-out infinite }
@keyframes kartaDioda{ 0%,100%{ opacity:.35 } 50%{ opacity:1 } }
#dane{ margin-top:10px; font:400 13.5px/1.52 var(--font); color:var(--k-tekst) }
#dane strong{ display:block; font-weight:600; color:var(--k-tusz); font-variant-numeric:tabular-nums }
#warianty{ display:flex; gap:.3rem; margin-top:12px }
#warianty[hidden]{ display:none }
#warianty button{ border:0; padding:.52rem .68rem; background:color-mix(in srgb,var(--k-tusz) 9%,transparent); font:600 9.5px/1 var(--font); letter-spacing:.14em; text-transform:uppercase; clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px); transition:background .2s }
#warianty button:hover{ background:color-mix(in srgb,var(--k-tusz) 18%,transparent) }
#warianty button[aria-pressed="true"]{ background:var(--k-tusz); color:var(--tlo) }
#zakup{ margin-top:14px; padding-top:13px; border-top:1px solid var(--k-linia); display:grid; gap:11px }
#cena{ font:800 25px/1 var(--font); letter-spacing:-.015em; white-space:nowrap; font-variant-numeric:tabular-nums }
#nota{ margin-top:6px!important; font:400 11.5px/1.3 var(--font); color:var(--k-cichy) }
.kup{ display:block; padding:.95rem 1rem; text-align:center; background:var(--turkus); color:#07110f; text-decoration:none; font:800 12px/1 var(--font); letter-spacing:.11em; text-transform:uppercase; white-space:nowrap; clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px); transition:background .2s }
.kup:hover{ background:var(--zolty); color:#160d00 }
.kup[aria-disabled="true"]{ background:color-mix(in srgb,var(--k-tusz) 12%,transparent); color:var(--k-cichy); pointer-events:none }
#stopka{ display:flex; align-items:center; gap:2px; margin:10px -8px -6px }
#stopka button{ min-width:36px; height:36px; padding:0 8px; border:0; background:none; color:var(--k-cichy); font:400 17px/1 var(--font); transition:color .2s }
#stopka button:hover{ color:var(--k-tusz) }
#zamknij{ margin-left:auto; white-space:nowrap }
#zamknij span{ font:600 9.5px/1 var(--font); letter-spacing:.2em; text-transform:uppercase; margin-right:.3em; vertical-align:.12em }
@media (pointer:coarse){ #stopka button{ min-width:44px; height:44px } }

/* OBOK OBRAZU: kiedy jest miejsce z boku, praca dostaje cala wysokosc, a karta stoi przy niej i sie nie rusza */
@media (min-width:900px) and (min-aspect-ratio:5/4){
  #pasek{ width:296px; bottom:24px }
}
/* POD OBRAZEM: bez miejsca z boku karta jest ciasniejsza i ma cene obok przycisku */
@media not all and (min-width:900px) and (min-aspect-ratio:5/4){
  #pasek{ left:10px; right:10px; bottom:calc(10px + env(safe-area-inset-bottom)); display:grid; grid-template-columns:1fr auto; column-gap:12px; align-items:start; padding:13px 14px 13px 18px }
  #nazwa{ grid-column:1; grid-row:1 }
  #stopka{ grid-column:2; grid-row:1; margin:-7px -8px 0 0 }
  #zamknij span{ display:none }
  #dane,#warianty,#zakup{ grid-column:1 / -1 }
  #dane{ margin-top:6px; font-size:12.5px; line-height:1.4 }
  #dane strong{ display:inline; margin-right:.7em }
  #warianty{ margin-top:8px }
  #tytul{ font-size:21px }
  #tytul::before{ left:-18px }
  #zakup{ margin-top:9px; padding-top:9px; display:flex; align-items:center; gap:14px }
  #cena{ font-size:21px }
  #nota{ margin-top:3px!important; font-size:10.5px }
  .kup{ flex:1 }
}
@media (prefers-reduced-transparency:reduce){ #pasek::before{ -webkit-backdrop-filter:none; backdrop-filter:none; background:var(--tlo) } }
@media (prefers-reduced-motion:reduce){ #tytul::before{ animation:none } }

#lotB{ position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:contain; opacity:0; pointer-events:none }
#lotB.jest{ opacity:1; transition:opacity .46s ease }
@media (prefers-reduced-motion:reduce){ #lotB.jest{ transition:none } }

/* zanim przyjdzie zdjecie, kafla nie ma: zadnych ciemnych prostokatow */
.kafel:not(.got){ background:none; box-shadow:none }
/* tlo wychodzi z koloru, w ktorym skonczyl sie lot */
#mgla,#zaTyl,#przed{ animation:zKosci 1.4s ease both }
@media (prefers-reduced-motion:reduce){ #mgla,#zaTyl,#przed{ animation:none } }

html.kupuje #lot,html.kupuje #pasek{ translate:0 -115vh; transition:translate .46s cubic-bezier(.6,0,.9,.45)!important }

/* zdjecie jest gotowe, zanim kafel wjedzie w kadr: zadnego przenikania i pustych kwadratow */
.kafel img{ transition:none }
.kafel:not(.got){ visibility:hidden!important }

/* chmura przyszla z poprzedniej strony (te same ziarna leca dalej): bez wchodzenia od zera */
html.zarCiag #zaTyl,html.zarCiag #przed{ animation:none }