:root{--bg:#04060a;--ink:#efe8d8;--muted:#9a9483;--gold:#d9ad62;--cyan:#6ff3e8;--bar:7vh;--h:190;--acc:hsl(var(--h) 85% 68%);--acc2:hsl(calc(var(--h) + 20) 70% 60%)}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--bg);color:var(--ink);overflow:hidden}
body{font-family:'JetBrains Mono',ui-monospace,monospace;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit}
.serif{font-family:'Cormorant Garamond',serif}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

/* ================= scenes ================= */
.scene{position:fixed;inset:0;opacity:0;pointer-events:none;transition:opacity 1s}
.scene.on{opacity:1;pointer-events:auto}

/* ---------- seal plates ---------- */
.frame{position:fixed;left:50%;top:43%;transform:translate(-50%,-50%);transition:top 3.2s cubic-bezier(.6,0,.2,1),width 3.2s cubic-bezier(.6,0,.2,1),height 3.2s cubic-bezier(.6,0,.2,1)}
.frame.fit{-webkit-mask:radial-gradient(ellipse 50% 50% at 50% 50%,#000 72%,transparent 100%);mask:radial-gradient(ellipse 50% 50% at 50% 50%,#000 72%,transparent 100%)}
.cover .frame{top:50%}
.plate{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s}
.plate.show{opacity:1}
svg.hot{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transition:opacity .5s}
.w{cursor:pointer;outline:none}
.w path,.w circle.hit{fill:transparent;stroke:transparent;transition:fill .35s,stroke .35s}
.w:hover path,.w:focus-visible path,.w:hover circle.hit,.w:focus-visible circle.hit{fill:rgba(111,243,232,.16);stroke:rgba(111,243,232,.8);stroke-width:2}
.w.on path{fill:url(#litGrad);stroke:rgba(255,226,160,.9);filter:url(#glow)}
.w .tag{opacity:0;transition:opacity .3s;pointer-events:none}
.w:hover .tag,.w:focus-visible .tag,.w.on .tag{opacity:1}
.tag line{stroke:rgba(111,243,232,.5);stroke-width:.8}
.tag text{font-family:'JetBrains Mono',monospace;fill:var(--ink);font-size:15px;letter-spacing:2px}
.tag .sub{fill:var(--muted);font-size:10px;letter-spacing:3px}
.ord{opacity:0;transition:opacity .3s}.w.on .ord{opacity:1}
.ord circle{fill:#ffe2a0}
.ord text{fill:#0a0a0a;font:600 13px 'JetBrains Mono',monospace;text-anchor:middle;dominant-baseline:central}
.seal-pulse{animation:sealPulse 2.4s ease-in-out infinite}
@keyframes sealPulse{50%{opacity:.35}}

.caption{position:fixed;left:0;right:0;bottom:calc(var(--bar) + 3vh);text-align:center;z-index:15;transition:opacity .8s;pointer-events:none;padding:0 16px}
.caption h1{font:400 clamp(22px,3vw,40px)/1.15 'Cormorant Garamond',serif;text-shadow:0 2px 30px #000}
.caption h1 i{color:var(--gold)}
.caption p{margin-top:10px;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}
.chips{display:flex;justify-content:center;gap:8px;margin-top:10px;min-height:22px;flex-wrap:wrap}
.chips span{border:1px solid rgba(111,243,232,.4);border-radius:99px;padding:3px 10px;font-size:10px;letter-spacing:.2em;color:var(--cyan);animation:pop .4s ease-out}
@keyframes pop{from{opacity:0;transform:scale(.6)}}
.film .caption,.film svg.hot{opacity:0;pointer-events:none}

/* ================= chrome ================= */
.bar{position:fixed;left:0;right:0;height:var(--bar);background:#000;z-index:40;display:flex;align-items:center;justify-content:space-between;padding:0 3vw;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);transition:height 1.4s cubic-bezier(.7,0,.2,1),background .8s,transform 1s}
.bar.top{top:0}.bar.bot{bottom:0}
.film .bar{height:calc(var(--bar) * 1.7)}
.inworld .bar.top{height:64px;background:rgba(4,6,10,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.05)}
.inworld .bar.bot{transform:translateY(100%)}
.brand{display:flex;align-items:center;gap:12px;cursor:pointer}
.brand b{width:30px;height:30px;border:1px solid var(--gold);border-radius:50%;display:grid;place-items:center;color:var(--gold);font:500 13px 'Cormorant Garamond',serif;letter-spacing:0}
.ctl{display:flex;gap:20px;align-items:center}
.ctl button{letter-spacing:.3em;text-transform:uppercase;font-size:10px;color:var(--muted)}
.ctl button:hover{color:var(--ink)}
.snd-bars{display:inline-flex;gap:2px;align-items:flex-end;height:10px;margin-right:6px;vertical-align:-1px}
.snd-bars i{width:2px;background:currentColor;animation:eq 1s ease-in-out infinite}
.snd-bars i:nth-child(2){animation-delay:.2s}.snd-bars i:nth-child(3){animation-delay:.4s}
@keyframes eq{0%,100%{height:3px}50%{height:10px}}
.muted .snd-bars i{animation:none;height:2px}

.grain{position:fixed;inset:-50%;z-index:38;pointer-events:none;opacity:.06;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain .5s steps(4) infinite}
@keyframes grain{25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-1%,-2%)}}
.vig{position:fixed;inset:0;z-index:37;pointer-events:none;background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.6))}
.flash{position:fixed;inset:0;z-index:60;pointer-events:none;background:radial-gradient(circle,#fff,hsl(var(--h) 90% 75%) 40%,transparent 75%);opacity:0}
.flash.go{animation:flash 1s ease-out}
@keyframes flash{15%{opacity:.95}100%{opacity:0}}
.black{position:fixed;inset:0;background:#000;z-index:70;display:grid;place-items:center;transition:opacity 1.6s;pointer-events:none}
.black p{font:italic 500 clamp(18px,2.4vw,30px) 'Cormorant Garamond',serif;color:var(--gold);opacity:0;animation:intro 3.2s ease forwards;text-align:center}
.black p small{display:block;font:400 9px 'JetBrains Mono',monospace;letter-spacing:.5em;color:var(--muted);margin-top:12px;font-style:normal;text-transform:uppercase}
@keyframes intro{25%,70%{opacity:1}100%{opacity:0}}
.ready .black{opacity:0}

/* ---------- menu ---------- */
.menu{position:fixed;inset:0;z-index:50;background:rgba(3,4,8,.92);backdrop-filter:blur(14px);display:grid;place-items:center;opacity:0;pointer-events:none;transition:opacity .5s;padding:80px 24px 40px;overflow:auto}
.menu.on{opacity:1;pointer-events:auto}
.menu ol{list-style:none;display:grid;gap:4px;width:min(720px,100%)}
.menu li button{width:100%;display:grid;grid-template-columns:64px 1fr auto;gap:16px;align-items:baseline;text-align:left;padding:14px 8px;border-bottom:1px solid rgba(255,255,255,.07);transition:background .3s,padding .3s}
.menu li button:hover{background:rgba(111,243,232,.06);padding-left:16px}
.menu .mno{color:var(--gold);font-size:11px;letter-spacing:.2em}
.menu .mname{font:400 clamp(22px,3vw,34px)/1 'Cormorant Garamond',serif}
.menu .mdim{font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}
.menu .mfoot{margin-top:28px;font-size:10px;letter-spacing:.25em;color:var(--muted);text-transform:uppercase;text-align:center}

/* ================= world ================= */
#world{background:#000}
/* Portale: zmiękczone, przyciemnione tło-kolaż jako premium backdrop pod tytułem */
#world[data-w="portale"] .wbg img{filter:saturate(.7) brightness(.72) blur(2.5px);transform:scale(1.08)}
#world[data-w="portale"] .wshade{background:radial-gradient(130% 95% at 28% 18%,transparent,rgba(2,5,9,.55) 52%,rgba(2,5,9,.93) 100%),linear-gradient(180deg,rgba(2,5,9,.5),rgba(2,5,9,.15) 34%,rgba(2,5,9,.92))}
.wbg{position:absolute;inset:0;overflow:hidden}
.wbg video,.wbg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(calc(1.02 + var(--sp,0) * .12));transition:opacity 1.2s}
.wshade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.1) 30%,rgba(0,0,0,.65));opacity:1}
.wshade2{position:absolute;inset:0;background:#04060a;opacity:calc(var(--sp,0) * .9)}
.wfx{position:absolute;inset:0;pointer-events:none;opacity:calc(.25 + var(--sp,0) * .5);mix-blend-mode:screen}
.wscroll{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}
.wscroll::-webkit-scrollbar{width:6px}.wscroll::-webkit-scrollbar-thumb{background:hsl(var(--h) 60% 50% / .4);border-radius:3px}
.sec{position:relative;display:grid;place-items:center;padding:clamp(70px,11vh,120px) 6vw}
.w-hero{min-height:100vh}.w-hook{min-height:72vh}
.wrap{width:min(1180px,100%)}

/* hero */
.w-hero{place-items:end start;padding-bottom:14vh;padding-top:110px}
.w-meta{display:flex;gap:14px;flex-wrap:wrap;align-items:center;font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:#d8d2c2;margin-bottom:18px}
.w-meta .no{color:var(--acc)}
.ph{border:1px solid hsl(var(--h) 80% 65% / .5);border-radius:99px;padding:5px 12px;color:var(--acc);background:rgba(0,0,0,.35);backdrop-filter:blur(6px)}
.ph i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--acc);margin-right:8px;box-shadow:0 0 10px var(--acc);animation:sealPulse 1.6s infinite}
.w-name{font:400 clamp(46px,9vw,140px)/.92 'Cormorant Garamond',serif;text-shadow:0 4px 60px rgba(0,0,0,.7);letter-spacing:-.01em}
.w-name .wd{display:inline-block;white-space:nowrap}
.w-name .wd span{display:inline-block;opacity:0;transform:translateY(.35em) rotateX(40deg);filter:blur(10px);transition:all 1s cubic-bezier(.2,.8,.2,1)}
.shown .w-name .wd span{opacity:1;transform:none;filter:none}
.w-claim{margin-top:22px;max-width:30em;font:italic 400 clamp(18px,2.2vw,28px)/1.3 'Cormorant Garamond',serif;color:#efe2c4;text-shadow:0 2px 20px #000;opacity:0;transform:translateY(20px);transition:all 1.2s 1.1s}
.shown .w-claim{opacity:1;transform:none}
.cue{position:absolute;right:6vw;bottom:5vh;font-size:9px;letter-spacing:.4em;text-transform:uppercase;color:var(--muted);display:grid;justify-items:center;gap:10px}
.cue i{width:1px;height:40px;background:linear-gradient(var(--acc),transparent);animation:cue 2s infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* reveal system */
[data-r]{opacity:0;transform:translateY(40px);filter:blur(6px);transition:opacity 1.1s cubic-bezier(.2,.8,.2,1),transform 1.1s cubic-bezier(.2,.8,.2,1),filter 1.1s}
[data-r].in{opacity:1;transform:none;filter:none}
.words .wd{display:inline-block;opacity:.12;transition:opacity .5s,color .5s,text-shadow .5s}
.words .wd.lit{opacity:1}
.w-hook p{font:400 clamp(28px,4.4vw,64px)/1.12 'Cormorant Garamond',serif;max-width:20em}
.w-hook p .wd.lit:nth-child(5n+3){color:var(--acc);text-shadow:0 0 30px hsl(var(--h) 90% 60% / .5)}

/* problem / answer */
.pa{display:grid;grid-template-columns:1fr 1fr;gap:3vw;align-items:stretch}
.card{padding:clamp(24px,3vw,44px);border:1px solid rgba(255,255,255,.08);border-radius:18px;background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.01));backdrop-filter:blur(10px);position:relative;overflow:hidden}
.card small,.kicker{display:block;font-size:10px;letter-spacing:.35em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.card p{font-size:clamp(14px,1.25vw,17px);line-height:1.7;color:#ddd6c6}
.card.ans{border-color:hsl(var(--h) 80% 60% / .35)}
.card.ans small{color:var(--acc)}
.card.ans::before{content:'';position:absolute;inset:-1px;background:radial-gradient(600px circle at var(--mx,50%) var(--my,0%),hsl(var(--h) 90% 60% / .18),transparent 40%);pointer-events:none}
.h2{font:400 clamp(30px,4vw,56px)/1.05 'Cormorant Garamond',serif;margin-bottom:10px}

/* module */
.mod-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:26px;flex-wrap:wrap}
.mod-body{position:relative;border-radius:20px;overflow:hidden;border:1px solid hsl(var(--h) 70% 60% / .25);background:#05070b;box-shadow:0 40px 120px -40px hsl(var(--h) 90% 50% / .35)}
.note{margin-top:12px;font-size:10px;letter-spacing:.12em;color:#6f6a5e}
.btn{display:inline-flex;align-items:center;gap:10px;font-size:10px;letter-spacing:.3em;text-transform:uppercase;padding:14px 22px;border-radius:99px;border:1px solid hsl(var(--h) 80% 65% / .6);background:hsl(var(--h) 80% 60% / .1);backdrop-filter:blur(8px);text-decoration:none;color:var(--ink);transition:background .3s,transform .3s}
.btn:hover{background:hsl(var(--h) 80% 60% / .25);transform:translateY(-2px)}
.btn.ghost{border-color:rgba(255,255,255,.18);background:rgba(0,0,0,.3);color:var(--muted)}
.btn.small{padding:10px 16px}

/* stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2px;border-radius:18px;overflow:hidden}
.stat{padding:clamp(24px,3vw,40px);background:rgba(255,255,255,.035);backdrop-filter:blur(8px)}
.stat b{display:block;font:400 clamp(48px,6vw,88px)/1 'Cormorant Garamond',serif;color:var(--ink)}
.stat b em{font-style:normal;font-size:.4em;color:var(--acc);margin-left:6px;letter-spacing:.02em}
.stat span{display:block;margin-top:12px;font-size:10px;letter-spacing:.25em;text-transform:uppercase;color:var(--muted)}

/* timeline: done | next */
.tl2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,60px);margin-top:28px}
.tl2 h3{font:400 13px 'JetBrains Mono',monospace;letter-spacing:.3em;text-transform:uppercase;margin-bottom:18px;color:var(--gold)}
.tl2 .plan h3{color:var(--acc)}
.tl2 ol{list-style:none;position:relative;display:grid;gap:18px;padding-left:26px}
.tl2 ol::before{content:'';position:absolute;left:5px;top:6px;bottom:6px;width:1px;background:linear-gradient(var(--gold),rgba(217,173,98,.15))}
.tl2 .plan ol::before{background:repeating-linear-gradient(var(--acc) 0 4px,transparent 4px 9px);opacity:.6}
.tl2 li{position:relative;opacity:0;transform:translateX(-14px);transition:all .7s cubic-bezier(.2,.8,.2,1)}
.in .tl2 li,.tl2.in li{opacity:1;transform:none}
.tl2 li::before{content:'';position:absolute;left:-26px;top:4px;width:11px;height:11px;border-radius:50%;background:var(--gold);box-shadow:0 0 12px var(--gold)}
.tl2 .plan li::before{background:#05070b;border:1px dashed var(--acc);box-shadow:none}
.tl2 time{font-size:11px;letter-spacing:.2em;color:var(--gold)}
.tl2 .plan time{color:var(--acc)}
.tl2 p{margin-top:6px;font-size:14px;line-height:1.55;color:#d6cfbf}
.honest{margin-top:26px;font-size:11px;color:var(--muted);letter-spacing:.08em}
.honest b{color:var(--gold);font-weight:400}
@media (max-width:720px){.tl2{grid-template-columns:1fr}}

/* chips */
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 30px}
.tags span{padding:9px 14px;border-radius:99px;border:1px solid rgba(255,255,255,.12);font-size:12px;color:#d6cfbf;background:rgba(0,0,0,.3)}
.tags.tech span{font-size:11px;color:var(--acc);border-color:hsl(var(--h) 70% 60% / .3)}

/* cta + dimension cards */
.cta{padding-bottom:6vh}.cta h2{font:400 clamp(38px,6vw,92px)/1 'Cormorant Garamond',serif}
.cta p{max-width:36em;margin:20px 0 30px;color:#cfc8b8;line-height:1.7}
.cta .btns{display:flex;gap:12px;flex-wrap:wrap}
.dims{margin-top:20px;display:grid;grid-template-columns:repeat(7,1fr);gap:10px}
@media (max-width:1000px){.dims{grid-template-columns:repeat(4,1fr)}}@media (max-width:560px){.dims{grid-template-columns:repeat(2,1fr)}}
.dim{position:relative;aspect-ratio:3/4;border-radius:14px;overflow:hidden;text-align:left;border:1px solid rgba(255,255,255,.1);transition:transform .5s cubic-bezier(.2,.8,.2,1),border-color .5s}
.dim img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s,filter .6s;filter:saturate(.6) brightness(.6)}
.dim:hover{transform:translateY(-6px);border-color:var(--gold)}
.dim:hover img{transform:scale(1.1);filter:none}
.dim::after{content:'';position:absolute;inset:40% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.92));pointer-events:none}
.dim span{position:absolute;z-index:1;left:10px;right:10px;bottom:10px;line-height:1.5;font-size:9px;letter-spacing:.25em;text-transform:uppercase;color:var(--gold)}
.dim strong{display:block;margin-top:6px;font:400 20px/1.05 'Cormorant Garamond',serif;color:var(--ink);letter-spacing:0;text-transform:none}
.foot{margin-top:60px;padding-top:24px;border-top:1px solid rgba(255,255,255,.08);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:10px;letter-spacing:.2em;color:#6f6a5e;text-transform:uppercase}

/* jump between worlds */
.jump{position:fixed;inset:0;z-index:45;background:#000;opacity:0;pointer-events:none;transition:opacity .5s}
.jump.on{opacity:1;pointer-events:auto}
.jump video{width:100%;height:100%;object-fit:cover}

/* ================= per-dimension textures ================= */
.fx-arc{background:radial-gradient(circle at 50% 120%,rgba(111,243,232,.2),transparent 60%)}
.fx-urz{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97'%3E%3Cpath d='M28 0l28 16v32L28 64 0 48V16zM28 64v33' fill='none' stroke='%236ff3e8' stroke-opacity='.18'/%3E%3C/svg%3E");animation:hexdrift 30s linear infinite}
@keyframes hexdrift{to{background-position:56px 97px}}
.fx-lab{background:radial-gradient(ellipse at 20% 0%,rgba(255,40,20,.25),transparent 55%)}
.fx-glos{background:repeating-linear-gradient(90deg,transparent 0 6px,rgba(255,200,110,.05) 6px 7px)}
.fx-drewno{background-image:radial-gradient(rgba(255,210,120,.35) 1px,transparent 1.5px);background-size:14px 14px;-webkit-mask:linear-gradient(180deg,transparent,#000 70%);mask:linear-gradient(180deg,transparent,#000 70%)}
.fx-pol{background:repeating-radial-gradient(ellipse at 50% 140%,transparent 0 60px,rgba(255,210,120,.08) 61px 62px)}
.fx-mala{background:repeating-radial-gradient(circle at 30% 70%,transparent 0 22px,rgba(255,210,120,.06) 23px 24px)}

@media (max-width:820px){.pa{grid-template-columns:1fr}.sec{padding:96px 18px 70px}.w-hero{padding-bottom:16vh}}
@media (max-width:640px){:root{--bar:9vh}.ctl #skip{display:none}.brand span{display:none}.ctl{gap:14px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01s!important}}

.bar a{color:inherit;text-decoration:none;border-bottom:1px solid transparent}.bar a:hover{color:var(--ink);border-color:var(--gold)}
html[lang=pl] .langs a[lang=pl],html[lang=en] .langs a[lang=en]{color:var(--gold)}
.legal{max-width:760px;margin:0 auto;padding:clamp(24px,4vw,48px);border-radius:18px;background:rgba(4,6,10,.82);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.08)}
.legal h1{font:400 clamp(34px,4.4vw,56px)/1.05 'Cormorant Garamond',serif;margin-bottom:6px}
.legal .lver{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:26px}
.legal h3{font:400 24px/1.2 'Cormorant Garamond',serif;margin:30px 0 10px;color:#f3e6c6}
.legal h3 span{display:block;font:400 10px 'JetBrains Mono',monospace;letter-spacing:.25em;color:var(--gold);margin-bottom:4px}
.legal p,.legal li{font-size:13px;line-height:1.75;color:#d6cfbf;margin-bottom:8px}
.legal ul{padding-left:20px;margin-bottom:10px}
.doc{padding-top:110px}

.nojs{position:relative;z-index:80;max-width:760px;margin:0 auto;padding:90px 20px;background:#04060a;color:#efe8d8;font:15px/1.6 Georgia,serif}.nojs a{color:#d9ad62}