/* Wariant E - prawdziwa sofa ze sklepu. Klik w poduszkę unosi ją, a pod nią coś leży. */
:root{
  --sciana:#20444a;
  --podloga:#16323a;
  --krem:#f5ead6;
  --rdza:#a4552c;
  --grafit:#22282a;
  --mosiadz:#d6a94a;
  --prop:2.344;--siedz:43%;--tekst:#f5ead6;--guzik:#f5ead6;--guzik-t:#22282a;--logo:brightness(0) invert(1);--metka-k:#f5ead6;--metka-c:0 1px 3px rgba(40,14,3,.6);--metka-r:.0255;--metka-s:68%;--neon-r:.041;
  --w:min(90vw,calc(46svh*var(--prop)));
  --h:calc(var(--w)/var(--prop));
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{font-family:Lato,Verdana,Arial,sans-serif;color:var(--tekst);background:var(--sciana)}
a{color:inherit}

.scena{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:64px;overflow:hidden;background:linear-gradient(180deg,var(--sciana) 0,var(--sciana) calc(100% - 118px),var(--podloga) calc(100% - 118px))}

.logo{position:absolute;top:22px;left:clamp(16px,3vw,40px);z-index:6}
.logo img{display:block;height:clamp(44px,7vh,68px);width:auto;filter:var(--logo)}
.logo:focus-visible{outline:3px solid var(--krem);outline-offset:4px}

.naglowek{position:absolute;top:clamp(100px,21vh,240px);left:0;right:0;padding:0 16px;text-align:center;transition:opacity .25s,transform .35s}
.naglowek h1{font-family:"Bricolage Grotesque",Georgia,sans-serif;font-weight:800;font-size:clamp(40px,7.2vw,104px);line-height:.98;letter-spacing:-.02em;margin:0}
.naglowek p{font-size:clamp(17px,1.6vw,22px);margin:1.1em 0 0}
.naglowek p b{font-weight:700}
.scena[data-otwarta] .naglowek{opacity:0;transform:translateY(-14px);pointer-events:none}

.sofa{position:relative;width:var(--w);height:var(--h);flex:none}
.sofa::before,.sofa::after{content:"";position:absolute;z-index:0;pointer-events:none}
/* Cień kontaktowy tuż pod podstawą i szeroki, miękki cień rzucany na podłogę. */
.sofa::before{left:6%;right:6%;bottom:-.8%;height:3.2%;background:var(--cien-kontakt,rgba(3,12,14,.7));filter:blur(calc(var(--w)*.005));border-radius:40%}
.sofa::after{left:-1%;right:-1%;bottom:-8%;height:15%;background:radial-gradient(50% 50% at 50% 42%,var(--cien-podloga,rgba(3,12,14,.55)),transparent);filter:blur(calc(var(--w)*.008))}
.warstwa{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1;user-select:none;pointer-events:none}

/* Poduszka: warstwa zdjęcia, przycisk na jej obrysie i metka. Wszystko unosi się razem. */
.poduszka{position:absolute;inset:0;z-index:3;pointer-events:none;transition:transform .62s cubic-bezier(.26,1.42,.42,1)}
.poduszka .plywa{position:absolute;inset:0}
.poduszka img{filter:var(--cien-lezy,drop-shadow(0 2px 2px rgba(0,0,0,.2)));transition:filter .4s}
.poduszka button{position:absolute;z-index:2;top:var(--t,0);height:calc(var(--siedz) - var(--t,0%));left:var(--l);width:var(--s);background:none;border:0;padding:0;cursor:pointer;pointer-events:auto;border-radius:12%;font:inherit}
.poduszka button:focus-visible{outline:3px solid var(--krem);outline-offset:-5px}
/* Opis leży na poduszce. Szerokość i rozmiar liczone od sofy, żeby tekst nie wychodził poza obrys. */
.metka{position:absolute;left:50%;top:53%;width:var(--metka-s);transform:translate(-50%,-50%);color:var(--metka-k);font-family:"Bricolage Grotesque",Georgia,sans-serif;font-weight:800;font-size:max(var(--metka-min,12px),calc(var(--w)*var(--metka-r)));line-height:1.06;text-align:center;text-shadow:var(--metka-c)}

.poduszka:not(.uniesiona):has(button:hover){transform:translateY(-1.6%)}
.poduszka.uniesiona{transform:translateY(calc(-1*var(--unies,300px))) rotate(var(--obrot,-2deg));z-index:5}
.poduszka.uniesiona img{filter:var(--cien-wisi,drop-shadow(0 26px 22px rgba(4,14,16,.5)))}
.poduszka.uniesiona .plywa{animation:plywa 3.6s ease-in-out .7s infinite alternate}
@keyframes plywa{to{transform:translateY(-9px) rotate(var(--kolys,.8deg))}}
.poduszka.zerka{animation:zerka .9s ease-in-out}
@keyframes zerka{0%,100%{transform:none}35%{transform:translateY(-7%) rotate(var(--zerk,-1.4deg))}62%{transform:translateY(-2%)}}
/* Sąsiednie poduszki robią miejsce. */
.scena[data-otwarta] .poduszka:not(.uniesiona){transform:translateY(1.2%) rotate(var(--odsun,0deg))}

/* To, co leży pod poduszką. Stoi pod warstwą poduszek, więc widać to dopiero po uniesieniu. */
.skarb{position:absolute;z-index:2;left:var(--c);bottom:56.6%;transform:translateX(-50%);display:block;width:calc(var(--w)*var(--sz,.16));height:auto;overflow:visible;filter:drop-shadow(0 3px 3px rgba(0,0,0,.45));pointer-events:none}

/* Odkrycie: tekst stoi na sofie, a poduszka wisi nad nim. */
.odkrycie{position:absolute;z-index:6;left:var(--c);bottom:calc(100% + 10px);transform:translate(-50%,14px);width:min(370px,44vw);opacity:0;visibility:hidden;transition:opacity .28s .1s,transform .4s .1s,visibility 0s .4s;text-align:center}
.odkrycie.widoczne{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .28s .18s,transform .4s .18s,visibility 0s}
.odkrycie h2{font-family:"Bricolage Grotesque",Georgia,sans-serif;font-weight:800;font-size:clamp(25px,2.7vw,38px);line-height:1.04;letter-spacing:-.01em;margin:0 0 .3em}
.odkrycie p{font-size:clamp(15px,1.25vw,18px);line-height:1.45;margin:0 0 .85em}
.guzik{display:inline-block;background:var(--guzik);color:var(--guzik-t);font-weight:700;font-size:16px;padding:.72em 1.25em;border-radius:999px;text-decoration:none;transition:background .2s}
.guzik:hover{opacity:.88}
.guzik:focus-visible{outline:3px solid var(--mosiadz);outline-offset:3px}

.odloz{position:absolute;top:22px;right:clamp(16px,3vw,40px);z-index:7;display:none;background:none;color:var(--tekst);border:1.5px solid var(--tekst);border-radius:999px;font:inherit;font-weight:700;font-size:15px;padding:.6em 1.1em;cursor:pointer;transition:background .2s,color .2s}
.scena[data-otwarta] .odloz{display:block}
.odloz:hover{background:var(--tekst);color:var(--sciana)}
.odloz:focus-visible{outline:3px solid var(--mosiadz);outline-offset:3px}
.neon{filter:none;text-align:center;font-family:"Tilt Neon",Lato,sans-serif;font-size:calc(var(--w)*var(--neon-r));line-height:1;color:var(--neon-t,#fff3e4);white-space:nowrap;padding:calc(var(--w)*.006) 0;background:radial-gradient(closest-side,var(--neon-b,rgba(255,84,146,.34)),transparent);text-shadow:0 0 2px #fff,0 0 7px var(--neon-1,#ff7ab0),0 0 16px var(--neon-2,#ff3e8a),0 0 30px var(--neon-2,#ff3e8a)}
.neon small{display:block;font-size:.5em;margin-bottom:.1em}
.scena[data-otwarta="1"] .neon{animation:neon 1.1s steps(1) .25s both}
@keyframes neon{0%{opacity:.15}12%{opacity:1}20%{opacity:.25}34%{opacity:1}42%{opacity:.4}56%,100%{opacity:1}}
.warianty{position:fixed;right:10px;bottom:50px;z-index:9;display:flex;flex-wrap:wrap;gap:4px;align-items:center;justify-content:flex-end;max-width:calc(100vw - 20px);background:#000;color:#fff;font-size:13px;padding:6px 8px;border-radius:8px}
.warianty[hidden]{display:none}
.warianty span{padding:0 4px;font-weight:700}
.warianty button{font:inherit;font-weight:700;background:#333;color:#fff;border:0;border-radius:4px;min-width:30px;padding:5px 8px;cursor:pointer}
.warianty button[aria-pressed=true]{background:var(--krem);color:var(--grafit)}
.skroty{position:absolute;bottom:18px;left:0;right:0;display:flex;justify-content:center;flex-wrap:wrap;gap:6px 22px;padding:0 16px;font-size:15px}
.skroty a{text-underline-offset:3px}
.skroty a:focus-visible{outline:2px solid var(--krem);outline-offset:3px}
.makieta{position:fixed;bottom:8px;left:8px;z-index:9;background:#000;color:#fff;font-size:12px;padding:5px 9px;border-radius:4px}

/* Niskie ekrany laptopów: mniejsza sofa, żeby uniesiona poduszka mieściła się nad tekstem. */
@media (min-width:761px) and (max-height:780px){
  :root{--w:min(90vw,calc(38svh*var(--prop)))}
  .naglowek{top:clamp(76px,20vh,150px)}
  .naglowek h1{font-size:clamp(40px,6vw,78px)}
}
@media (max-width:760px){
  :root{--w:96vw}
  .scena{--gora:max(190px,40svh);justify-content:flex-start;padding:calc(var(--gora) + var(--h)*.42) 0 96px;background:linear-gradient(180deg,var(--sciana) 0,var(--sciana) calc(var(--gora) + var(--h)*1.31),var(--podloga) calc(var(--gora) + var(--h)*1.31))}
  .scena[data-otwarta]{padding-bottom:330px}
  .naglowek{top:max(104px,20svh)}
  .logo img{height:40px}
  .naglowek h1{font-size:clamp(36px,11vw,52px)}
  .metka{width:var(--metka-tel,74%)}
  .odkrycie{bottom:auto;top:calc(100% + 26px);left:0!important;width:100%;padding:0 16px;transform:translateY(14px)}
  .odkrycie.widoczne{transform:none}
  .skroty{bottom:36px}
}
/* Najmniejsze telefony: „sprzedawać” musi zmieścić się na poduszce. */
@media (max-width:360px){
  .metka{width:90%;top:54%;font-size:10px;line-height:1.02}
}
@media (prefers-reduced-motion:reduce){
  .scena[data-otwarta="1"] .neon{animation:none}
  .poduszka,.odkrycie,.odkrycie.widoczne,.naglowek{transition:none}
  .poduszka.uniesiona .plywa,.poduszka.zerka{animation:none}
}
.lub-napisz{display:inline-block;margin-left:.7em;color:inherit;font-weight:700;text-underline-offset:3px}