/* fonty w projekcie (licencja OFL, pliki w assets/fonts), bez podziału na podzbiory, żeby płótno miało polskie znaki */
@font-face{font-family:'Jersey 25';src:url('fonts/Jersey25.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Onest';src:url('fonts/Onest.ttf') format('truetype');font-weight:100 900;font-display:swap}
:root{
  --pink:#ff5fd2; --pink-deep:#c2189a; --violet:#7a1fd1; --ink:#0c0714; --white:#fff;
  --gutter:clamp(16px,4vw,56px);
}
*{box-sizing:border-box}
html{background:var(--ink)}
body{margin:0;background:var(--ink);color:var(--white);font-family:Onest,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
#gl,#fx{position:fixed;inset:0;width:100%;height:100%;display:block}
#gl{z-index:0}
#fx{z-index:3;pointer-events:none}
#postacie{position:fixed;inset:0;z-index:2;pointer-events:none;overflow:hidden}
#postacie img{position:absolute;left:0;top:0;transform-origin:50% 100%;will-change:transform,opacity,filter;
  filter:drop-shadow(0 18px 24px rgba(0,0,0,.45))}
main{position:relative;z-index:4}
section{min-height:100svh;display:grid;place-items:center;padding:12vh var(--gutter)}
section.gora{align-items:start;padding-top:clamp(28px,6vh,72px)}
section.gora .t{text-shadow:0 2px 24px rgba(12,7,20,.8)}
.t{width:min(100%,760px);text-align:center;text-shadow:0 2px 30px rgba(12,7,20,.65)}
.t.lewo{justify-self:start;text-align:left;width:min(100%,560px)}
.znak{font-family:'Jersey 25',Onest,sans-serif;font-weight:400;font-size:clamp(56px,11vw,168px);line-height:.85;letter-spacing:.01em;margin:0;
  text-shadow:0 .06em 0 #3b0f52,0 .12em 0 #1e0730,0 0 60px rgba(255,95,210,.35)}
.znak b{color:var(--pink);font-weight:400;text-shadow:0 .06em 0 #7a0f5c,0 .12em 0 #3d0630,0 0 50px rgba(255,95,210,.8)}
h2{font-weight:700;font-size:clamp(34px,5.4vw,80px);line-height:1;letter-spacing:-.025em;margin:0 0 .35em}
h2 b{color:var(--pink);font-weight:700}
p{font-size:clamp(17px,1.5vw,21px);line-height:1.5;margin:0 auto;max-width:40ch;color:rgba(255,255,255,.9)}
.t.lewo p{margin:0}
.adres{display:inline-flex;align-items:center;gap:4px;margin-top:28px;padding:6px;border-radius:999px;background:rgba(20,8,32,.55);
  border:1px solid rgba(255,95,210,.35);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);max-width:100%}
.adres span{padding:10px 16px;font-weight:700;font-size:clamp(16px,1.4vw,19px)}
.adres button{appearance:none;border:0;border-radius:999px;padding:12px 20px;font:inherit;font-weight:700;color:#1a0620;background:var(--pink);cursor:pointer;
  box-shadow:0 0 30px rgba(255,95,210,.55);transition:transform .2s}
.adres button:hover{transform:translateY(-1px)}
.online{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-size:15px;color:rgba(255,255,255,.8)}
.online i{width:8px;height:8px;background:#5dff7a;box-shadow:0 0 12px #5dff7a;display:block}
.odslon{opacity:0;transform:translateY(24px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.odslon.widac{opacity:1;transform:none}
.szkic{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:5;font-size:12px;color:rgba(255,255,255,.6);text-align:center;width:min(92%,720px);pointer-events:none}
.ladowanie{position:fixed;inset:0;z-index:10;display:grid;place-items:center;background:var(--ink);transition:opacity .8s}
.ladowanie.koniec{opacity:0;pointer-events:none}
.ladowanie .znak{font-size:clamp(40px,7vw,90px)}
@media (max-width:768px){
  section{padding:10vh var(--gutter)}
}