/* Tablet z muzyka. Warstwy: zywe tlo, tresc ekranu, plyta z grzybnia nad trescia. */
:root{ --tlo:#faf9f7; --tusz:#0e0f12; --cichy:#77736e; --akcent:#6fd6bd; --font:"Montserrat",ui-sans-serif,system-ui,"Segoe UI","Helvetica Neue",sans-serif; color-scheme:light }
html.tor-ciemny{ --tlo:#0c0b0e; --tusz:#f2f2ee; --cichy:#9a9893; color-scheme:dark }
*{ box-sizing:border-box }
html,body{ margin:0; height:100%; overflow:hidden; background:var(--tlo); color:var(--tusz); font:400 14px/1.4 var(--font); -webkit-font-smoothing:antialiased }
#tlo{ position:fixed; inset:0; width:100%; height:100%; display:block }
#nav{ position:fixed; left:0; right:0; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between; padding:.9rem clamp(1rem,2.5vw,2rem); pointer-events:none }
#nav > *{ pointer-events:auto }
#nav .znak{ color:inherit; text-decoration:none; font:800 13px/1 var(--font); letter-spacing:.2em }
#nav button{ appearance:none; background:none; border:0; padding:0; width:30px; height:30px; color:var(--cichy); cursor:pointer; display:grid; place-items:center }
#nav button:hover{ color:var(--akcent) }
#nav svg{ width:17px; height:17px }

/* tablet: wpisany w okno, zawsze 16:9 */
#tab{ position:fixed; left:50%; top:50%; width:min(100vw,calc(100vh * 16 / 9)); aspect-ratio:16/9; transform:translate(-50%,-50%) }
@supports (height:100dvh){ #tab{ width:min(100vw,calc(100dvh * 16 / 9)) } }
#plyta{ position:absolute; left:-15%; top:-15%; width:130%; height:130%; pointer-events:none; z-index:3 }
#plytaZapas{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:3 }
/* ekran: zmierzony na plycie */
#ekran{ position:absolute; left:9.219%; top:10.139%; width:81.172%; height:80.417%; background:#000; overflow:hidden; border-radius:clamp(6px,1.2vw,18px); color:#f4f3ef; container-type:size; z-index:1 }
#glowny{ position:absolute; inset:0 }
#glowny > *{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; animation:wej .45s ease both }
#glowny img,#glowny video{ object-fit:contain; background:#000 }
#glowny .zaj{ background-size:cover; background-position:center; cursor:pointer; padding:0; appearance:none; border:0 }
#glowny .zaj::after{ content:""; position:absolute; left:50%; top:46%; width:clamp(52px,9cqw,92px); aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%; background:rgba(8,9,11,.66) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236fd6bd'%3E%3Cpath d='M8 5l12 7-12 7z'/%3E%3C/svg%3E") center/42% no-repeat; box-shadow:0 0 0 1px rgba(111,214,189,.5),0 0 34px rgba(111,214,189,.28); transition:transform .25s }
#glowny .zaj:hover::after{ transform:translate(-50%,-50%) scale(1.08) }
@keyframes wej{ from{ opacity:0 } to{ opacity:1 } }

/* gora: miedzy dwiema masami grzybni */
#gora{ position:absolute; right:24cqw; top:clamp(.5rem,2.6cqh,1.2rem); left:16cqw; display:flex; flex-direction:column; align-items:center; gap:.5rem; z-index:2; pointer-events:none }
#gora > *{ pointer-events:auto }
#widoki{ display:flex; gap:.2rem; background:rgba(8,9,11,.72); padding:.22rem }
#widoki button,#dzialy button{ appearance:none; border:0; background:none; color:rgba(244,243,239,.66); cursor:pointer; font:600 10px/1 var(--font); letter-spacing:.17em; text-transform:uppercase; padding:.62rem .8rem; transition:color .2s,background .2s }
#widoki button[aria-selected="true"]{ color:#07110e; background:var(--akcent) }
#dzialy{ display:flex; flex-wrap:wrap; justify-content:center; gap:.15rem; background:rgba(8,9,11,.6) }
#dzialy button{ padding:.5rem .6rem; font-size:9px }
#dzialy button[aria-pressed="true"]{ color:var(--akcent) }
button:focus-visible,#lista:focus-visible,.m:focus-visible{ outline:2px solid var(--akcent); outline-offset:1px }

/* dol: slider zaczyna sie za gesta masa grzybni */
#dol{ position:absolute; left:27cqw; right:1.6cqw; bottom:clamp(.4rem,2cqh,1rem); z-index:2; display:grid; gap:.4rem; pointer-events:none; transition:opacity .3s }
#dol > *{ pointer-events:auto }
#podpis{ margin:0; font:400 11px/1.2 var(--font); text-shadow:0 1px 8px #000; pointer-events:none }
#podpis b{ font-weight:700; letter-spacing:.02em }
#podpis span{ color:var(--akcent); font-weight:600; letter-spacing:.14em; font-size:9.5px; text-transform:uppercase; margin-left:.5em }
#szyna{ display:grid; grid-template-columns:auto 1fr auto; align-items:stretch; background:rgba(8,9,11,.72) }
#szyna > button{ appearance:none; border:0; background:none; color:#f4f3ef; width:clamp(30px,3.6cqw,46px); font:400 18px/1 var(--font); cursor:pointer }
#szyna > button:hover{ color:var(--akcent) }
#lista{ display:flex; gap:.35rem; padding:.35rem 0; overflow-x:auto; scroll-behavior:smooth; scrollbar-width:none; scroll-snap-type:x proximity }
#lista::-webkit-scrollbar{ display:none }
.m{ flex:0 0 auto; height:clamp(46px,11.5cqh,104px); aspect-ratio:16/10; padding:0; border:0; background:#15171a; cursor:pointer; position:relative; scroll-snap-align:center; opacity:.62; transition:opacity .2s,transform .25s;
  clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px)) }
.m:hover{ opacity:1; transform:translateY(-2px) }
.m[aria-current="true"]{ opacity:1; box-shadow:inset 0 0 0 2px var(--akcent) }
.m img{ width:100%; height:100%; object-fit:cover; display:block }
.m[aria-current="true"]::after{ content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 2px var(--akcent) }
.m.film::before{ content:""; position:absolute; left:50%; top:50%; margin:-7px 0 0 -5px; border-left:11px solid #fff; border-top:7px solid transparent; border-bottom:7px solid transparent; filter:drop-shadow(0 0 3px #000) }
#stan{ position:absolute; inset:0; display:grid; place-items:center; color:rgba(244,243,239,.6) }

/* telefon pionowo: bez obrotu tego sie nie da sensownie ogladac */
#obroc{ display:none; position:fixed; inset:0; z-index:30; background:var(--tlo); place-content:center; justify-items:center; gap:.6rem; text-align:center; padding:2rem }
#obroc .ikona{ width:96px; height:56px; border:2px solid var(--tusz); border-radius:8px; position:relative; animation:obrot 2.6s cubic-bezier(.6,0,.2,1) infinite }
#obroc .ikona::after{ content:""; position:absolute; inset:6px; background:var(--akcent); opacity:.7; border-radius:3px }
@keyframes obrot{ 0%,18%{ transform:rotate(-90deg) } 55%,100%{ transform:rotate(0) } }
#obroc p{ margin:.8rem 0 0; font:800 22px/1.1 var(--font); letter-spacing:-.02em }
#obroc small{ color:var(--cichy) }
@media (orientation:portrait) and (max-width:820px){ #obroc{ display:grid } }
/* telefon poziomo: pasek mniejszy, bo ekranu jest malo */
@media (max-height:480px){ #nav{ padding:.45rem .8rem } #gora{ gap:.25rem } #dzialy{ display:none } #podpis{ display:none } .m{ height:clamp(38px,14cqh,60px) } }
@media (prefers-reduced-motion:reduce){ #obroc .ikona{ animation:none } #glowny > *{ animation:none } }

/* nawigacja i ten sam miekki cien co na torze */
#nav{ gap:1rem }
#naw{ display:flex; 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; opacity:.78; padding:.35rem 0; border-bottom:1px solid transparent }
#naw a:hover{ opacity:1 }
#naw a.tu{ opacity:1; border-bottom-color:var(--akcent) }
#nav::before{ content:""; position:fixed; left:0; right:0; top:0; height:clamp(60px,12vh,110px); z-index:-1; pointer-events:none; background:linear-gradient(to bottom,rgba(250,249,247,.82),rgba(250,249,247,0)) }
html.tor-ciemny #nav::before{ background:linear-gradient(to bottom,rgba(9,10,13,.72),rgba(9,10,13,0)) }
/* wejscie: swiatlo, ktorym sie tu przyszlo, gasnie */
#wjazd{ display:none }

/* granie: tytul i pasek YouTube sa wolne; lista wraca przyciskiem */
html.gra #gora{ display:none }

/* pelna nawigacja jak na torze: etapy scrolla i podstrony */
#naw{ align-items:center; flex-wrap:nowrap }
#naw .pod{ display:flex; gap:inherit; margin-left:clamp(.6rem,2vw,1.6rem) }
#naw .pod a{ color:#0a7c67; font-weight:500; opacity:1 }
html.tor-ciemny #naw .pod a{ color:#6fd6bd }
@media (max-width:900px){ #naw{ gap:.6rem } #naw a{ font-size:9px; letter-spacing:.1em } #naw .pod{ margin-left:.3rem; gap:.6rem } }
/* wjazd i wyjazd tabletu */
#tab{ animation:tabWjazd .78s cubic-bezier(.12,.72,.2,1) both }
@keyframes tabWjazd{ from{ transform:translate(-50%,-50%) translateY(110vh) rotate(2deg) } to{ transform:translate(-50%,-50%) } }
html.wyjazd #tab{ animation:tabWyjazd .62s cubic-bezier(.6,0,.9,.45) both }
@keyframes tabWyjazd{ from{ transform:translate(-50%,-50%) } to{ transform:translate(-50%,-50%) translateY(110vh) rotate(-2deg) } }
@media (prefers-reduced-motion:reduce){ #tab, html.wyjazd #tab{ animation:none } }

/* JASNY TRYB: nawigacja lezy na ruchliwym tle, wiec zawsze ten sam ciemny cien i jasne litery, jak w ciemnym */
html:not(.tor-ciemny) #nav{ color:#faf9f7 }
html:not(.tor-ciemny) #nav button{ color:rgba(250,249,247,.86) }
html:not(.tor-ciemny) #nav button:hover{ color:#6fd6bd }
html:not(.tor-ciemny) #nav::before{ height:clamp(130px,24vh,240px); background:linear-gradient(to bottom,rgba(14,15,18,.5) 0%,rgba(14,15,18,.36) 18%,rgba(14,15,18,.2) 40%,rgba(14,15,18,.08) 66%,rgba(14,15,18,.02) 86%,rgba(14,15,18,0) 100%) }
html:not(.tor-ciemny) #nav > *{ text-shadow:0 1px 12px rgba(10,11,14,.55),0 0 2px rgba(10,11,14,.35) }
html:not(.tor-ciemny) #naw a{ opacity:.92 }
html:not(.tor-ciemny) #naw .pod a{ color:#7fe3cb }
html:not(.tor-ciemny) #naw a.tu{ border-bottom-color:#7fe3cb }

/* awaria tresci: komunikat i wyjscie z niego */
#stan p{ margin:0 0 .9rem }
#stan:has(#odswiez){ place-content:center; justify-items:center; text-align:center }
#odswiez{ appearance:none; border:1px solid currentColor; background:none; color:inherit; cursor:pointer; font:600 11px/1 var(--font); letter-spacing:.18em; text-transform:uppercase; padding:.6rem .9rem }
#odswiez:hover{ color:var(--akcent) }

/* palec: wieksze pole trafienia bez zmiany wygladu */
@media (pointer:coarse){ #naw a{ padding:.8rem 0 } }

/* prototyp: ciecz pod grzybnia, tylko pod ?tlo=ciecz */
#ciecz{ position:fixed; inset:0; width:100%; height:100%; display:block }
html.wyjazd #ciecz{ opacity:0; transition:opacity .55s ease-in .08s }

/* hover nawigacji: kreska rosnie od lewej, a napis sie rozjasnia; podstrony przechodza w zolty */
#naw a,#nav .znak{ transition:color .2s ease,opacity .2s ease; background:linear-gradient(currentColor,currentColor) no-repeat 0 100%/0 1px }
@media (hover:hover){
  #naw a,#nav .znak{ transition:color .2s ease,opacity .2s ease,background-size .28s cubic-bezier(.2,.7,.2,1) }
  #naw a:not(.tu):hover,#nav .znak:hover{ opacity:1; background-size:100% 1px; color:#fff }
  html:not(.tor-ciemny) #naw a:not(.tu):hover,html:not(.tor-ciemny) #nav .znak:hover{ color:#fff }
  #naw .pod a:not(.tu):hover,html:not(.tor-ciemny) #naw .pod a:not(.tu):hover{ color:#ffc53d }
}
#naw a:focus-visible,#nav .znak:focus-visible{ outline:1px solid #7fe3cb; outline-offset:4px }

/* granie: film jest wyzej, a lista zostaje pod nim, wiec nic nie lezy na pasku YouTube i zawsze mozna zmienic utwor */
html.gra #glowny{ bottom:calc(clamp(46px,11.5cqh,104px) + clamp(.4rem,2cqh,1rem) + 1rem) }
html.gra #podpis{ display:none }
@media (max-height:480px){ html.gra #glowny{ bottom:calc(clamp(38px,14cqh,60px) + .4rem + 1rem) } }

/* TELEFON W PIONIE: nawigacja u gory ekranu, tablet stoi pionowo, a wideo lezy w nim poziomo, czytelne przy normalnie trzymanym telefonie.
   Przycisk .bok obraca wideo wzdluz tabletu: wtedy po przekreceniu telefonu film jest najwiekszy. Dziala takze przy zablokowanym autoobrocie. */
#obrot{ position:absolute; inset:0; container-type:size }
#obrWideo{ display:none }
#obrWideo svg{ width:20px; height:20px; display:block; margin:auto }
@keyframes tabWjazdP{ from{ transform:translate(-50%,-50%) translateY(110vh) rotate(92deg) } to{ transform:translate(-50%,-50%) rotate(90deg) } }
@keyframes tabWyjazdP{ from{ transform:translate(-50%,-50%) rotate(90deg) } to{ transform:translate(-50%,-50%) translateY(110vh) rotate(88deg) } }
@media (orientation:portrait) and (max-width:820px){
  #obroc{ display:none }
  #nav{ flex-wrap:wrap; row-gap:.15rem; padding:.6rem .8rem .2rem }
  #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 }
  #nav::before, html:not(.tor-ciemny) #nav::before{ height:140px }
  #tab{ top:calc(50% + 46px); width:min(calc(100vh - 104px),calc(100vw * 16 / 9)); transform:translate(-50%,-50%) rotate(90deg); animation:tabWjazdP .78s cubic-bezier(.12,.72,.2,1) both }
  html.wyjazd #tab{ animation:tabWyjazdP .62s cubic-bezier(.6,0,.9,.45) both }
  #obrWideo{ display:block; appearance:none; border:0; background:none; color:#f4f3ef; width:clamp(34px,3.6cqw,46px); cursor:pointer; padding:0 }
  #obrWideo:hover,html.bok #obrWideo{ color:var(--akcent) }
  #szyna{ grid-template-columns:auto 1fr auto auto }
  html:not(.bok) #obrot{ inset:auto; left:50%; top:50%; width:100cqh; height:100cqw; transform:translate(-50%,-50%) rotate(-90deg) }
  html:not(.bok) #glowny{ inset:auto 0 auto 0; top:calc(50% - 28.125cqw - 34px); width:100%; aspect-ratio:16/9 }
  html:not(.bok) #dol{ left:0; right:0; bottom:auto; top:calc(50% + 28.125cqw - 26px) }
  /* pod poziomym wideo jest duzo miejsca: lista w siatce zamiast jednego rzedu, strzalki niepotrzebne */
  html:not(.bok) #szyna{ display:block; background:none }
  html:not(.bok) #wstecz,html:not(.bok) #dalej{ display:none }
  html:not(.bok) #lista{ display:grid; grid-template-columns:repeat(3,1fr); gap:.4rem; padding:.3rem 0 0; overflow:hidden auto; scroll-snap-type:none; max-height:calc(50cqh - 28.125cqw - 2px) }
  html:not(.bok) .m{ flex:none; width:100%; height:auto; aspect-ratio:16/10 }
  html:not(.bok) #podpis,html.gra:not(.bok) #podpis{ display:block; padding-right:40px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:30px }
  html:not(.bok) #obrWideo{ position:absolute; right:0; top:0; width:34px; height:30px }
  html.bok #glowny{ inset:0 }
  html.gra.bok #glowny{ bottom:calc(clamp(46px,11.5cqh,104px) + clamp(.4rem,2cqh,1rem) + 1rem) }
}
@supports (height:100dvh){
  @media (orientation:portrait) and (max-width:820px){ #tab{ width:min(calc(100dvh - 104px),calc(100vw * 16 / 9)) } }
}
@media (prefers-reduced-motion:reduce) and (orientation:portrait) and (max-width:820px){ #tab, html.wyjazd #tab{ animation:none } }

/* TLO JAK W SKLEPIE: kosc, mgla i zarodniki z klatki 0, czesc za tabletem, czesc przed nim. Przy graniu nic nie lezy na filmie. */
#tab{ z-index:3 }
#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.gra #przed{ opacity:0 }
#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; animation:mgla1 375s linear infinite;
  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; animation:mgla2 147s linear infinite;
  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; animation:mgla3 77s linear infinite;
  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)) }
@keyframes mgla1{ to{ transform:translate3d(-1500px,-1500px,0) } }
@keyframes mgla2{ to{ transform:translate3d(-1180px,-1180px,0) } }
@keyframes mgla3{ to{ transform:translate3d(-920px,-920px,0) } }
@media (prefers-reduced-motion:reduce){ #mgla i{ animation:none } }

/* DOLOT: tablet juz stoi tam, gdzie doleciala jego kopia z przelotu, wiec nic nie wjezdza. Plyta z shaderem przenika nad obrazem, a tlo wychodzi z kosci. */
html.lot #wjazd{ display:none }
html.lot:not(.wyjazd) #tab{ animation:none }
html.lot #plytaZapas{ display:block }
#cienZapas{ position:absolute; left:-15%; top:-15%; width:130%; height:130%; pointer-events:none; z-index:0 }
html.lot #cienZapas{ display:block; transition:opacity .5s ease }
html.lot #plyta{ z-index:4; opacity:0; transition:opacity .5s ease }
html.lot #plyta.jest{ opacity:1 }
html.lot #mgla,html.lot #zaTyl,html.lot #przed{ animation:zKosci 1.5s ease both }
@keyframes zKosci{ from{ opacity:0 } }

/* DWA WIDOKI W JEDNYM DOKUMENCIE: w trakcie przejscia widac oba, potem tylko jeden */
html:not(.pokazTab) #tab{ display:none }
html:not(.pokazSciane) #sciana,html:not(.pokazSciane) #wskazowka,html:not(.pokazSciane) #etykieta,html:not(.pokazSciane) #lot,html:not(.pokazSciane) #pasek{ display:none!important }
/* mgla ma jeden zegar w pod.js, zeby nie przeskakiwala przy przelaczeniu */
#mgla i{ animation:none!important }

/* TELEFON W PIONIE: film gra w ekranie tabletu, w pionie, pod grzybnia. Przycisk obrotu kladzie go wzdluz tabletu. */
#filmZamknij{ display:none }
@media (orientation:portrait) and (max-width:820px){
  html.gra:not(.bok) #glowny{ inset:0; top:0; bottom:0; width:100%; height:100%; aspect-ratio:auto; overflow:hidden }
  html.gra:not(.bok) #glowny > iframe,html.gra:not(.bok) #glowny > video{ inset:auto; left:50%; top:50%; transform:translate(-50%,-50%); width:max(100cqw,177.78cqh); height:max(56.25cqw,100cqh); max-width:none; object-fit:cover }
  html.gra:not(.bok) #dol{ left:auto; right:12%; top:9%; bottom:auto; z-index:4 }
  html.gra:not(.bok) #lista,html.gra:not(.bok) #podpis{ display:none!important }
  html.gra:not(.bok) #obrWideo{ position:static; width:42px; height:42px; border-radius:50%; background:rgba(8,9,11,.66); display:grid; place-items:center }
  html.gra #filmZamknij{ display:grid; place-items:center; position:absolute; inset:auto; right:12%; top:calc(9% + 50px); width:42px; height:42px; padding:0; border:0; border-radius:50%; background:rgba(8,9,11,.66); color:#f4f3ef; font:400 24px/1 var(--font); cursor:pointer; z-index:4; animation:none }
}

/* 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 } }
/* po wejsciu z innej strony cien pod nawigacja narasta razem z wjazdem, zamiast stac od pierwszej klatki */
@keyframes cienWej{ from{ opacity:0 } to{ opacity:1 } }
#nav::before{ animation:cienWej 1.1s cubic-bezier(.3,.6,.3,1) .25s both }