/* Jazzklub · éjfekete, petróleumkék, borostyán és neon rózsaszín-arany. */
@font-face{font-family:'Jazzklub Neon';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/jazzklub-neon.woff2) format('woff2')}
@font-face{font-family:'Poiret One';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/poiret-one.woff2) format('woff2')}
@font-face{font-family:'Jazzklub Szoveg';font-style:normal;font-weight:100 700;font-display:swap;src:url(fonts/jazzklub-szoveg.woff2) format('woff2')}

:root{
  --ej:#07080a;
  --ej-2:#0c1013;
  --petrol:#0e2c33;
  --petrol-2:#13414a;
  --petrol-d:#08191e;
  --amber:#e0a04e;
  --amber-l:#f3c27a;
  --neon:#ff5f9e;
  --neon-l:#ffd0e2;
  --rozsarany:#f6c98b;
  --krem:#efe3cb;
  --tinta:#1b1612;
  --szoveg:#ece4d6;
  --halvany:#b9b0a3;
  --deco:'Poiret One',Didot,'Bodoni 72',serif;
  --neonf:'Jazzklub Neon','Brush Script MT',cursive;
  --sans:'Jazzklub Szoveg','Futura','Century Gothic',system-ui,sans-serif;
  --ease:cubic-bezier(.22,.7,.2,1);
  --bk-edit:rgba(255,95,158,.7);
  --glow-pink:0 0 1px #fff,0 0 .05em #ffe0ec,0 0 .13em #ff7fb1,0 0 .3em #ff3d8b,0 0 .65em rgba(255,40,120,.55);
  --glow-gold:0 0 1px #fff,0 0 .06em #ffe6bb,0 0 .18em #ffae4a,0 0 .45em rgba(255,140,40,.6);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--ej)}
body{margin:0;background:var(--ej);color:var(--szoveg);font:400 1.0625rem/1.65 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.locked{overflow:hidden;height:100svh;touch-action:none}
img{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--amber-l);outline-offset:3px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
p{margin:0 0 1em}

/* ───────────── Fejléc: a klub belseje ───────────── */
.hero{position:relative;height:100svh;min-height:540px;overflow:hidden;isolation:isolate;background:#050506;--u:3.9px;--s:3.9px;--H:844px}
.club{position:absolute;inset:0;z-index:1;transform-origin:50% 56%}
.pl{position:absolute;inset:0;pointer-events:none}
.pl-stage .board{pointer-events:auto}
.wall{position:absolute;left:-4%;right:-4%;top:0;bottom:27%;
  background:
    linear-gradient(to bottom,rgba(4,10,12,.85),rgba(4,10,12,0) 14%),
    repeating-linear-gradient(90deg,rgba(0,0,0,.5) 0,rgba(0,0,0,0) calc(var(--s)*2.4),rgba(140,215,222,.07) calc(var(--s)*3.6),rgba(0,0,0,0) calc(var(--s)*4.9),rgba(0,0,0,.5) calc(var(--s)*7)),
    radial-gradient(ellipse 62% 72% at 50% 48%,#17474f 0%,#0c2a31 52%,#061418 100%)}
.wall::after{content:"";position:absolute;left:0;right:0;bottom:0;height:18%;background:linear-gradient(to bottom,rgba(5,5,6,0),rgba(5,5,6,.7))}
.wallglow{position:absolute;left:50%;top:-6%;width:calc(var(--s)*120);height:52%;transform:translateX(-50%);
  background:radial-gradient(closest-side,rgba(255,80,150,.24),rgba(255,140,90,.08) 58%,transparent)}
.beam{position:absolute;z-index:1;top:-4%;left:calc(50% + var(--s)*2);width:calc(var(--s)*50);margin-left:calc(var(--s)*-25);height:79%;pointer-events:none;
  clip-path:polygon(45% 0,55% 0,100% 100%,0 100%);
  background:linear-gradient(to bottom,rgba(255,238,206,.26),rgba(255,226,182,.11) 62%,rgba(255,220,170,.02))}
.smoke{position:absolute;z-index:1;left:50%;width:calc(var(--s)*150);margin-left:calc(var(--s)*-75);height:42%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(176,206,210,.075),rgba(176,206,210,0));will-change:transform;animation:drift 26s ease-in-out infinite alternate}
.smoke.s1{top:6%}
.smoke.s2{top:30%;animation-duration:34s;animation-direction:alternate-reverse}
.smoke.s3{top:50%;animation-duration:29s;animation-delay:-9s}
@keyframes drift{from{transform:translate3d(-9%,0,0) scale(1)}to{transform:translate3d(9%,-4%,0) scale(1.12)}}
.motes{position:absolute;z-index:1;left:calc(50% + var(--s)*2 - var(--s)*13);width:calc(var(--s)*26);top:14%;height:54%;pointer-events:none}
.motes i{position:absolute;left:calc(6% + var(--i)*7.4%);top:calc(28% + var(--i)*5.2%);width:2px;height:2px;border-radius:50%;background:rgba(255,238,206,.75);opacity:0;
  animation:mote 9s linear infinite;animation-delay:calc(var(--i)*-.77s)}
@keyframes mote{0%{transform:translate3d(0,0,0);opacity:0}20%{opacity:.8}80%{opacity:.5}100%{transform:translate3d(14px,-90px,0);opacity:0}}

.stage{position:absolute;left:-4%;right:-4%;top:72%;height:8%;
  background:
    linear-gradient(to bottom,rgba(243,194,122,.32) 0,rgba(243,194,122,0) 2px),
    linear-gradient(to bottom,#2b1b11,#1a0f09 38%,#0d0806 72%,#050404)}
.stage::after{content:"";position:absolute;left:0;right:0;top:44%;height:1px;background:rgba(243,194,122,.12)}
.pool{position:absolute;left:calc(50% + var(--s)*2 - var(--s)*26);width:calc(var(--s)*52);top:69%;height:7%;
  background:radial-gradient(closest-side,rgba(255,228,186,.34),rgba(255,228,186,0))}
.piano{position:absolute;left:calc(50% - var(--s)*49);width:calc(var(--s)*44);bottom:28%;height:auto;filter:drop-shadow(0 8px 10px rgba(0,0,0,.6))}
.bass{position:absolute;display:none;left:calc(50% + var(--s)*50);width:calc(var(--s)*11);bottom:27.6%;height:auto;transform:rotate(-7deg);transform-origin:50% 100%}
.hero.wide-in .bass{display:block}
.mic{position:absolute;left:calc(50% + var(--s)*2);bottom:27.4%;height:calc(var(--H)*.34);width:calc(var(--H)*.34*64/300);margin-left:calc(var(--H)*-.0363)}
.board{position:absolute;left:calc(50% + var(--s)*13);width:calc(var(--s)*31);bottom:calc(28% + var(--s)*11);transform:rotate(1.4deg);transform-origin:50% 100%}
.board-felt{position:relative;padding:calc(var(--s)*2.4) calc(var(--s)*1.6);text-align:center;color:#f4f1ea;
  border:calc(var(--s)*.9) solid #3b2717;border-radius:2px;box-shadow:0 10px 18px rgba(0,0,0,.55),inset 0 0 0 1px rgba(0,0,0,.6);
  background:repeating-linear-gradient(to bottom,#121416 0,#121416 calc(var(--s)*1.1),#08090a calc(var(--s)*1.1),#08090a calc(var(--s)*1.3))}
.board-felt p{margin:0;font-weight:600;text-transform:uppercase;letter-spacing:.07em;line-height:1.3;text-shadow:0 1px 0 rgba(0,0,0,.6)}
.b-top{font-size:max(12px,calc(var(--s)*3.1))}
.b-date{font-size:max(12px,calc(var(--s)*3.3));margin-top:calc(var(--s)*1.4)!important;color:#ffe6bb}
.b-time{font-size:max(12px,calc(var(--s)*3.3));color:#ffe6bb}
.board .leg{position:absolute;top:100%;width:calc(var(--s)*.9);height:calc(var(--s)*11.4);background:linear-gradient(90deg,#1e130a,#4a3020,#1e130a)}
.board .l1{left:22%;transform:rotate(9deg);transform-origin:50% 0}
.board .l2{right:22%;transform:rotate(-9deg);transform-origin:50% 0}

.tbl{position:absolute;width:calc(var(--s)*42)}
.tbl svg{display:block;width:100%;height:auto}
.tbl.t1{left:calc(50% - var(--s)*60);bottom:4%}
.tbl.t2{left:calc(50% + var(--s)*22);bottom:2.5%}
.tbl.t3{display:none;left:calc(50% + var(--s)*70);bottom:7%;width:calc(var(--s)*34)}
.tbl.t4{display:none;left:calc(50% - var(--s)*98);bottom:7%;width:calc(var(--s)*34)}
.hero.wide-in .tbl.t4{display:block}
.hero.wide-in .tbl.t3{display:block}
.flame{transform-box:fill-box;transform-origin:50% 90%;animation:flick 1.7s ease-in-out infinite alternate}
.tbl.t2 .flame{animation-duration:1.3s;animation-delay:-.4s}
.c-glow{animation:glow 2.3s ease-in-out infinite alternate}
@keyframes flick{0%{transform:scale(1,1) skewX(0)}35%{transform:scale(.92,1.08) skewX(3deg)}70%{transform:scale(1.04,.94) skewX(-2deg)}100%{transform:scale(.97,1.05) skewX(1deg)}}
@keyframes glow{from{opacity:.78}to{opacity:1}}
.sconce{position:absolute;display:none;top:30%;width:calc(var(--s)*7);height:calc(var(--s)*4.2);margin-left:calc(var(--s)*-3.5);border-radius:calc(var(--s)*4) calc(var(--s)*4) 0 0;
  background:repeating-conic-gradient(from -90deg at 50% 100%,#f6cf8c 0deg 6deg,#b9813e 6deg 12deg);box-shadow:0 0 calc(var(--s)*4) rgba(255,190,110,.55)}
.sconce::after{content:"";position:absolute;left:50%;top:100%;width:calc(var(--s)*30);height:calc(var(--s)*22);margin-left:calc(var(--s)*-15);background:radial-gradient(ellipse 50% 60% at 50% 0,rgba(255,196,120,.2),rgba(255,196,120,0))}
.sconce.sc-l{left:calc(50% - var(--s)*72)}.sconce.sc-r{left:calc(50% + var(--s)*76)}
.hero.wide-in .sconce{display:block}
.hero.alszik *,.hero.alszik *::before,.hero.alszik *::after{animation-play-state:paused!important}

/* ───────────── A neonfelirat (kint és bent ugyanaz az elem) ───────────── */
.sign{position:absolute;z-index:4;top:0;left:50%;transform-origin:50% 0;transform:translate3d(-50%,4.5svh,0) scale(.84);
  font-size:var(--f,64px);padding:.34em 6% .36em;text-align:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
.sign::before{content:"";position:absolute;z-index:-1;inset:.05em;border-radius:.42em;background:radial-gradient(ellipse at 50% 40%,rgba(22,10,18,.6),rgba(6,4,8,.8));box-shadow:0 .08em .3em rgba(0,0,0,.55)}
.sign .sign-frame{position:absolute;display:block;inset:0;pointer-events:none}
.sign-frame i{position:absolute;inset:0;border-radius:.42em;border:2px solid rgba(255,226,206,.15);box-shadow:0 2px 3px rgba(0,0,0,.5)}
.sign-frame i::after{content:"";position:absolute;inset:.13em;border-radius:.32em;border:1.5px solid rgba(255,226,206,.1)}
.sign-frame .lit{opacity:0;border-color:#ffe3bd;will-change:opacity;
  box-shadow:0 0 4px #ffc77a,0 0 14px rgba(255,160,60,.65),0 0 34px rgba(255,130,40,.35),inset 0 0 4px #ffc77a,inset 0 0 14px rgba(255,150,60,.4)}
.sign-frame .lit::after{border-color:#ffd6e6;box-shadow:0 0 4px #ff8fbd,0 0 12px rgba(255,70,140,.6),inset 0 0 4px #ff8fbd}
.sign-names{margin:0;font:400 1em/1 var(--neonf);display:flex;flex-direction:column;align-items:center}
.sign.row .sign-names{flex-direction:row;justify-content:center;align-items:baseline;gap:.22em}
.tube{position:relative;display:inline-block;white-space:nowrap}
.tube .glass{color:rgba(255,232,240,.16);text-shadow:0 1px 0 rgba(255,255,255,.08),0 3px 3px rgba(0,0,0,.65)}
.tube .lit{position:absolute;left:0;top:0;color:#fff4f8;text-shadow:var(--glow-pink);opacity:0;will-change:opacity;pointer-events:none}
.nl{padding:0 .08em}
.nl .lit{left:.08em}
.nl.n1{margin-bottom:-.06em}
.nl.es{font-size:.46em;margin:.02em 0 -.02em}
.sign.row .nl.es{margin:0}
.nl.es .lit{color:#fff7ea;text-shadow:var(--glow-gold)}
.sign-date{margin:.34em 0 0;font:400 max(13px,.27em)/1.1 var(--deco);letter-spacing:.14em}
.sign-date .lit{color:#fff7ea;text-shadow:var(--glow-gold)}
.cue{position:absolute;z-index:5;left:50%;bottom:max(14px,2.2svh);transform:translateX(-50%);font:400 .9375rem/1 var(--sans);letter-spacing:.04em;color:var(--halvany);text-decoration:none;padding:10px 12px;white-space:nowrap;transition:opacity .6s ease}
.cue::after{content:"";display:block;width:1px;height:22px;margin:10px auto 0;background:linear-gradient(var(--amber),transparent)}
.hero.is-opening .cue{opacity:0;pointer-events:none}

/* ───────────── Az utca (nyitás) ───────────── */
.street{position:absolute;inset:0;z-index:2;transform-origin:50% 58.5%;will-change:transform,opacity;background:#07090b}
.bricks{position:absolute;left:0;right:0;top:0;bottom:26%;
  background:
    linear-gradient(to bottom,rgba(4,7,10,.82),rgba(4,7,10,.42) 38%,rgba(4,7,10,.58)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='26'%3E%3Crect width='64' height='26' fill='%23120f10'/%3E%3Crect x='1' y='1' width='30' height='11' fill='%232c1b17'/%3E%3Crect x='33' y='1' width='30' height='11' fill='%23261714'/%3E%3Crect x='-15' y='14' width='30' height='11' fill='%23291916'/%3E%3Crect x='17' y='14' width='30' height='11' fill='%23301e19'/%3E%3Crect x='49' y='14' width='30' height='11' fill='%23241513'/%3E%3C/svg%3E") 0 0/calc(var(--u)*15) calc(var(--u)*6.1)}
.spill{position:absolute;left:50%;top:-4%;width:calc(var(--u)*125);height:52%;transform:translateX(-50%);opacity:0;will-change:opacity;
  background:radial-gradient(closest-side,rgba(255,70,140,.34),rgba(255,120,80,.12) 60%,transparent)}
.shop{position:absolute;left:calc(50% - var(--u)*49);width:calc(var(--u)*98);top:39%;bottom:26%;
  background:linear-gradient(to bottom,#0c232a,#071519);box-shadow:0 0 0 1px #040b0d,0 -2px 0 rgba(243,194,122,.18)}
.shop::before,.shop::after{content:"";position:absolute;top:0;bottom:0;width:calc(var(--u)*2.4);background:linear-gradient(90deg,#06100f,#123139 50%,#06100f)}
.shop::before{left:0}.shop::after{right:0}
.fascia{position:absolute;left:0;right:0;top:0;height:calc(var(--H)*.04);background:linear-gradient(#0a1c21,#05100f);border-top:1px solid rgba(243,194,122,.4);border-bottom:1px solid rgba(243,194,122,.3)}
.win{position:absolute;top:calc(var(--H)*.07);height:calc(var(--H)*.2);width:calc(var(--u)*25);border:calc(var(--u)*.8) solid #040b0d;overflow:hidden;box-shadow:inset 0 0 12px rgba(0,0,0,.7)}
.win-l{left:calc(50% - var(--u)*45)}.win-r{left:calc(50% + var(--u)*20)}
.win-l2,.win-r2,.r-wl2,.r-wr2{display:none}
.win-l2{left:calc(50% - var(--u)*76)}.win-r2{left:calc(50% + var(--u)*51)}
.hero.wide .shop{left:calc(50% - var(--u)*80);width:calc(var(--u)*160)}
.hero.wide .win-l2,.hero.wide .win-r2,.hero.wide .r-wl2,.hero.wide .r-wr2{display:block}
.win-in{position:absolute;inset:0;
  background:
    radial-gradient(circle at 28% 74%,rgba(255,196,120,.6),rgba(255,196,120,0) 34%),
    radial-gradient(circle at 76% 40%,rgba(255,160,84,.42),rgba(255,160,84,0) 30%),
    radial-gradient(circle at 60% 92%,rgba(255,214,150,.4),rgba(255,214,150,0) 26%),
    linear-gradient(#3b2414,#1a100a)}
.win-in.bar::after{content:"";position:absolute;left:8%;right:8%;bottom:18%;height:26%;
  background:repeating-linear-gradient(90deg,rgba(10,6,4,.85) 0,rgba(10,6,4,.85) 7%,rgba(0,0,0,0) 7%,rgba(0,0,0,0) 13%);
  -webkit-mask:linear-gradient(to top,#000 60%,rgba(0,0,0,.6));mask:linear-gradient(to top,#000 60%,rgba(0,0,0,.6))}
.mull{position:absolute;left:0;right:0;top:28%;height:calc(var(--u)*.7);background:#040b0d}
.win-neon{position:absolute;left:0;right:0;top:44%;text-align:center;font:400 calc(var(--u)*8)/1 var(--neonf);color:#e8f8ff;
  text-shadow:0 0 1px #fff,0 0 .08em #bfeaff,0 0 .2em #57c4ff,0 0 .5em rgba(40,140,255,.6);will-change:opacity}
.door{position:absolute;left:calc(50% - var(--u)*17);width:calc(var(--u)*34);top:calc(var(--H)*.04);bottom:0;background:#040a0c;perspective:calc(var(--u)*80);box-shadow:0 0 0 calc(var(--u)*.6) #0f2a31}
.transom{position:absolute;left:6%;right:6%;top:3%;height:15%;border-radius:999px 999px 0 0;overflow:hidden;
  background:repeating-conic-gradient(from -90deg at 50% 100%,rgba(255,206,132,.78) 0deg 3deg,#1d140c 3deg 12deg)}
.doorway{position:absolute;left:6%;right:6%;top:21%;bottom:0;background:radial-gradient(ellipse at 50% 62%,#ffe3b0,#f2a24e 46%,#7a3c16 100%)}
.leaf{position:absolute;top:21%;bottom:0;width:44%;background:linear-gradient(90deg,#0a1d22,#123139 50%,#0a1d22);box-shadow:inset 0 0 0 1px rgba(243,194,122,.25);will-change:transform}
.leaf-l{left:6%;transform-origin:0 50%}
.leaf-r{right:6%;transform-origin:100% 50%}
.leaf .pane{position:absolute;left:24%;right:24%;top:9%;height:46%;border-radius:999px 999px 2px 2px;background:linear-gradient(#ffd79c,#d98a3e);opacity:.78;box-shadow:inset 0 0 6px rgba(0,0,0,.5)}
.leaf .push{position:absolute;top:62%;width:14%;height:12%;background:linear-gradient(#e9c27f,#8a6634);border-radius:2px}
.leaf-l .push{right:8%}.leaf-r .push{left:8%}
.step{position:absolute;left:calc(50% - var(--u)*21);width:calc(var(--u)*42);bottom:calc(var(--H)*-.014);height:calc(var(--H)*.014);background:linear-gradient(#2c2a28,#121110)}
.pavement{position:absolute;left:0;right:0;top:74%;bottom:0;overflow:hidden;
  background:linear-gradient(to bottom,#11151a,#07090b 60%,#040506)}
.pavement::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(0,0,0,.32) 0,rgba(0,0,0,.32) 2px,rgba(0,0,0,0) 2px,rgba(0,0,0,0) 7px);pointer-events:none}
.refl{position:absolute;top:0;height:100%;will-change:opacity}
.r-sign{left:calc(50% - var(--u)*40);width:calc(var(--u)*80);opacity:0;background:radial-gradient(ellipse 50% 100% at 50% 0,rgba(255,84,152,.55),rgba(255,84,152,0) 72%)}
.r-gold{left:calc(50% - var(--u)*48);width:calc(var(--u)*96);opacity:0;background:radial-gradient(ellipse 50% 70% at 50% 0,rgba(255,170,80,.26),rgba(255,170,80,0) 70%)}
.r-door{left:calc(50% - var(--u)*15);width:calc(var(--u)*30);opacity:.55;background:radial-gradient(ellipse 50% 100% at 50% 0,rgba(255,196,118,.6),rgba(255,196,118,0) 74%)}
.r-wl{left:calc(50% - var(--u)*45);width:calc(var(--u)*25);background:radial-gradient(ellipse 50% 80% at 50% 0,rgba(255,180,100,.28),rgba(255,180,100,0) 70%)}
.r-wr{left:calc(50% + var(--u)*20);width:calc(var(--u)*25);background:radial-gradient(ellipse 50% 80% at 50% 0,rgba(255,180,100,.28),rgba(255,180,100,0) 70%)}
.r-wl2{left:calc(50% - var(--u)*76);width:calc(var(--u)*25);background:radial-gradient(ellipse 50% 80% at 50% 0,rgba(255,180,100,.24),rgba(255,180,100,0) 70%)}
.r-wr2{left:calc(50% + var(--u)*51);width:calc(var(--u)*25);background:radial-gradient(ellipse 50% 80% at 50% 0,rgba(255,180,100,.24),rgba(255,180,100,0) 70%)}
.r-blue{left:calc(50% - var(--u)*42);width:calc(var(--u)*19);background:radial-gradient(ellipse 50% 70% at 50% 0,rgba(90,180,255,.42),rgba(90,180,255,0) 70%)}
.rain{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.flood{position:absolute;inset:0;opacity:0;pointer-events:none;background:radial-gradient(circle at 50% 58.5%,#ffe6b8,#f0a24e 42%,#5e2c10 100%)}

.scene-ui{position:fixed;z-index:30;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;gap:4px;padding:0 20px calc(max(16px,2svh) + env(safe-area-inset-bottom));pointer-events:none;transition:opacity .5s ease;text-align:center}
.scene-ui.is-gone{opacity:0}
.scene-ui.is-gone *{pointer-events:none!important}
.scene-hint{margin:0;font:400 1.0625rem/1.3 var(--sans);letter-spacing:.02em;color:var(--szoveg);text-shadow:0 1px 6px rgba(0,0,0,.9);transition:opacity .5s ease}
.scene-hint.is-gone{opacity:0}
.scene-skip{pointer-events:auto;appearance:none;background:none;border:0;padding:10px 6px;font:400 .9375rem/1 var(--sans);color:var(--halvany);text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(185,176,163,.5);cursor:pointer;text-shadow:0 1px 6px rgba(0,0,0,.9)}
.scene-skip:hover{color:var(--szoveg)}

/* ───────────── Az oldal ───────────── */
main,footer{position:relative}
.h2{margin:0 0 .55em;font:400 clamp(2.1rem,7vw,2.9rem)/1.12 var(--deco);color:var(--rozsarany)}
.h2::after{content:"";display:block;width:56px;height:1px;margin-top:.42em;background:linear-gradient(90deg,var(--amber),rgba(224,160,78,0))}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 26px;border:1px solid var(--amber);border-radius:2px;background:var(--amber);color:var(--ej);font:600 1rem/1.2 var(--sans);letter-spacing:.04em;text-decoration:none;cursor:pointer;transition:background .2s ease,color .2s ease}
.btn:hover{background:var(--amber-l)}
.btn:disabled{opacity:.6;cursor:progress}
.btn.ghost{background:transparent;color:var(--amber-l)}
.btn.ghost:hover{background:rgba(224,160,78,.12)}

.invite{padding:84px 20px 76px;text-align:center;background:linear-gradient(#050506,var(--ej) 40%)}
.invite-text{max-width:30ch;margin:0 auto 1.4em;font:400 clamp(1.45rem,5.2vw,1.9rem)/1.45 var(--deco);color:var(--krem)}
.when{margin:0 auto 2em}
.when p{margin:0}
.when-date{font:400 clamp(2.3rem,9vw,3.4rem)/1.1 var(--deco);letter-spacing:.05em;color:var(--rozsarany)}
.when-day{margin-top:.5em!important;font-size:1.0625rem;color:var(--szoveg)}
.when-place{font-size:1.0625rem;color:var(--halvany)}

.story{display:grid;gap:44px;max-width:980px;margin:0 auto;padding:56px 20px 72px;align-items:center}
.frame{position:relative;margin:24px auto 0;width:min(100%,380px);padding:10px;transform:rotate(-1.3deg);
  background:linear-gradient(135deg,#7a5a2c,#e9c27f 28%,#8a6634 56%,#d2a964 80%,#6f5127);box-shadow:0 26px 50px rgba(0,0,0,.7),0 0 0 1px rgba(0,0,0,.6)}
.frame img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:saturate(.8) contrast(1.04) sepia(.12);box-shadow:inset 0 0 0 1px rgba(0,0,0,.6)}
.frame::after{content:"";position:absolute;inset:10px;pointer-events:none;background:linear-gradient(to bottom,rgba(255,206,140,.2),rgba(255,206,140,0) 55%)}
.lamp{position:absolute;z-index:2;left:30%;right:30%;top:-16px;height:9px;border-radius:5px 5px 2px 2px;background:linear-gradient(#f0cf93,#8a6634);box-shadow:0 2px 3px rgba(0,0,0,.6)}
.lamp::before{content:"";position:absolute;left:50%;top:-12px;width:2px;height:12px;margin-left:-1px;background:#8a6634}
.story-text{max-width:36rem;margin:0 auto}
.story-text h3{margin:1.2em 0 .3em;font:400 1.6rem/1.2 var(--deco);color:var(--rozsarany)}

.program{padding:40px 16px 84px}
.menu{position:relative;max-width:520px;margin:0 auto;padding:10px;background:var(--krem);color:var(--tinta);border-radius:2px;
  box-shadow:0 34px 70px rgba(0,0,0,.75),0 0 0 1px rgba(0,0,0,.4);
  background-image:radial-gradient(ellipse 90% 60% at 20% 0,rgba(255,196,120,.32),rgba(255,196,120,0) 70%),radial-gradient(ellipse at 50% 100%,rgba(90,60,30,.12),rgba(90,60,30,0) 60%)}
.menu-in{border:3px double #9a7742;padding:26px 20px 18px;text-align:center}
.fan{display:block;width:96px;height:auto;margin:0 auto 10px;fill:none;stroke:#9a7742;stroke-width:1.1}
.menu-title{margin:0;font:400 clamp(2.1rem,8vw,2.7rem)/1.1 var(--deco);color:var(--tinta)}
.menu-sub{margin:.5em 0 1.4em;font-size:.9375rem;color:#4a3f35}
.setlist{list-style:none;margin:0;padding:0;text-align:left}
.setlist li{display:grid;grid-template-columns:4.1em 1fr;column-gap:12px;padding:14px 2px;border-top:1px dotted rgba(60,40,20,.35)}
.setlist li:last-child{border-bottom:1px dotted rgba(60,40,20,.35)}
.s-time{grid-row:span 2;font-weight:600;font-variant-numeric:tabular-nums;color:#8a2f4c;padding-top:1px}
.s-what{font-weight:600;font-size:1.0625rem;line-height:1.35}
.s-desc{grid-column:2;color:#4a3f35;font-size:1rem;line-height:1.5}

.venue{display:grid;gap:40px;justify-items:center;max-width:900px;margin:0 auto;padding:40px 20px 84px}
.matchbook{position:relative;width:min(220px,64vw);transform:rotate(-5deg);filter:drop-shadow(0 22px 26px rgba(0,0,0,.7))}
.mb-cover{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:min(290px,84vw);padding:26px 18px;border-radius:6px 6px 0 0;text-align:center;
  background:radial-gradient(ellipse at 30% 10%,rgba(255,255,255,.08),rgba(255,255,255,0) 50%),linear-gradient(160deg,#155059,#0b2c33 60%,#082228);box-shadow:inset 0 0 0 1px rgba(243,194,122,.35),inset 0 0 0 7px #0b2c33,inset 0 0 0 8px rgba(243,194,122,.55)}
.mb-name{font:400 1.55rem/1.15 var(--deco);color:var(--amber-l);overflow-wrap:anywhere}
.mb-city{font-size:.9375rem;letter-spacing:.06em;color:var(--rozsarany)}
.mb-deco{width:64px;height:32px;border-radius:64px 64px 0 0;background:repeating-conic-gradient(from -90deg at 50% 100%,rgba(243,194,122,.85) 0deg 3deg,transparent 3deg 15deg)}
.mb-deco.b{transform:rotate(180deg)}
.mb-strike{height:30px;border-radius:0 0 6px 6px;background:repeating-linear-gradient(90deg,#3a2419 0,#3a2419 2px,#4d3123 2px,#4d3123 4px);box-shadow:inset 0 3px 4px rgba(0,0,0,.6)}
.mb-strike::before{content:"";position:absolute;left:46%;bottom:22px;width:10px;height:10px;border-radius:2px;background:#bfc3c6;box-shadow:inset 0 -2px 0 #6c7176}
.venue-info{text-align:center}
.venue-info .h2::after{margin-left:auto;margin-right:auto}
.venue-name{margin:0 0 .2em;font:400 1.75rem/1.2 var(--deco);color:var(--krem)}
.venue-addr{color:var(--halvany)}
.venue-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:1.4em}

.good{max-width:900px;margin:0 auto;padding:40px 20px 84px}
.good-grid{display:grid;gap:34px;align-items:start}
.tag{position:relative;max-width:340px;margin:18px auto 0;padding:46px 24px 24px;border-radius:12px;color:var(--tinta);text-align:center;transform:rotate(2deg);
  background:linear-gradient(160deg,#dcb46e,#b88a46 55%,#a77c3e);box-shadow:0 18px 36px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,240,210,.35),inset 0 0 0 6px rgba(0,0,0,.05)}
.tag-hole{position:absolute;left:50%;top:14px;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:var(--ej);box-shadow:inset 0 2px 3px rgba(0,0,0,.8),0 0 0 3px rgba(255,236,200,.5)}
.tag-hole::after{content:"";position:absolute;left:50%;bottom:8px;width:1.5px;height:48px;margin-left:-.75px;background:linear-gradient(rgba(236,228,214,0),rgba(236,228,214,.7))}
.tag h3{margin:0 0 .3em;font:400 1.75rem/1.1 var(--deco)}
.tag-text p{margin:0 0 .6em}
.tag-text p:last-child{margin:0}
.good-list{margin:0}
.good-list div{padding:16px 0;border-top:1px solid rgba(224,160,78,.25)}
.good-list dt{font:400 1.45rem/1.2 var(--deco);color:var(--rozsarany);margin-bottom:.25em}
.good-list dd{margin:0}
.good-list ul{margin:0;padding-left:1.1em}
.good-list li{margin:.2em 0}
.good-list p{margin:0 0 .5em}

.rsvp{padding:30px 16px 90px}
.resv{max-width:580px;margin:0 auto;padding:36px 22px 30px;border-radius:3px;
  background:radial-gradient(ellipse at 50% 0,rgba(255,170,90,.12),rgba(255,170,90,0) 60%),linear-gradient(#103038,#0a2026);
  box-shadow:0 30px 60px rgba(0,0,0,.6),inset 0 0 0 1px rgba(224,160,78,.45),inset 0 0 0 6px rgba(10,32,38,1),inset 0 0 0 7px rgba(224,160,78,.25)}
.rsvp-intro{color:var(--szoveg);margin-bottom:1.6em}
.field{margin:0 0 20px;padding:0;border:0;min-width:0}
.field label,.field legend{display:block;margin-bottom:6px;font-weight:600;font-size:1rem;padding:0}
.field small{display:block;margin-top:6px;font-size:.875rem;color:var(--halvany)}
.input{display:block;width:100%;min-height:48px;padding:11px 12px;border:0;border-bottom:1px solid rgba(236,228,214,.45);border-radius:2px 2px 0 0;background:rgba(0,0,0,.28);font-size:16px;color:var(--szoveg)}
.input::placeholder{color:rgba(185,176,163,.7)}
.input:focus{outline:none;border-bottom-color:var(--amber-l);background:rgba(0,0,0,.4)}
select.input{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--amber-l) 50%),linear-gradient(135deg,var(--amber-l) 50%,transparent 50%);background-position:calc(100% - 18px) 21px,calc(100% - 13px) 21px;background-size:5px 5px;background-repeat:no-repeat;padding-right:36px}
select.input option{background:#0a2026;color:var(--szoveg)}
textarea.input{resize:vertical;min-height:96px}
.choice{display:grid;gap:10px}
.choice label{display:flex;align-items:center;gap:12px;min-height:48px;margin:0;padding:10px 16px;border:1px solid rgba(224,160,78,.45);border-radius:999px;font-weight:400;cursor:pointer;transition:background .2s ease,border-color .2s ease}
.choice label:has(input:checked){background:rgba(224,160,78,.16);border-color:var(--amber-l)}
.choice input{width:20px;height:20px;margin:0;flex:none;accent-color:var(--amber)}
.cond{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.cond>div{overflow:hidden}
.cond.show{grid-template-rows:1fr}
.cond.show>div{padding-top:2px}
.form-error{min-height:1.2em;margin:4px 0 10px;color:#ffb8cf;font-weight:600}
.rsvp-submit{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.demo-note{margin:0;font-size:.875rem;color:var(--halvany)}
.thanks{text-align:center;outline:none}
.thanks-big{margin:0 0 .3em;font:400 3rem/1.1 var(--neonf);color:#fff4f8;text-shadow:var(--glow-pink)}

.closing{padding:70px 20px 96px;text-align:center;background:linear-gradient(var(--ej),#040506)}
.closing-neon{margin:0 0 .25em;font:400 clamp(2.6rem,11vw,3.6rem)/1.1 var(--neonf);color:#fff4f8;text-shadow:var(--glow-pink);overflow-wrap:anywhere}
.closing-neon .amp{font-size:.5em;color:#fff7ea;text-shadow:var(--glow-gold)}
.closing-date{font:400 1.25rem/1.2 var(--deco);letter-spacing:.12em;color:var(--rozsarany)}
.replay{margin-top:18px;appearance:none;background:none;border:0;padding:12px 8px;color:var(--halvany);font:400 1rem/1 var(--sans);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.replay:hover{color:var(--szoveg)}

.gate{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:24px;background:radial-gradient(120% 90% at 50% 30%,#103038,var(--ej) 70%)}
.gate form{width:min(100%,420px);text-align:center}
.gate-neon{margin:0 0 .5em;font:400 clamp(2.4rem,11vw,3.2rem)/1.1 var(--neonf);color:#fff4f8;text-shadow:var(--glow-pink);overflow-wrap:anywhere}
.gate-neon span{font-size:.5em;color:#fff7ea;text-shadow:var(--glow-gold)}
.gate p{color:var(--halvany)}
.gate .input{text-align:center;letter-spacing:.14em;font-size:1.4rem}

/* Görgetésre megjelenés */
.js .rv{opacity:0;transform:translateY(16px);transition:opacity .9s ease,transform 1.1s var(--ease)}
.js .rv.in{opacity:1;transform:none}
.js .frame.rv.in{transform:rotate(-1.3deg)}
.js .tag.rv.in{transform:rotate(2deg)}
.js .matchbook.rv.in{transform:rotate(-5deg)}

@media (min-width:760px){
  .story{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:64px}
  .story .frame{margin-top:0}
  .venue{grid-template-columns:auto minmax(0,1fr);justify-items:start;align-items:center;gap:64px}
  .venue-info{text-align:left}
  .venue-info .h2::after{margin-left:0}
  .venue-actions{justify-content:flex-start}
  .good-grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:56px}
  .good-grid .tag{margin-top:6px}
  .resv{padding:44px 44px 36px}
  .choice{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){
  .js .rv{opacity:1;transform:none;transition:none}
  .js .frame.rv{transform:rotate(-1.3deg)}.js .tag.rv{transform:rotate(2deg)}.js .matchbook.rv{transform:rotate(-5deg)}
  .flame,.c-glow,.smoke,.motes i{animation:none}
  .motes{display:none}
  .cond{transition:none}
}