@font-face{font-family:Cormorant;src:url(fonts/cg-latin-ext-600.woff2) format("woff2");font-weight:600;font-display:swap;unicode-range:U+0100-02AF,U+1E00-1EFF}
@font-face{font-family:Cormorant;src:url(fonts/cg-latin-600.woff2) format("woff2");font-weight:600;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+20AC}
@font-face{font-family:Mulish;src:url(fonts/mu-latin-ext-400.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0100-02AF,U+1E00-1EFF}
@font-face{font-family:Mulish;src:url(fonts/mu-latin-400.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+20AC}
@font-face{font-family:Mulish;src:url(fonts/mu-latin-ext-700.woff2) format("woff2");font-weight:700;font-display:swap;unicode-range:U+0100-02AF,U+1E00-1EFF}
@font-face{font-family:Mulish;src:url(fonts/mu-latin-700.woff2) format("woff2");font-weight:700;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+20AC}

:root{--noc:#15121c;--noc2:#2a2230;--papier:#f8f4ea;--zloto:#d9b878;--t:#f6f1e6;--t2:#d9d3c7}
*{box-sizing:border-box;margin:0}
html{background:var(--noc);-webkit-text-size-adjust:100%;overflow-x:clip}
body{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;background:radial-gradient(ellipse at 30% 42%,var(--noc2) 0,var(--noc) 62%);color:var(--t);font:400 16px/1.6 Mulish,Arial,sans-serif;overflow-x:clip}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
h1,h2,.logo,.ok-imie{font-family:Cormorant,Georgia,serif;font-weight:600;line-height:1.2}
:focus-visible{outline:3px solid var(--zloto);outline-offset:3px}
[hidden]{display:none!important}

/* pasek */
.pasek{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:8px max(16px,3vw);background:rgba(21,18,28,.92);border-bottom:1px solid rgba(217,184,120,.3)}
.logo{font-size:24px;min-width:0}
.przyciski{display:flex;gap:8px;flex:none}
.ikona{display:grid;place-items:center;width:48px;height:48px;border:1px solid rgba(217,184,120,.55);border-radius:50%;color:var(--zloto)}
.ikona svg{width:24px;height:24px}
.gra #dzwiekX{display:none}

/* układ */
.uklad{display:grid;grid-template-columns:minmax(0,1.42fr) minmax(0,1fr);gap:56px;align-items:center;width:100%;max-width:1280px;margin:0 auto;padding:56px max(16px,3vw) 72px}
.teatr{perspective:1700px;padding:12px 3%}
.scena{position:relative;width:100%;aspect-ratio:4/3;transform-style:preserve-3d;transform:rotateX(calc(4deg + var(--rx,0deg))) rotateY(var(--ry,0deg));--lx:50%;--ly:27%}
.warstwy{position:absolute;inset:0;transform-style:preserve-3d;border-radius:2px;background:#0f0b10;box-shadow:0 40px 80px rgba(0,0,0,.65)}

/* światło zza papieru */
.tylne{position:absolute;inset:0;overflow:hidden;background:#241a1c;border-radius:2px;transform:translateZ(2px)}
.zamknieta .poswiata{background:#e6c88e;animation:none}
.poswiata{position:absolute;inset:-10%;background:radial-gradient(circle at var(--lx) var(--ly),#fff5dc 0,#eccf95 8%,#a5804f 22%,#57403a 42%,#2a1f28 70%,#1b1520 100%);animation:oddech 6s ease-in-out infinite alternate}
@keyframes oddech{from{opacity:.84}to{opacity:1}}
.tylne::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 27%,rgba(255,240,205,.7),rgba(235,195,130,.32) 30%,transparent 62%);opacity:0;transition:opacity 1.600s}
.final .tylne::after{opacity:1}
.gwiazda-t{position:absolute;left:50%;top:12%;width:22%;margin-left:-11%;overflow:visible;opacity:.9;filter:drop-shadow(0 0 7px #ffe8b8);transition:opacity 1s,filter 1s,transform 1.200s cubic-bezier(.2,1.5,.4,1)}
.final .gwiazda-t{opacity:1;filter:drop-shadow(0 0 26px #fff4d4);transform:scale(1.25)}
.promienie{transform-origin:100px 100px;transform-box:view-box;animation:obrot 60s linear infinite;opacity:.4;transition:opacity 1s}
.final .promienie{opacity:1}
@keyframes obrot{to{transform:rotate(360deg)}}

/* warstwy ażuru */
.warstwa{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;transform-origin:50% 100%;transform:translateZ(var(--z)) rotateX(-90deg) scale(var(--s));transition:transform 1.100s cubic-bezier(.2,1.1,.35,1);transition-delay:calc(var(--i)*170ms);filter:drop-shadow(0 7px 8px rgba(24,12,6,.55));will-change:transform;animation:kolys 8s ease-in-out infinite alternate}
.otwarta .warstwa{transform:translateZ(var(--z)) rotateX(0) scale(var(--s))}
.zamknieta .warstwa{visibility:hidden}
.t0{animation-duration:10s}.t1{animation-duration:7.500s;animation-direction:alternate-reverse}.t2{animation:none}.t3{animation-duration:9s;animation-direction:alternate-reverse}.t4{animation:none;filter:drop-shadow(0 10px 14px rgba(24,12,6,.65))}
@keyframes kolys{from{translate:-2px 0}to{translate:2px 0}}
.zlota{stroke-dasharray:3200;stroke-dashoffset:3200;transition:stroke-dashoffset 2.400s .5s}
.otwarta .zlota{stroke-dashoffset:0}
#drobinki{position:absolute;inset:-6%;width:112%;height:112%;pointer-events:none;transform:translateZ(60px)}
.przyklad{position:absolute;left:0;right:0;bottom:1.3%;text-align:center;color:#5c4b30;font-size:13px;line-height:1.2;font-weight:700;pointer-events:none;transform:translateZ(130px);opacity:0;transition:opacity .6s 1.200s}
.otwarta .przyklad{opacity:1}

/* okładka: ażurowy brzeg, przez który widać światło */
.okladka{position:absolute;inset:0;z-index:5;display:block;padding:0;color:#2b2019;transform-origin:50% 0;transform:translateZ(140px);transition:transform 1.100s cubic-bezier(.45,.05,.3,1),opacity .35s .75s;backface-visibility:hidden;border-radius:2px}
.otwarta .okladka{transform:translateZ(140px) rotateX(165deg);opacity:0;pointer-events:none}
.ok-azur,.ok-azur svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.ok-azur{filter:drop-shadow(0 12px 18px rgba(0,0,0,.5))}
.ok-tresc{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:18% 16%;text-align:center}
.ok-imie{font-size:clamp(25px,3.300vw,44px)}
.ok-od{font-size:16px;font-weight:700;color:#6a5426;overflow-wrap:normal}
.ok-otworz{display:inline-flex;align-items:center;min-height:48px;margin-top:10px;padding:0 26px;border:1px solid #2b2019;font-weight:700;font-size:16px;transition:background .25s,color .25s}
.okladka:hover .ok-otworz{background:#2b2019;color:var(--papier)}

/* prawa strona */
.tekst{min-width:0}
.wstep h1{font-size:clamp(34px,3.500vw,48px);margin-bottom:16px}
.wstep p{font-size:18px;color:var(--t2)}
.pole{display:block;margin-top:28px;font-weight:700}
.wstep input{display:block;width:100%;min-height:52px;margin-top:4px;padding:0 2px;background:transparent;border:0;border-bottom:1px solid var(--zloto);font-family:Cormorant,Georgia,serif;font-weight:600;font-size:28px;line-height:1.2}
.wstep input:focus{outline:0;border-bottom-width:2px}
.p{display:flex;align-items:center;justify-content:center;width:100%;min-height:52px;margin-top:12px;padding:6px 12px;border:1px solid rgba(217,184,120,.65);background:transparent;font-weight:700;text-align:center;line-height:1.25;transition:background .2s,color .2s}
.p:hover{background:rgba(217,184,120,.14)}
.glowny{background:var(--zloto);color:#1d150a;border-color:var(--zloto);margin-top:20px}
.glowny:hover{background:#ecd19a;color:#1d150a}
.pisane{position:relative;display:inline-block;margin-bottom:14px;min-height:1.2em;font-size:clamp(34px,3.500vw,48px)}
.pisane #imie{display:inline-block;clip-path:inset(0 100% 0 0)}
.pisze #imie{transition:clip-path 1.300s .5s steps(30);clip-path:inset(-20% -5% -20% 0)}
.pioro{position:absolute;left:0;top:-14px;width:34px;height:34px;opacity:0}
.pisze .pioro{animation:pioro 1.300s .5s linear forwards}
@keyframes pioro{0%{left:0;opacity:1}90%{left:100%;opacity:1}100%{left:100%;opacity:0}}
.tresc{font-size:18px;line-height:1.7}
.od{margin-top:14px;font-weight:700;color:var(--zloto)}
.zyczenia .tresc,.zyczenia .od,.zyczenia .p{animation:wejdz .8s 1s both}
@keyframes wejdz{from{opacity:0}to{opacity:1}}
#chce{display:none}.final #chce{display:flex}.final #akcja{display:none}
.final #chce,.final #znowu{animation:wejdz .8s .9s both}
.panel{display:grid;grid-template-columns:1fr 1fr;gap:0 10px;margin-top:6px}
.panel .p{min-height:48px;font-size:16px}
.tylko-tel{display:none}.telefon .tylko-tel{display:flex}

/* stopka */
.stopka{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 32px;margin-top:auto;padding:16px max(16px,3vw);border-top:1px solid rgba(217,184,120,.3)}
.podpis{display:flex;align-items:center;gap:14px}
.podpis img{height:48px;width:auto;flex:none}
.dane{display:flex;flex-direction:column;line-height:1.3}
.dane b{font-size:16px;margin-bottom:2px}
.dane a{display:flex;align-items:center;min-height:32px;font-size:16px;color:var(--t2)}
.dane a:hover{color:var(--zloto)}
.nw{white-space:nowrap}
.zapr{display:inline-flex;flex-wrap:wrap;gap:6px;align-items:center;min-height:48px;font-size:16px}
.zapr b{color:var(--zloto);text-decoration:underline;text-underline-offset:3px}
.dymek{position:fixed;left:50%;bottom:24px;z-index:60;width:max-content;max-width:90vw;padding:12px 20px;background:var(--papier);color:#201a12;font-weight:700;font-size:16px;transform:translate(-50%,20px);opacity:0;transition:.25s;pointer-events:none}
.dymek.widac{opacity:1;transform:translate(-50%,0)}

@media (max-width:900px){
 .uklad{grid-template-columns:minmax(0,1fr);gap:32px;padding:30px 16px 56px}
 .teatr{padding:6px 2%}
 .stopka{flex-direction:column;align-items:flex-start}
 .dane a{min-height:48px}
 .ok-tresc{padding:17% 14%}
 .ok-otworz{margin-top:6px}
}
.pauza *,.pauza *::after{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){*,*::after{transition-duration:.01s!important;transition-delay:0s!important;animation-duration:.01s!important;animation-iteration-count:1!important}}