/* Realizacje: fizyczny chaos prac, wielka typografia, przypiety film, siatka i widok pracy z pozioma galeria. Jezyk znakow z toru. */
:root{ --tlo:#faf9f7; --tusz:#0e0f12; --tekst:#26272b; --cichy:#6b6862; --nr:#067f6b; --zolc:#b87400; --linia:rgba(14,15,18,.14); --turkus:#02d0aa; --font:"Montserrat",ui-sans-serif,system-ui,"Segoe UI","Helvetica Neue",sans-serif; color-scheme:light }
html.tor-ciemny{ --tlo:#0c0b0e; --tusz:#f2f2ee; --tekst:rgba(236,234,230,.9); --cichy:rgba(236,234,230,.62); --nr:var(--turkus); --zolc:#FFB01F; --linia:rgba(255,255,255,.16); color-scheme:dark }
*{ box-sizing:border-box }
html{ scroll-behavior:auto }
body{ margin:0; background:var(--tlo); color:var(--tekst); font:400 15px/1.55 var(--font); -webkit-font-smoothing:antialiased; overflow-x:hidden }
button{ font:inherit; color:inherit; cursor:pointer }
a{ color:inherit }
#zaTyl{ position:fixed; inset:0; width:100%; height:100%; display:block; z-index:0; pointer-events:none }
#tresc{ position:relative; z-index:1 }
.znacznik{ margin:0; color:var(--nr); font:600 9.5px/1 var(--font); letter-spacing:.24em; text-transform:uppercase }
.znacznik b{ color:var(--zolc); font-weight:600 }

/* nawigacja */
#nav{ position:fixed; left:0; right:0; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.9rem clamp(1rem,2.5vw,2rem); color:var(--tusz); transition:color .3s }
#nav .znak{ color:inherit; text-decoration:none; font:800 13px/1 var(--font); letter-spacing:.2em; white-space:nowrap }
#naw{ display:flex; align-items:center; gap:clamp(.8rem,2vw,1.6rem); margin:0 1.2rem 0 auto }
#naw a{ color:inherit; text-decoration:none; font:400 11px/1 var(--font); letter-spacing:.2em; text-transform:uppercase; padding:.35rem 0; border-bottom:1px solid transparent; opacity:.8 }
#naw a:hover{ opacity:1 }
#naw a.tu{ opacity:1; border-bottom-color:currentColor }
#naw .pod{ display:flex; gap:inherit; margin-left:clamp(.6rem,2vw,1.6rem) }
#naw .pod a{ color:var(--nr); font-weight:500; opacity:1 }
#nav button{ appearance:none; background:none; border:0; padding:0; width:30px; height:30px; color:var(--cichy); display:grid; place-items:center }
#nav svg{ width:17px; height:17px }

/* CHAOS: prace zachowuja sie jak przedmioty */
#chaos{ padding:clamp(56px,8vh,72px) clamp(12px,2.6vw,36px) 0; height:100vh; height:100svh; display:flex; flex-direction:column }
#pudlo{ position:relative; flex:1; min-height:0; overflow:hidden; background:#0c0d10; touch-action:pan-y; clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px) }
.rzecz{ position:absolute; left:0; top:0; display:block; padding:0; margin:0; border:0; background:#1a1b1e; will-change:transform; box-shadow:0 8px 22px rgba(0,0,0,.5); cursor:grab; user-select:none; -webkit-user-select:none; overflow:hidden }
.rzecz img{ display:block; width:100%; height:100%; object-fit:cover; pointer-events:none; -webkit-user-drag:none }
html.ciagnie .rzecz{ cursor:grabbing }
.krzyz{ display:flex; justify-content:space-between; align-items:center; margin:0; padding:.7rem 2px; color:var(--tusz); font-size:14px; line-height:1 }
.krzyz b{ font:600 9.5px/1 var(--font); letter-spacing:.2em; text-transform:uppercase }

/* kto */

/* film */
#reel{ height:220vh }
#reelPin{ position:sticky; top:0; height:100vh; height:100svh; display:grid; place-items:center; overflow:hidden }
#reelKadr{ position:relative; width:min(100vw,calc(100vh * 16 / 9)); aspect-ratio:16/9; transform:scale(var(--s,.62)); overflow:hidden; background:#000; clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px) }
#reelTlo{ position:absolute; inset:0; background-size:cover; background-position:center }
#reelTlo iframe{ position:absolute; inset:0; width:100%; height:100%; border:0 }
#reelGraj{ position:absolute; display:flex; align-items:center; gap:clamp(.8rem,2vw,2rem); appearance:none; border:0; background:none; color:#fff; font:800 clamp(34px,7vw,104px)/1 var(--font); letter-spacing:-.03em; text-shadow:0 2px 26px rgba(0,0,0,.45); transition:opacity .3s }
#reelGraj i{ display:block; width:clamp(64px,8vw,116px); height:clamp(42px,5vw,70px); background:var(--turkus) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2307110f'%3E%3Cpath d='M8 5l12 7-12 7z'/%3E%3C/svg%3E") center/38% no-repeat; clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px); transition:transform .2s }
#reelGraj:hover i{ transform:scale(1.08) }
html.reelGra #reelGraj{ opacity:0; pointer-events:none }

/* siatka */
#prace{ padding:clamp(60px,10vh,110px) clamp(16px,4vw,64px) }
#prace header{ display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; flex-wrap:wrap; margin-bottom:clamp(26px,5vh,54px) }
#prace h2{ margin:0; color:var(--tusz); font:800 clamp(38px,6.4vw,96px)/1 var(--font); letter-spacing:-.035em }
#siatka{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vh,64px) clamp(14px,2vw,28px) }
.karta{ appearance:none; display:block; width:100%; padding:0; border:0; background:none; text-align:left; opacity:0; translate:0 44px; transition:opacity .6s ease,translate .8s cubic-bezier(.16,.84,.24,1) }
.karta.widac{ opacity:1; translate:0 0 }
.karta-o{ position:relative; display:block; aspect-ratio:16/11; overflow:hidden; background:#1a1b1e; clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px) }
.karta-o img,.karta-o video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition:transform .9s cubic-bezier(.16,.84,.24,1),opacity .4s }
.karta:hover .karta-o img{ transform:scale(1.05) }
.karta-o .druga{ opacity:0 } .karta:hover .karta-o .druga{ opacity:1 }
.karta-m{ display:block; margin:11px 0 5px; color:var(--cichy); font:600 9.5px/1.2 var(--font); letter-spacing:.16em; text-transform:uppercase }
.karta-t{ display:block; color:var(--tusz); font:800 clamp(20px,2.2vw,32px)/1.1 var(--font); letter-spacing:-.018em }

/* dalej */
#dalej{ padding:clamp(60px,10vh,120px) clamp(16px,4vw,64px) clamp(70px,12vh,140px) }
#dalej a{ display:block; margin-top:.2em; color:var(--tusz); text-decoration:none; font:800 clamp(34px,6.4vw,96px)/1.08 var(--font); letter-spacing:-.035em; transition:color .2s,translate .35s cubic-bezier(.16,.84,.24,1) }
#dalej p{ margin-bottom:18px }
#dalej a:hover{ color:var(--nr); translate:14px 0 }

/* widok pracy: pozioma galeria */
#praca{ position:fixed; inset:0; z-index:15; display:grid; grid-template-columns:minmax(280px,30vw) 1fr; background:var(--kol,#14161a); color:#f2f2ee; translate:0 100%; transition:translate .72s cubic-bezier(.7,0,.16,1) }
#praca[hidden]{ display:none }
#praca.jest{ translate:0 0 }
#pracaOpis{ display:flex; flex-direction:column; justify-content:center; padding:80px clamp(18px,3vw,44px) 40px; min-width:0 }
#pracaWroc{ align-self:flex-start; appearance:none; border:0; padding:.72rem .95rem; margin-bottom:auto; background:rgba(255,255,255,.14); color:#fff; font:600 10px/1 var(--font); letter-spacing:.14em; text-transform:uppercase; clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px) }
#pracaWroc:hover{ background:var(--turkus); color:#07110f }
#praca .znacznik{ color:rgba(255,255,255,.72) } #praca .znacznik b{ color:#FFB01F }
#pracaTytul{ margin:14px 0 14px; font:800 clamp(34px,4.6vw,72px)/1 var(--font); letter-spacing:-.03em }
#pracaTekst{ margin:0; font-size:14px; line-height:1.6; color:rgba(255,255,255,.82); max-width:40ch }
#pracaWsk{ margin:auto 0 0; padding-top:26px; font:600 9.5px/1 var(--font); letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.6) }
#pracaPas{ display:flex; align-items:center; gap:clamp(12px,1.6vw,22px); padding:80px clamp(18px,3vw,44px) 40px 0; overflow:auto hidden; scrollbar-width:none; overscroll-behavior:contain; min-width:0 }
#pracaPas::-webkit-scrollbar{ display:none }
.med{ position:relative; flex:0 0 auto; height:min(74vh,calc(100vh - 150px)); margin:0; overflow:hidden; background:rgba(0,0,0,.3); clip-path:polygon(13px 0,100% 0,100% calc(100% - 13px),calc(100% - 13px) 100%,0 100%,0 13px); opacity:0; translate:60px 0; transition:opacity .6s ease,translate .9s cubic-bezier(.16,.84,.24,1) }
#praca.jest .med{ opacity:1; translate:0 0 }
.med img,.med video{ display:block; height:100%; width:auto; max-width:82vw; object-fit:contain }
.med.film{ aspect-ratio:16/9 }
.med iframe{ position:absolute; inset:0; width:100%; height:100%; border:0 }
.med button{ position:absolute; inset:0; width:100%; height:100%; padding:0; border:0; background-size:cover; background-position:center }
.med button::after{ content:""; position:absolute; left:50%; top:50%; width:78px; height:50px; transform:translate(-50%,-50%); background:var(--turkus) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2307110f'%3E%3Cpath d='M8 5l12 7-12 7z'/%3E%3C/svg%3E") center/38% no-repeat; clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px) }

button:focus-visible,a:focus-visible{ outline:2px solid var(--nr); outline-offset:2px }
#stan{ padding:60px 20px; color:var(--cichy); text-align:center }

@media (max-width:760px){
  #nav{ flex-wrap:wrap; row-gap:.15rem; padding:.6rem .8rem .2rem; background:linear-gradient(to bottom,var(--tlo) 72%,transparent) }
  #naw{ order:3; flex:1 0 100%; margin:0; flex-wrap:wrap; justify-content:center; gap:.1rem .75rem }
  #naw a{ font-size:9.5px; letter-spacing:.1em; padding:.4rem 0 }
  #naw .pod{ flex:1 0 100%; justify-content:center; margin:0; gap:.9rem }
  #chaos{ padding-top:98px }
  #siatka{ grid-template-columns:1fr }
  #praca{ display:block; overflow:auto }
  #pracaOpis{ padding:70px 16px 18px; min-height:0 }
  #pracaWroc{ margin-bottom:26px }
  #pracaWsk{ display:none }
  #pracaPas{ display:block; overflow:visible; padding:0 10px 40px }
  .med{ height:auto; margin-bottom:12px; translate:0 40px }
  .med img,.med video{ width:100%; height:auto; max-width:none }
}
@media (prefers-reduced-motion:reduce){ .med,#praca{ transition:none } }

/* karta bez zdjecia i podpisy przed/po */
.karta.pusta{ cursor:default }
.karta-n{ position:absolute; inset:0; display:grid; place-items:center; color:#fff; font:800 clamp(30px,5vw,76px)/1 var(--font); letter-spacing:-.03em }
.med figcaption{ position:absolute; left:12px; bottom:12px; padding:.45rem .6rem; background:rgba(8,9,11,.72); color:#fff; font:600 9.5px/1 var(--font); letter-spacing:.2em; text-transform:uppercase }
#praca.ksiazka #pracaPas{ perspective:1600px }
#praca.ksiazka .med{ transform-origin:50% 50%; transition:opacity .6s ease,translate .9s cubic-bezier(.16,.84,.24,1); box-shadow:0 24px 60px rgba(0,0,0,.45); clip-path:none }
/* opinie: tor jedzie w bok, gdy strona jedzie w dol */
#opinie{ height:320vh }
#opiniePin{ position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; display:flex; flex-direction:column; justify-content:center; gap:clamp(20px,4vh,44px) }
#opiniePin h2{ margin:0; padding:0 clamp(16px,4vw,64px); color:var(--tusz); font:800 clamp(38px,6.4vw,96px)/1 var(--font); letter-spacing:-.035em }
#opinieTor{ display:flex; gap:clamp(14px,2vw,28px); width:max-content; padding:0 clamp(16px,4vw,64px); will-change:transform }
.opinia{ position:relative; isolation:isolate; flex:0 0 min(82vw,460px); margin:0; padding:20px 22px 20px 24px; color:var(--tekst); --c:13px; display:flex; flex-direction:column; gap:14px; min-height:min(46vh,340px) }
.opinia::before{ content:""; position:absolute; inset:0; z-index:-1; clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c)); background: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,.92),rgba(226,224,218,.86)); -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px) }
html.tor-ciemny .opinia::before{ background: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,.84),rgba(9,11,13,.9)) }
.opinia::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%,#FFB01F 95%,#FFB01F 100%) }
.opinia blockquote{ margin:0; flex:1; font:400 clamp(14px,1.25vw,17px)/1.55 var(--font); color:var(--tusz) }
.opinia figcaption{ font-size:12px; line-height:1.35 }
.opinia figcaption b{ display:block; color:var(--tusz); font-weight:800; font-size:15px }
.opinia figcaption span{ color:var(--cichy) }
@media (max-width:760px){ #opinie{ height:380vh } .opinia{ min-height:0 } }

/* KOLORY CALEJ STRONY: widok pracy na tym samym tle co reszta, zadnych wlasnych kolorow */
#praca{ background:var(--tlo); color:var(--tekst) }
#pracaTytul{ color:var(--tusz) }
#pracaTekst{ color:var(--tekst) }
#praca .znacznik{ color:var(--nr) } #praca .znacznik b{ color:var(--zolc) }
#pracaWroc{ background:color-mix(in srgb,var(--tusz) 9%,transparent); color:var(--tusz) }
#pracaWsk{ color:var(--cichy) }
.med{ background:color-mix(in srgb,var(--tusz) 6%,transparent) }
.karta-o{ background:color-mix(in srgb,var(--tusz) 7%,transparent)!important }
.karta-n{ color:var(--tusz) }
/* OPINIE: sam tekst w ruchu, bez ramek i bez logotypow */
.opinia{ flex:0 0 min(84vw,620px); padding:0; min-height:0; gap:18px }
.opinia::before,.opinia::after{ display:none }
.opinia blockquote{ flex:none; font:500 clamp(19px,2vw,30px)/1.32 var(--font); letter-spacing:-.012em }
.opinia figcaption b{ font-size:14px }
#opinieTor{ gap:clamp(40px,7vw,120px); align-items:flex-start }

/* SCENY: kazda praca ma wlasny ruch */
#prace{ padding-left:0; padding-right:0; padding-bottom:0 }
#prace header{ padding:0 clamp(16px,4vw,64px); margin-bottom:0 }
#siatka{ display:block }
.sc{ position:relative }
.sc-pin{ position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; perspective:1500px }
.sc-p{ position:absolute; z-index:30; left:clamp(16px,4vw,64px); bottom:clamp(20px,7vh,64px); max-width:min(440px,calc(100vw - 32px)); padding:14px 18px; background:color-mix(in srgb,var(--tlo) 76%,transparent); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); clip-path:polygon(11px 0,100% 0,100% calc(100% - 11px),calc(100% - 11px) 100%,0 100%,0 11px); opacity:0; translate:0 20px; transition:opacity .45s ease,translate .6s cubic-bezier(.16,.84,.24,1) }
.sc.jest .sc-p{ opacity:1; translate:0 0 }
.sc-p h3{ margin:9px 0 8px; color:var(--tusz); font:800 clamp(26px,3.6vw,54px)/1.02 var(--font); letter-spacing:-.025em }
.sc-p h3 span{ display:inline-block; translate:0 .6em; opacity:0; transition:translate .55s cubic-bezier(.16,.84,.24,1),opacity .4s; transition-delay:calc(var(--i) * 18ms) }
.sc.jest .sc-p h3 span{ translate:0 0; opacity:1 }
.sc-o{ margin:0 0 10px; font-size:14px; line-height:1.5 }
.sc-w{ appearance:none; border:0; padding:.72rem .95rem; background:var(--turkus); color:#07110f; font:800 10.5px/1 var(--font); letter-spacing:.12em; text-transform:uppercase; clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px) }
.sc-w:hover{ background:#FFB01F; color:#160d00 }
.sc-wielki{ position:absolute; top:50%; left:0; translate:0 -50%; white-space:nowrap; color:var(--tusz); font:800 clamp(90px,24vw,420px)/.9 var(--font); letter-spacing:-.05em; will-change:transform }
.sc-pol{ position:absolute; left:50%; top:50%; width:min(92vw,calc(92vh * 1.0775)); aspect-ratio:1.0775; translate:-50% -50%; overflow:hidden; will-change:transform }
.sc-pol img{ position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; display:block }
.sc-pol-a{ clip-path:inset(0 50% 0 0) } .sc-pol-b{ clip-path:inset(0 0 0 50%) }
.sc-kl{ position:absolute; left:50%; top:50%; width:min(88vw,calc(78vh * 1.78)); aspect-ratio:16/9; margin:0; translate:-50% -50%; overflow:hidden; box-shadow:0 18px 50px rgba(0,0,0,.4); will-change:transform; clip-path:polygon(13px 0,100% 0,100% calc(100% - 13px),calc(100% - 13px) 100%,0 100%,0 13px) }
.sc-kl img{ display:block; width:100%; height:100%; object-fit:cover }
.sc-kl figcaption{ position:absolute; right:12px; top:12px; padding:.45rem .6rem; background:rgba(8,9,11,.72); color:#fff; font:600 9.5px/1 var(--font); letter-spacing:.2em; text-transform:uppercase }
.sc-tlo-t{ position:absolute; left:0; top:50%; white-space:nowrap; color:var(--tusz); font:800 clamp(90px,22vw,380px)/.9 var(--font); letter-spacing:-.05em; will-change:transform }
.sc-wys{ position:absolute; left:50%; top:50%; height:84vh; max-width:88vw; object-fit:contain; box-shadow:0 26px 70px rgba(0,0,0,.45); will-change:transform }
.sc-bok{ position:absolute; right:clamp(16px,8vw,130px); top:50%; height:84vh; max-width:70vw; object-fit:contain; box-shadow:0 26px 70px rgba(0,0,0,.45); will-change:transform; transform-origin:100% 50% }
.sc-okno{ position:absolute; inset:0; background:#000; will-change:clip-path }
.sc-okno video{ width:100%; height:100%; object-fit:cover; display:block }
.sc-ksiega{ position:absolute; left:50%; top:50%; width:min(46vw,calc(70vh * 1.33)); aspect-ratio:1.33; transform-style:preserve-3d; will-change:transform }
.sc-str{ position:absolute; inset:0; transform-origin:0 50%; backface-visibility:hidden; background:#fff; box-shadow:0 18px 50px rgba(0,0,0,.28); will-change:transform; transform-style:preserve-3d }
.sc-str img{ display:block; width:100%; height:100%; object-fit:cover }
.sc-wach{ position:absolute; left:50%; top:46%; height:66vh; aspect-ratio:.71; object-fit:cover; box-shadow:0 18px 44px rgba(0,0,0,.35); will-change:transform }
#reelGraj span{ will-change:transform }
@media (max-width:760px){
  .sc-ksiega{ width:44vw; left:50% }
  .sc-wach{ height:44vh } .sc-wys,.sc-bok{ height:66vh; max-width:88vw } .sc-bok{ right:6vw }
  .sc-p{ bottom:14px; padding:10px 13px } .sc-o{ font-size:12.5px; line-height:1.4 }
}
@media (prefers-reduced-motion:reduce){ .sc-p,.sc-p h3 span{ transition:none } }


/* Franek: pionowe filmy */
.sc-pin:has(.sc-tel){ display:flex; align-items:center; justify-content:flex-end; gap:clamp(8px,1.6vw,24px); padding:clamp(60px,9vh,86px) clamp(14px,4vw,64px) 24px }
.sc-tel{ position:relative; margin:0; flex:0 1 auto; height:min(76vh,100%); aspect-ratio:9/16; overflow:hidden; background:#111; will-change:transform; clip-path:polygon(13px 0,100% 0,100% calc(100% - 13px),calc(100% - 13px) 100%,0 100%,0 13px) }
.sc-tel button{ position:absolute; inset:0; width:100%; height:100%; padding:0; border:0; background-size:cover; background-position:center }
.sc-tel iframe{ position:absolute; inset:0; width:100%; height:100%; border:0 }
.sc-tel figcaption{ position:absolute; left:0; right:0; bottom:0; padding:44px 12px 12px; color:#fff; pointer-events:none; background:linear-gradient(to top,rgba(0,0,0,.82),transparent) }
.sc-tel figcaption b{ display:block; font:800 clamp(13px,1.2vw,18px)/1.15 var(--font) }
.sc-tel figcaption span{ display:block; margin-top:4px; color:var(--turkus); font:600 10px/1 var(--font); letter-spacing:.12em; text-transform:uppercase }
.sc-tel.gra figcaption{ display:none }
.sn-pion .sc-p{ max-width:min(320px,28vw) }
/* Komfort: oficjalny film i case study */
.sc-kino{ position:absolute; right:clamp(14px,4vw,64px); top:50%; margin:-28vh 0 0; width:min(62vw,calc(62vh * 1.78)); aspect-ratio:16/9; overflow:hidden; background:#000; will-change:transform; clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px) }
.sc-kino button{ position:absolute; inset:0; width:100%; height:100%; padding:0; border:0; background-size:cover; background-position:center }
.sc-kino button::after,.sc-tel button::after{ content:""; position:absolute; left:50%; top:50%; width:74px; height:48px; transform:translate(-50%,-50%); background:var(--turkus) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2307110f'%3E%3Cpath d='M8 5l12 7-12 7z'/%3E%3C/svg%3E") center/38% no-repeat; clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px) }
.sc-kino iframe{ position:absolute; inset:0; width:100%; height:100%; border:0 }
.sc-kino ~ .sc-p{ max-width:min(30vw,420px) }
.sc-c{ margin:10px 0 2px; color:var(--tusz); font:600 14px/1.4 var(--font) }
.sc-k{ margin:0 0 8px; color:var(--cichy); font-size:12px }
.sc-l{ display:inline-block; margin-bottom:6px; color:var(--nr); font:600 11px/1.4 var(--font) }
/* okladka 3D na srodku wachlarza */
.sc-okl{ height:78vh; aspect-ratio:auto; object-fit:contain; box-shadow:none; filter:drop-shadow(0 26px 40px rgba(0,0,0,.42)) }
/* opinie: kto wazniejszy niz co */
.opinia{ gap:12px }
.opinia figcaption{ display:grid; gap:4px; font-size:13px }
.opinia figcaption img{ display:block; height:34px; width:auto; max-width:170px; object-fit:contain; object-position:left center; margin-bottom:8px; filter:brightness(0) }
html.tor-ciemny .opinia figcaption img{ filter:brightness(0) invert(1) }
.opinia figcaption b{ font:800 clamp(24px,2.6vw,38px)/1.05 var(--font); letter-spacing:-.022em }
.opinia figcaption span{ font-size:14px }
.opinia blockquote{ font:400 clamp(14px,1.05vw,16px)/1.55 var(--font); color:var(--tekst); letter-spacing:0 }
@media (max-width:760px){
  .sc-pin:has(.sc-tel){ justify-content:center; padding-top:112px; align-items:flex-start }
  .sc-tel{ flex:1 1 0; height:auto; min-width:0 }
  .sc-tel figcaption b{ font-size:11px }
  .sn-pion .sc-p{ max-width:none; right:12px } .sn-pion .sc-o{ display:none }
  .sc-kino{ left:10px; right:10px; width:auto; top:130px; margin:0 } .sc-kino ~ .sc-p{ max-width:none; right:12px }
  .sc-okl{ height:58vh }
}

/* logo ODDITY jedzie za praca */
.sc-tlo-l{ position:absolute; left:0; top:50%; height:clamp(120px,44vh,520px); width:auto; max-width:none; will-change:transform }
/* Wujek: system znaku */
.sc-sys{ position:absolute; left:50%; top:50%; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; width:min(82vw,calc(82vh * 1.33)); will-change:transform; transform-origin:50% 50% }
.sc-sys-s{ aspect-ratio:1.33; overflow:hidden; background:#fff; box-shadow:0 8px 24px rgba(0,0,0,.14) }
.sc-sys-s img{ display:block; width:100%; height:100%; object-fit:cover }
.sn-system .sc-p{ z-index:30 }
/* ebooki: dwa tablety na srodku */
.sc-okl{ height:74vh; aspect-ratio:auto; object-fit:contain; box-shadow:none; background:none; filter:drop-shadow(0 26px 40px rgba(0,0,0,.4)) }
/* opinie: logotypy w swoich kolorach, wieksze */
html.tor-ciemny .opinia figcaption img{ filter:brightness(0) invert(1) }
@media (max-width:760px){ .sc-okl{ height:50vh } .sc-sys{ width:94vw; gap:5px } .sc-tlo-l{ height:26vh } }

/* logo Oddity: ich wlasny zapis */
.sc-oddi{ font:700 clamp(100px,26vw,460px)/.9 'Arimo',Arial,sans-serif; letter-spacing:-.01em }
.sc-oddi b{ color:#ff2e88; font-weight:700 }

.tylkoCzytnik{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap }
/* opinie: logotypy w rownym polu, nazwy i teksty zaczynaja sie na tej samej linii */
.opinia{ flex:0 0 auto }
.logoSlot{ display:flex; align-items:flex-end; height:72px; margin-bottom:12px }
.opinia figcaption .logoSlot img{ display:block; margin:0; max-width:none; filter:none }
html.tor-ciemny .opinia figcaption .logoSlot img{ filter:none }
.opinia .logoSlot .naCiemne{ display:none } html.tor-ciemny .opinia .logoSlot .naCiemne{ display:block } html.tor-ciemny .opinia .logoSlot .naJasne{ display:none }
.opinia figcaption b{ white-space:nowrap }
@media (max-width:760px){ .logoSlot{ height:56px; margin-bottom:8px } .opinia figcaption b{ white-space:normal } }

/* tytul lamie sie tylko miedzy slowami */
.slowo{ display:inline-block; font-style:normal; white-space:nowrap }

/* linki do ludzi i firm */
.ktoL{ display:block; color:inherit; text-decoration:none }
a.ktoL:hover b{ text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:.14em }
.sc-www{ display:inline-block; margin:0 12px 10px 0 }

/* ciemny motyw: ciemne logotypy znikalyby na tle */
html.tor-ciemny .opinia figcaption .logoSlot img[src*="juto"],html.tor-ciemny .opinia figcaption .logoSlot img[src*="future"]{ filter:brightness(0) invert(1) }
html.tor-ciemny .opinia figcaption .logoSlot img[src*="mimo"]{ filter:invert(1) hue-rotate(180deg) }

/* demo do klikania */
#demoOkno{ position:fixed; inset:0; z-index:9999; background:#07080a }
#demoOkno iframe{ position:absolute; inset:0; width:100%; height:100%; border:0 }
#demoZamknij{ position:absolute; z-index:2; left:66%; top:9px; appearance:none; border:0; padding:.6rem .9rem; background:var(--turkus); color:#07110f; font:800 10.5px/1 var(--font); letter-spacing:.12em; text-transform:uppercase; clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px) }
@media (max-width:760px){ .sc-demo{ display:none } }

/* EMIT 2.0: tasma ekranow */
.sc-tasma{ position:absolute; left:0; top:44%; display:flex; gap:clamp(14px,2vw,30px); width:max-content; padding:0 clamp(16px,4vw,64px); will-change:transform }
.sc-tasma img{ display:block; height:clamp(240px,66vh,720px); width:auto; aspect-ratio:1500/753; object-fit:cover; object-position:50% 0; background:#0a0c10; box-shadow:0 18px 50px rgba(0,0,0,.4) }
@media (max-width:760px){ .sc-tasma img{ height:38vh } }

.logoSlot .ktoL{ display:flex; align-items:flex-end; height:100% }
.logoSlot a.ktoL:hover img{ opacity:.72 }

/* opinie: pasek wjezdza z prawej, napisy za nim, slider plynie sam */
#opinie{ height:240vh }
/* jlk 2026-11-09: opinie zaraz po showreelu, bez czarnego paska: na tle strony, w kolorach trybu jasnego/ciemnego */
#opiniePin{ justify-content:center }
/* zamiast czarnego paska: pas bez koloru, ktory mocno rozmywa zarodniki pod opiniami; krawedzie rozmyte */
#opiniePas::before{ content:""; position:absolute; left:0; right:0; top:-9vh; bottom:-9vh; z-index:0; background:transparent; -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 24%,#000 76%,transparent 100%); mask-image:linear-gradient(180deg,transparent 0,#000 24%,#000 76%,transparent 100%); opacity:calc(1 - var(--a)); pointer-events:none }
#opiniePas{ clip-path:none!important }
#opiniePas{ --a:1; --b:1; position:relative; padding:clamp(26px,5vh,54px) 0 clamp(30px,5.5vh,60px) }
#opinieTresc{ position:relative; display:flex; flex-direction:column; gap:clamp(18px,3.4vh,36px); transform:translate3d(calc(var(--b) * 115vw),0,0); will-change:transform }
#opinieTor{ width:max-content; padding:0; will-change:transform }
#opinieTor:hover,#opinieTor:focus-within{ animation-play-state:paused!important }
.opinia{ flex:0 0 auto }
@keyframes opinieLot{ to{ transform:translate3d(var(--dl),0,0) } }
@media (max-width:760px){ #opinie{ height:240vh } }
@media (prefers-reduced-motion:reduce){ #opinieTor{ animation:none!important } #opiniePin{ overflow-x:auto } }
/* tlo po ODDITY */
#tloBarwa{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden }
#tloBarwa .tw{ position:absolute; inset:0; overflow:hidden; background:#0c0b0e; transform:translate3d(101%,0,0); will-change:transform }
#tloBarwa .tw i{ position:absolute; inset:-12%; background-size:cover; background-position:center; animation:tloDryf 38s ease-in-out infinite alternate }
#tloBarwa .tw:nth-child(2n) i{ animation-duration:46s; animation-direction:alternate-reverse }
#tloBarwa::after{ content:""; position:absolute; inset:0; z-index:9; background:url(prace/ziarno.webp); mix-blend-mode:overlay; opacity:.55 }
@keyframes tloDryf{ 0%{ transform:scale(1) translate3d(-2%,1%,0) rotate(-1deg) } 100%{ transform:scale(1.12) translate3d(2.5%,-1.5%,0) rotate(1.2deg) } }
@media (prefers-reduced-motion:reduce){ #tloBarwa .tw i{ animation:none } }
html.naBarwie{ --tlo:#0c0b0e; --tusz:#f2f2ee; --tekst:rgba(236,234,230,.9); --cichy:rgba(236,234,230,.66); --nr:var(--turkus); --zolc:#FFB01F; --linia:rgba(255,255,255,.16); color-scheme:dark }

#tloBarwa .tw canvas{ position:absolute; inset:0; width:100%; height:100% }

.sc-pix{ max-width:none; box-shadow:0 26px 70px rgba(0,0,0,.45); image-rendering:pixelated }

/* ── PRZEGLAD 11.07: ramki opisow, telefon ── */
.sc-skladanka{ position:absolute; inset:0; width:100%; height:100%; z-index:2 }
/* ramka opisu: szklo z cienka krawedzia i akcentem, ta sama w jasnym i barwnym tle */
.sc-p{ padding:18px 22px 18px; box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tusz) 12%,transparent), 0 18px 50px rgba(0,0,0,.18) }
.sc-p::before{ content:""; position:absolute; left:22px; top:0; width:44px; height:2px; background:var(--turkus) }
html.naBarwie .sc-p{ background:rgba(9,10,13,.66); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12), 0 18px 60px rgba(0,0,0,.35) }
.sc-p .sc-o{ max-width:38ch }
@media (max-width:760px){
  /* menu w jednej linii: znak, sklep, realizacje, muzyka, tryb */
  #nav{ flex-wrap:nowrap; padding:.7rem 14px .9rem }
  #naw{ order:0; flex:0 1 auto; margin:0 .5rem 0 auto; gap:0 }
  #naw > a{ display:none }
  #naw .pod{ flex:0 0 auto; margin:0; gap:.85rem }
  #naw .pod a{ font-size:10px; letter-spacing:.14em }
  /* ramka opisu na telefonie: pelna szerokosc, nad dolnym paskiem przegladarki */
  .sc-p{ left:12px; right:12px; max-width:none; bottom:calc(14px + env(safe-area-inset-bottom)); padding:14px 16px }
  .sc-p::before{ left:16px }
  .sc-p h3{ font-size:30px }
  .sc-o{ font-size:13px }
  /* Franek: jeden duzy film naraz */
  .sn-pion .sc-pin:has(.sc-tel){ display:block; padding:0 }
  .sn-pion .sc-tel{ position:absolute; left:50%; top:76px; height:min(60vh,calc(100svh - 300px)); width:auto; flex:none; aspect-ratio:9/16 }
  .sn-pion .sc-tel figcaption b{ font-size:14px }
  /* EMIT 2.0: wieksze ekrany */
  .sc-tasma img{ height:52vh }
  .sc-tasma{ top:40% }
}
@media (max-width:760px){
  /* Komfort: film na pelna szerokosc, w srodku miedzy menu a opisem */
  .sc-kino{ left:0; right:0; width:100vw; top:max(84px,calc(50% - 32vw - 120px)); clip-path:none }
}

/* ── Decoded: zywe demo ── */
.dc-okno{ position:absolute; z-index:3; left:5vw; top:47%; width:min(64vw,calc(76vh * 1.6)); aspect-ratio:16/10; background:#0b0a1d; border-radius:12px; overflow:hidden; box-shadow:0 0 0 1px rgba(255,255,255,.1),0 40px 90px rgba(0,0,0,.55); will-change:transform; transform-origin:0 50% }
.dc-pasek{ height:30px; display:flex; align-items:center; gap:7px; padding:0 12px; background:#16152c; color:rgba(255,255,255,.55); font:500 11px/1 var(--font); letter-spacing:.06em }
.dc-pasek i{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.18) } .dc-pasek span{ margin-left:10px }
.dc-ekran{ position:absolute; inset:30px 0 0 0; overflow:hidden }
.dc-ekran iframe{ position:absolute; left:0; top:0; border:0; transform-origin:0 0; pointer-events:none; background:#07060f }
.dc-tel{ position:absolute; z-index:4; right:6vw; top:9vh; height:82vh; aspect-ratio:480/920; will-change:transform; filter:drop-shadow(0 40px 60px rgba(0,0,0,.6)) }
.dc-tel iframe{ position:absolute; left:0; top:0; width:480px; height:920px; border:0; transform-origin:0 0; pointer-events:none; background:transparent }
.sn-bok .sc-p{ z-index:30 }
@media (max-width:760px){
  .dc-okno{ left:0; right:0; top:0; bottom:0; width:auto; aspect-ratio:auto; border-radius:0; box-shadow:none }
  .dc-pasek{ display:none } .dc-ekran{ inset:0 } .dc-ekran::after{ content:""; position:absolute; inset:0; background:linear-gradient(to bottom,rgba(7,6,15,.25),rgba(7,6,15,.55)) }
  .dc-tel{ left:50%; right:auto; top:84px; height:min(58vh,calc(100svh - 300px)) }
}

/* ── PORTAL: praca w oknie otwiera sie na caly ekran ── */
.pt-okno{ position:absolute; inset:0; z-index:2; overflow:hidden; clip-path:inset(22% 31% 22% 31% round 26px); will-change:clip-path; background:#0b0a0c }
.pt-obraz{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 30%; transform-origin:50% 45%; will-change:transform }
.pt-okno::after{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(to top,rgba(0,0,0,.55),transparent 38%) }
.sn-wznies .sc-oddi{ z-index:1 }
/* Decoded: demo na pelnym ekranie */
.dc-okno{ left:0; top:0; width:100%; height:100%; aspect-ratio:auto; border-radius:0; box-shadow:none; transform-origin:50% 50%; clip-path:inset(22% 31% 22% 31% round 26px); will-change:clip-path }
.dc-pasek{ display:none }
.dc-ekran{ inset:0; transform-origin:50% 45% }
.dc-tel{ right:7vw; top:10vh; height:80vh }
@media (max-width:760px){ .pt-obraz{ object-position:50% 40% } }

/* Decoded: strona jest zywym tlem, telefon z aplikacja na srodku */
.dc-okno{ clip-path:none!important }
.dc-ekran::after{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse at 50% 50%,rgba(6,5,16,.15),rgba(6,5,16,.62) 70%) }
.dc-tel{ left:50%; right:auto; top:8vh; height:84vh }
@media (max-width:760px){ .dc-tel{ top:84px; height:min(58vh,calc(100svh - 300px)) } }

/* ── Franek: wielka typografia zamiast ramki ── */
@media (min-width:761px){
  .sn-pion .sc-p{ left:clamp(24px,5vw,90px); top:50%; bottom:auto; translate:0 -50%; max-width:min(44vw,640px); padding:0; background:none; -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:none; clip-path:none }
  .sc.jest.sn-pion .sc-p{ translate:0 -50% }
  .sn-pion .sc-p::before{ display:none }
  .sn-pion .sc-p h3{ font-size:clamp(56px,7.6vw,132px); line-height:.92; letter-spacing:-.045em; margin:14px 0 18px }
  .sn-pion .sc-p h3 .slowo{ overflow:hidden; vertical-align:top; padding-bottom:.06em; padding-right:.12em; margin-right:-.12em; padding-left:.04em; margin-left:-.04em }
  .sn-pion .sc-p h3 span{ translate:0 105%; opacity:1; transition:translate .8s cubic-bezier(.16,.84,.24,1); transition-delay:calc(var(--i) * 28ms) }
  .sn-pion .sc-p .sc-o{ font-size:16px; max-width:34ch; display:block }
  .sn-pion .sc-pin:has(.sc-tel){ padding-right:clamp(16px,4vw,64px) }
  .sn-pion .sc-tel{ height:min(78vh,100%) }
}
.sc-tel figcaption span{ font-variant-numeric:tabular-nums }
/* ── Komfort: napis za kadrem, kadr na caly ekran, cytat jak napisy ── */
.kn-wielki{ position:absolute; left:50%; top:50%; z-index:1; color:var(--tusz); font:800 clamp(90px,21vw,400px)/.85 var(--font); letter-spacing:-.05em; white-space:nowrap; will-change:transform }
.sc-kino.kn-pelny{ left:0; right:0; top:0; bottom:0; width:auto; height:auto; margin:0; aspect-ratio:auto; z-index:2; clip-path:inset(22% 31% 22% 31% round 26px); transform:none!important }
.kn-pelny button{ transform-origin:50% 45% }
.kn-pelny button::before{ content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.6),transparent 45%) }
.kn-napis{ position:absolute; z-index:5; right:clamp(16px,5vw,90px); bottom:clamp(40px,12vh,130px); max-width:min(46vw,640px); margin:0; text-align:right; color:#fff; font:700 clamp(22px,2.6vw,44px)/1.15 var(--font); letter-spacing:-.02em; text-shadow:0 2px 24px rgba(0,0,0,.5); pointer-events:none }
.kn-napis i{ display:inline-block; overflow:hidden; font-style:normal; vertical-align:top; padding-bottom:.08em }
.kn-napis span{ display:inline-block; white-space:pre; will-change:transform }
.kn-napis small{ display:block; margin-top:12px; color:var(--turkus); font:600 11px/1 var(--font); letter-spacing:.2em; text-transform:uppercase }
.sn-kino .sc-c,.sn-kino .sc-k{ display:none }
@media (max-width:760px){
  .sc-kino.kn-pelny{ left:0; right:0; width:auto; top:0; clip-path:inset(30% 6% 40% 6% round 18px) }
  .kn-napis{ left:16px; right:16px; max-width:none; text-align:left; top:96px; bottom:auto; font-size:22px }
}

@media (min-width:761px){
  /* Franek: telefony tylko w prawej czesci, tytul ma swoje miejsce */
  .sn-pion .sc-pin:has(.sc-tel){ padding-left:48vw }
  .sn-pion .sc-tel{ flex:0 1 auto; height:min(70vh,100%) }
}

/* Decoded: rozdzialy po kolei, znacznik mowi, na co patrzysz */
.dc-rozdz{ position:absolute; z-index:6; left:50%; top:clamp(70px,10vh,96px); translate:-50% 0; margin:0; padding:.55rem .9rem; background:rgba(8,8,18,.72); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); color:#e9e6ff; font:600 10.5px/1 var(--font); letter-spacing:.2em; text-transform:uppercase; box-shadow:inset 0 0 0 1px rgba(255,255,255,.14) }
.dc-rozdz b{ color:var(--turkus); margin-right:.6em }
.dc-tel{ top:12vh; height:78vh }
.dc-ekran::after{ background:linear-gradient(to bottom,rgba(6,5,16,.35),transparent 22%,transparent 70%,rgba(6,5,16,.55)) }
@media (max-width:760px){ .dc-rozdz{ top:64px } .dc-tel{ top:104px; height:min(56vh,calc(100svh - 320px)) } }

/* ── Decoded: telefon jako bryla 3D wlatuje i obraca sie nad przewijana strona ── */
.dc-rozdz{ display:none }
.dc-okno{ transform:none!important }
.dc-tel{ perspective:1400px; filter:none; transform-origin:50% 50% }
.dc-bryla{ --g:16px; --sw:.5; position:absolute; inset:0; transform-style:preserve-3d; will-change:transform }
.dc-f{ position:absolute; backface-visibility:hidden; -webkit-backface-visibility:hidden }
.dc-przod,.dc-tyl{ inset:0; border-radius:13%/6.8% }
.dc-przod{ transform:translateZ(calc(var(--g) / 2)); overflow:hidden; box-shadow:0 0 0 1px rgba(255,255,255,.08) }
.dc-tyl{ transform:rotateY(180deg) translateZ(calc(var(--g) / 2)); background:linear-gradient(135deg,#3a3470 0%,#15123a 45%,#2b2660 100%); box-shadow:inset 0 0 0 2px rgba(255,255,255,.14), inset 0 0 60px rgba(150,130,255,calc(var(--sw) * .45)); display:grid; place-items:center }
.dc-tyl img{ width:26%; opacity:.92 }
.dc-tyl::after{ content:""; position:absolute; left:9%; top:5%; width:30%; aspect-ratio:1; border-radius:24%; background:#0c0a1e; box-shadow:inset 0 0 0 2px rgba(255,255,255,.12) }
.dc-bok{ display:block; background:linear-gradient(90deg,#5c5690,#1c1940 50%,#6a64a8) }
.dc-l,.dc-p{ top:5%; bottom:5%; width:var(--g); left:50%; margin-left:calc(var(--g) / -2) }
.dc-l{ transform:rotateY(-90deg) translateZ(calc(var(--W) / 2)) }
.dc-p{ transform:rotateY(90deg) translateZ(calc(var(--W) / 2)) }
.dc-g,.dc-d{ left:10%; right:10%; height:var(--g); top:50%; margin-top:calc(var(--g) / -2); background:linear-gradient(180deg,#5c5690,#1c1940 50%,#6a64a8) }
.dc-g{ transform:rotateX(90deg) translateZ(calc(var(--H) / 2)) }
.dc-d{ transform:rotateX(-90deg) translateZ(calc(var(--H) / 2)) }
.dc-tel.stoi .dc-przod{ box-shadow:0 0 0 1px rgba(255,255,255,.1), 0 50px 90px rgba(0,0,0,.65) }

/* ── bez wjezdzajacych tel przed scenami ── */
#tloBarwa{ display:none!important }
.sn-wznies .sc-pin,.sn-bok .sc-pin{ background:#0b0a0e }

.sn-wznies .pt-obraz{ object-position:50% 55% }

/* EMIT 1.0 ciemny jak Decoded przed nim: bez jasnej przerwy */
.sn-otwarcie .sc-pin{ background:#07060f }

/* krolik dopiero na pelnej hali */
.sn-wznies .sc-pin #krolik{ visibility:hidden }
.sn-wznies .sc-pin.pelna #krolik{ visibility:visible }
/* Decoded: dlugi zrzut strony */
.dc-dlugi{ position:absolute; left:0; top:0; width:100%; will-change:transform }
.dc-dlugi img{ display:block; width:100%; height:auto }

/* ── telefon z Blendera ── */
.dc-tel{ perspective:none; aspect-ratio:720/1200; height:min(84vh,calc(100svh - 90px)); top:8vh }
.dc-klatka{ position:absolute; inset:0; width:100%; height:100%; filter:none }
/* wideo aplikacji pod klatka z wycietym ekranem; cien rzuca caly telefon (z wideo), inaczej cien ramki padalby na ekran */
.dc-wid{ position:absolute; left:0; top:0; width:390px; height:844px; transform-origin:0 0; object-fit:cover; background:#07060f; visibility:hidden; pointer-events:none }
.dc-tel{ filter:drop-shadow(0 40px 50px rgba(0,0,0,.55)) }
.dc-app{ position:absolute; overflow:hidden; border-radius:12.5%/5.8%; visibility:hidden; background:#07060f }
.dc-tel.stoi .dc-app{ visibility:visible }
.dc-app iframe{ position:absolute; left:0; top:0; width:480px; height:920px; border:0; transform-origin:0 0; pointer-events:none; background:transparent }
@media (max-width:760px){ .dc-tel{ top:80px; height:min(64vh,calc(100svh - 300px)) } }
@media (max-width:760px){
  /* ODDITY na telefonie: opis u gory, podloga hali wolna dla krolika */
  .sn-wznies .sc-p{ top:70px; bottom:auto }
}

/* ── 11.07 popoludnie ── */
.sn-wznies .sc-oddi{ z-index:3; mix-blend-mode:normal; text-shadow:0 10px 60px rgba(0,0,0,.45) }
/* EMIT 2.0: noc z zarodnikami */
.sn-tasma .sc-pin{ background:transparent }
html.zarNoc #zaTyl{ filter:invert(1) hue-rotate(180deg) }
html.zarNoc{ background:#06070a }
/* Wujek: zielen jego ksiegi, plansze z cieniem */
.sn-system .sc-pin{ background:radial-gradient(ellipse at 50% 45%,#9fd47e 0%,#8dc66b 45%,#6fae4f 100%) }
.sn-system .sc-sys-s{ box-shadow:0 18px 40px rgba(20,60,10,.35),0 2px 6px rgba(20,60,10,.25) }
/* ebooki: kolo tla od srodka razem z rozsuwaniem stron */
.eb-tlo{ position:absolute; inset:0; z-index:0; clip-path:circle(0 at 50% 50%); background:radial-gradient(circle at 50% 50%,#f4c9c2 0%,#e8a39a 45%,#c9726b 100%); will-change:clip-path }
.eb-tlo2{ background:radial-gradient(circle at 50% 50%,#f6d0d8 0%,#ec9fb2 45%,#c95f7c 100%) }
.sn-wachlarz .sc-wach,.sn-rozjazd .sc-wach{ z-index:2 }
/* kursor: lekki przechyl 3D prac, bez swiatla */
.pt-okno,.sc-kino,.dc-tel,.sc-sys,.sc-tasma,.sc-okno,.sc-wach,.sc-tel{ rotate:var(--rk,0deg) }
.pt-okno,.sc-okno{ translate:calc(var(--kx) * -10px) calc(var(--ky) * -8px) }
.dc-tel{ translate:calc(var(--kx) * 18px) calc(var(--ky) * 12px) }
.sc-sys,.sc-tasma{ translate:calc(var(--kx) * -14px) calc(var(--ky) * -10px) }
.sc-wach{ translate:calc(var(--kx) * 12px) calc(var(--ky) * 9px) }
.sc-oddi{ translate:calc(var(--kx) * 26px) 0 }
@media (hover:none){ .pt-okno,.sc-okno,.dc-tel,.sc-sys,.sc-tasma,.sc-wach,.sc-oddi{ translate:none } }

.dc-klatki{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 0 }

/* EMIT 2.0: wlasne nocne niebo w WebGL zamiast odwroconych zarodnikow */
html.zarNoc #zaTyl{ filter:none; visibility:hidden }
.sn-tasma .sc-pin{ background:#03060b }
.em-tlo{ position:absolute; inset:0; width:100%; height:100%; display:block; z-index:0 }
.em-tlo.bez-gl{ background:radial-gradient(ellipse at 65% 45%,#0d3a40 0%,#071424 45%,#03060b 100%) }
.sn-tasma .sc-tasma{ z-index:2 }

/* ebooki: od razu pelne tlo shotofketo, bez bieli i zarodnikow; jasniejsze kolo dalej rozchodzi sie od srodka */
.sn-wachlarz .sc-pin{ background:radial-gradient(ellipse at 50% 50%,#d98a82 0%,#c46a64 55%,#9c4a4a 100%) }
.sn-rozjazd .sc-pin{ background:radial-gradient(ellipse at 50% 50%,#dc8199 0%,#c35a76 55%,#93405a 100%) }

/* ebooki: zarodniki na rozu (pomysl jlk) */
.sn-wachlarz .sc-pin,.sn-rozjazd .sc-pin{ background:transparent }
html.zarRoz{ background:radial-gradient(ellipse at 50% 45%,#e39a90 0%,#c96b66 60%,#a04e4f 100%) fixed }
html.zarRoz2{ background:radial-gradient(ellipse at 50% 45%,#e39a90 0%,#c96b66 60%,#a04e4f 100%) fixed }
/* najpierw lososiowe (pierwszy ebook), potem biale (drugi) */
html.zarRoz #zaTyl{ filter:invert(1) sepia(1) saturate(2.6) hue-rotate(-28deg) brightness(1.3) }
html.zarRoz2 #zaTyl{ filter:invert(1) brightness(1.7) }
/* opinie: napisy widac tylko tam, gdzie jest juz czarny pas; pas moze wjechac na roz, napisy nigdy bez niego */
#opiniePas{ clip-path:inset(-2px 0 -2px calc(var(--a) * 101%)) }
.eb-tlo{ display:none } /* jedno tlo na obu ebookach: bez rozchodzacego sie kola */

html.zarRoz body,html.zarRoz2 body{ background:transparent }

.kj-glowa-x{ position:absolute; left:50%; top:50%; width:min(70vh,80vw); height:auto; visibility:hidden; pointer-events:none; will-change:transform; filter:drop-shadow(0 0 40px rgba(120,220,230,.35)) }

/* JEDNO UNIWERSUM: przy przejsciu miedzy stronami pasek nawigacji stoi w miejscu, a podmiana tla trwa chwile zamiast mrugniecia */
@view-transition{ navigation:auto }
#nav{ view-transition-name:nav }
::view-transition-group(nav){ animation-duration:.5s; animation-timing-function:cubic-bezier(.16,.84,.24,1) }
::view-transition-old(root),::view-transition-new(root){ animation-duration:.32s }
@media (prefers-reduced-motion:reduce){ ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){ animation:none!important } }
html.wjazd #tresc{ transform:translate3d(0,115vh,0) }
#tresc{ will-change:auto }

/* opinie: strzalki i przeciaganie */
.opGora{ display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; padding-right:clamp(16px,4vw,64px) }
.opStrz{ display:flex; gap:10px; flex:none }
.opStrz button{ appearance:none; width:clamp(42px,3.4vw,54px); height:clamp(42px,3.4vw,54px); padding:0; border:0; background:rgba(236,234,230,.1); color:#f2f2ee; font:600 clamp(17px,1.4vw,22px)/1 var(--font); cursor:pointer; clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px); transition:background .2s,color .2s }
html:not(.tor-ciemny) .opStrz button{ background:rgba(14,15,18,.07); color:var(--tusz) }
.opStrz button:hover,.opStrz button:focus-visible{ background:var(--turkus,#2ed6ba); color:#07110f; outline:none }
#opinieTor{ cursor:grab; touch-action:pan-y; user-select:none; -webkit-user-select:none; animation:none!important }
#opinieTor.ciagnie{ cursor:grabbing }
#opinieTor img{ -webkit-user-drag:none; pointer-events:none }
#opinieTor .ktoL{ pointer-events:auto }
/* Przelot (jlk 2026-11-09): zywy lot na caly ekran, prowadzony przewijaniem strony */
.sn-pol .sc-pin{ background:#000 }
.pz-ramka{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; pointer-events:none; background:#000 }
.sn-pol{ background:#000 }