/* Vet Party Halloween (SGGW): czerń, światło latarki, żar pomarańczu i kości z plakatu */
:root{
  --bg:#0c0a09; --bg2:#130f0c; --bg3:#1a1410;
  --ink:#f1ebe0; --muted:#c7bba9; --soft:#8f8476; --line:rgba(241,235,224,.12);
  --orange:#e2772b; --orange2:#ff9a3d; --blood:#9b2216;
  --x:50vw; --y:52vh; --r:220px; --lit:1; --p:0;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Space Grotesk',system-ui,sans-serif;font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;z-index:100;pointer-events:none;opacity:.1;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:inherit}
h1,h2,h3{margin:0;font-family:Kavoon,'Space Grotesk',sans-serif;font-weight:400;line-height:1}
.wrap{width:min(1180px,100% - 32px);margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--orange2);outline-offset:3px}

.btn{display:inline-flex;align-items:center;gap:12px;text-decoration:none;font:700 17px/1 'Space Grotesk',sans-serif;padding:17px 22px;border-radius:10px;border:0;cursor:pointer;transition:transform .18s,box-shadow .18s,background .18s}
.btn small{font:600 14px/1 'IBM Plex Mono',monospace;opacity:.85}
.btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s}
.btn:hover svg{transform:translateX(4px)}
.btn-orange{background:var(--orange);color:#160903;box-shadow:0 0 0 1px rgba(255,154,61,.4),0 10px 40px rgba(226,119,43,.45)}
.btn-orange:hover{background:var(--orange2);transform:translateY(-2px);box-shadow:0 0 0 1px rgba(255,154,61,.6),0 14px 50px rgba(255,154,61,.55)}
.btn-xl{font-size:20px;padding:21px 28px}

/* pasek */
.bar{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px max(16px,4vw);transition:background .3s,box-shadow .3s}
.bar.solid{background:rgba(12,10,9,.84);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--line)}
.bar-logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--soft);font-size:13px}
.bar-logo img{height:26px;width:auto;display:block}
.bar-nav{display:flex;gap:26px;font-size:14px;font-weight:700}
.bar-nav a{text-decoration:none;color:var(--muted)}
.bar-nav a:hover{color:var(--orange2)}
.bar-buy{text-decoration:none;font-weight:700;font-size:14px;padding:10px 14px;border-radius:9px;background:var(--orange);color:#160903}
.bar-buy b{font-family:'IBM Plex Mono',monospace;font-weight:600}

/* HERO: plakat w ciemności, światło latarki */
.hero{position:relative;height:210vh;background:#000}
.pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;isolation:isolate;background:#000;cursor:crosshair}
.art{position:absolute;left:50%;top:50%;width:var(--aw,102%);height:var(--ah,102%);transform:translate(-50%,-50%);background:url(/h/poster.jpg) center/100% 100% no-repeat}
.art-dim{opacity:.05;filter:grayscale(1) contrast(1.2)}
.art-lit{filter:brightness(var(--lit)) contrast(1.08)}
.lit{position:absolute;inset:0;
  -webkit-mask-image:radial-gradient(circle var(--r) at var(--x) var(--y),#000 0%,rgba(0,0,0,.92) 38%,rgba(0,0,0,.4) 70%,transparent 100%);
  mask-image:radial-gradient(circle var(--r) at var(--x) var(--y),#000 0%,rgba(0,0,0,.92) 38%,rgba(0,0,0,.4) 70%,transparent 100%)}
.beam{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:calc(var(--lit) * (1 - var(--p) * .7));
  background:radial-gradient(circle calc(var(--r) * 1.05) at var(--x) var(--y),rgba(255,196,120,.22),rgba(255,140,50,.06) 55%,transparent 75%)}
.fog{position:absolute;left:-30%;right:-30%;height:60%;pointer-events:none;filter:blur(30px);opacity:.5}
.fog.f1{bottom:-12%;background:radial-gradient(40% 60% at 30% 70%,rgba(190,180,168,.16),transparent 70%),radial-gradient(35% 55% at 75% 80%,rgba(190,180,168,.12),transparent 70%);animation:fog1 26s ease-in-out infinite alternate}
.fog.f2{bottom:-20%;background:radial-gradient(45% 55% at 60% 75%,rgba(160,150,140,.14),transparent 70%);animation:fog2 34s ease-in-out infinite alternate}
@keyframes fog1{to{transform:translateX(12%)}}
@keyframes fog2{to{transform:translateX(-14%)}}
#embers{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero-top{position:absolute;z-index:3;left:0;right:0;top:calc(64px + 2vh);text-align:center;pointer-events:none;opacity:calc(1 - var(--p) * 1.6)}
.kick{margin:0 0 1.2vh;font:600 clamp(11px,1.1vw,13px)/1 'IBM Plex Mono',monospace;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.ttl{display:flex;flex-direction:column;align-items:center;line-height:.86}
.ttl .vet{font-size:min(5.4vw,7.4vh);color:var(--ink);letter-spacing:.02em;text-shadow:0 4px 30px rgba(0,0,0,.9)}
.ttl .hal{font-size:min(14.5vw,19vh);color:var(--orange);letter-spacing:.01em;
  text-shadow:0 0 18px rgba(255,140,50,.55),0 0 60px rgba(226,119,43,.45),0 6px 40px rgba(0,0,0,.9);animation:flick 7s steps(1) infinite}
@keyframes flick{0%,63%,66%,71%,100%{opacity:1}64%,70%{opacity:.55}65%{opacity:.85}}
.pin::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;z-index:2;pointer-events:none;background:linear-gradient(transparent,rgba(0,0,0,.55) 45%,rgba(0,0,0,.88))}
.hero-bottom{position:absolute;z-index:3;left:0;right:0;bottom:max(18px,4.5vh);display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:14px 34px;padding:0 16px}
.when{margin:0;color:var(--muted);font-size:16px;line-height:1.45;text-shadow:0 2px 12px #000}
.when b{color:var(--ink)}
.count{display:flex;flex-direction:column;gap:6px}
.count .lbl{font:600 11px/1 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
.count .num{font:600 clamp(24px,2.6vw,34px)/1 'IBM Plex Mono',monospace;color:var(--orange2);font-variant-numeric:tabular-nums;text-shadow:0 0 16px rgba(255,140,50,.5)}
.count i{font-style:normal;opacity:.6;margin:0 1px}
.count i:first-of-type{margin-right:.35em}
.hint{position:absolute;z-index:3;left:50%;top:calc(64px + 2vh + min(5.4vw,7.4vh) * .86 + min(14.5vw,19vh) * .86 + 4.4vh);transform:translateX(-50%);margin:0;white-space:nowrap;text-align:center;
  font:600 11px/1 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--soft);opacity:calc(.9 - var(--p) * 2)}
.hint .tc{display:none}
@media (hover:none){.hint .pc{display:none}.hint .tc{display:inline}}

/* kości z plakatu jako przerywnik */
.kregi{display:flex;justify-content:space-between;overflow:hidden;height:clamp(70px,11vw,140px);background:var(--bg);opacity:.5}
.kregi span{flex:0 0 auto;width:clamp(260px,40vw,640px);background:url(/h/kregi-dol.png) left center/cover no-repeat;
  -webkit-mask-image:linear-gradient(90deg,#000 45%,transparent);mask-image:linear-gradient(90deg,#000 45%,transparent)}
.kregi span+span{transform:scaleX(-1)}

/* odsłanianie */
.js .rv{opacity:0;transform:translateY(24px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.js .rv.in{opacity:1;transform:none}

/* bilet */
.tix{position:relative;padding:clamp(40px,7vw,100px) 0 clamp(70px,10vw,130px);background:radial-gradient(50% 60% at 72% 50%,rgba(226,119,43,.16),transparent 70%),var(--bg)}
.tix-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,90px);align-items:center}
.tix h2{font-size:clamp(44px,6.4vw,86px)}
.tix h2 em{font-style:normal;color:var(--orange);text-shadow:0 0 30px rgba(226,119,43,.45)}
.tix-copy>p{color:var(--muted);font-size:18px;margin:18px 0 0;max-width:42ch}
.buy{margin-top:28px;padding:24px;border-radius:14px;background:var(--bg3);box-shadow:inset 0 0 0 1px var(--line),0 30px 60px rgba(0,0,0,.5);max-width:460px}
.buy-row,.buy-sum{display:flex;align-items:center;justify-content:space-between;gap:16px}
.buy-row span,.buy-sum span{color:var(--muted);font-weight:700}
.step{display:flex;align-items:center;background:#0d0a08;border-radius:10px;box-shadow:inset 0 0 0 1px var(--line)}
.step button{appearance:none;border:0;background:none;color:var(--ink);font:700 24px/1 'Space Grotesk',sans-serif;width:52px;height:52px;cursor:pointer;border-radius:10px}
.step button:hover{color:var(--orange2)}
.step button:disabled{opacity:.3;cursor:default}
.step output{min-width:44px;text-align:center;font:600 24px/1 'IBM Plex Mono',monospace}
.buy-sum{margin:18px 0;padding-top:18px;border-top:1px dashed rgba(241,235,224,.2)}
.buy-sum b{font:600 30px/1 'IBM Plex Mono',monospace;color:var(--orange2)}
.buy .btn-xl{width:100%;justify-content:center}
.buy-note{margin:14px 0 0;font-size:14px;color:var(--soft);line-height:1.5}
.buy-note b{color:var(--muted)}
.buy-note a{color:var(--orange2)}

/* bilet jako kartonik z perforacją */
.stub{display:grid;grid-template-columns:1fr 112px;max-width:560px;justify-self:center;width:100%;transform:rotate(-3deg);filter:drop-shadow(0 30px 50px rgba(0,0,0,.7)) drop-shadow(0 0 40px rgba(226,119,43,.18))}
.stub-main,.stub-side{background:repeating-linear-gradient(0deg,rgba(30,30,30,.05) 0 1px,transparent 1px 4px),linear-gradient(135deg,#efe9dd,#d8cfbf);color:#1d1916}
.stub-main{position:relative;padding:28px 26px 26px 30px;border-radius:14px 0 0 14px;display:flex;flex-direction:column;gap:6px;
  -webkit-mask:radial-gradient(circle 13px at 100% 0,transparent 98%,#000) top/100% 51% no-repeat,radial-gradient(circle 13px at 100% 100%,transparent 98%,#000) bottom/100% 51% no-repeat;
  mask:radial-gradient(circle 13px at 100% 0,transparent 98%,#000) top/100% 51% no-repeat,radial-gradient(circle 13px at 100% 100%,transparent 98%,#000) bottom/100% 51% no-repeat}
.stub-k{font:600 12px/1 'IBM Plex Mono',monospace;letter-spacing:.16em;opacity:.7}
.stub-t{font:400 clamp(34px,4.4vw,52px)/.95 Kavoon,sans-serif;margin-top:8px}
.stub-h{font:400 clamp(34px,4.4vw,52px)/.95 Kavoon,sans-serif;color:#c25f17}
.stub-d{margin-top:14px;font-weight:700;font-size:16px}
.stub-a{font-size:14px;opacity:.75}
.stub-side{position:relative;border-left:2px dashed rgba(29,25,22,.35);border-radius:0 14px 14px 0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:16px;padding:22px 0;
  -webkit-mask:radial-gradient(circle 13px at 0 0,transparent 98%,#000) top/100% 51% no-repeat,radial-gradient(circle 13px at 0 100%,transparent 98%,#000) bottom/100% 51% no-repeat;
  mask:radial-gradient(circle 13px at 0 0,transparent 98%,#000) top/100% 51% no-repeat,radial-gradient(circle 13px at 0 100%,transparent 98%,#000) bottom/100% 51% no-repeat}
.stub-p{font:600 20px/1 'IBM Plex Mono',monospace;color:var(--blood);white-space:nowrap;margin-top:6px}
.stub-v{font:400 26px/1 Kavoon,sans-serif;writing-mode:vertical-rl;text-orientation:upright;letter-spacing:.05em;opacity:.85}

/* zdjęcia */
.crowd{position:relative;padding:clamp(70px,10vw,130px) 0 clamp(60px,9vw,110px);overflow:hidden;background:var(--bg2);border-top:1px solid var(--line)}
.crowd::before{content:"";position:absolute;right:-60px;top:20px;width:420px;height:392px;background:url(/h/kregi-luk.png) center/contain no-repeat;opacity:.08;pointer-events:none;transform:scaleX(-1)}
.crowd-head{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:20px 60px;align-items:end}
.crowd h2{font-size:clamp(34px,4.6vw,62px);max-width:14ch}
.crowd-head p{margin:0;color:var(--muted);max-width:44ch}
.crowd-head a{color:var(--orange2)}
.rows{display:grid;gap:12px;margin-top:clamp(30px,5vw,56px)}
.row{display:flex;gap:12px;width:max-content;will-change:transform}
.row figure{position:relative;margin:0;flex:none;height:clamp(210px,26vw,360px);border-radius:6px;overflow:hidden;background:#1a1410}
.row figure img{display:block;height:100%;width:auto}
.row figure.tall{aspect-ratio:4/5}
.row figure.tall img{width:100%;object-fit:cover}

/* gdzie i kiedy */
.info{padding:clamp(70px,10vw,130px) 0;border-top:1px solid var(--line);background:var(--bg)}
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,80px);align-items:stretch}
.info h2{font-size:clamp(34px,4.6vw,62px);margin-bottom:26px}
.facts{margin:0}
.facts div{display:grid;grid-template-columns:110px 1fr;gap:16px;padding:22px 0;border-top:1px solid var(--line)}
.facts div:last-child{border-bottom:1px solid var(--line)}
.facts dt{color:var(--soft);font:600 13px/1.9 'IBM Plex Mono',monospace;letter-spacing:.08em;text-transform:uppercase}
.facts dd{margin:0}
.facts strong{display:block;font:400 clamp(22px,2.4vw,30px)/1.1 Kavoon,sans-serif}
.facts span{display:block;color:var(--muted);margin-top:8px}
.facts a{color:var(--orange2)}
.map{position:relative;border-radius:14px;overflow:hidden;min-height:420px;background:#1a1410}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:invert(.92) hue-rotate(180deg) saturate(.35) brightness(.85) contrast(1.1)}
.map .pin{position:absolute;left:16px;bottom:16px;background:rgba(12,10,9,.9);padding:12px 16px;border-radius:10px;font-size:14px;line-height:1.4;height:auto;width:auto;overflow:visible;cursor:auto}
.map .pin b{display:block;font-size:15px;color:var(--orange2)}

/* pytania */
.faq{padding:clamp(70px,10vw,130px) 0;background:var(--bg2);border-top:1px solid var(--line)}
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(30px,6vw,80px);align-items:start}
.faq h2{font-size:clamp(32px,4.2vw,56px);line-height:1.05;position:sticky;top:100px}
.qa details{border-top:1px solid var(--line)}
.qa details:last-child{border-bottom:1px solid var(--line)}
.qa summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;font:700 clamp(17px,1.6vw,21px)/1.3 'Space Grotesk',sans-serif}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";flex:none;font:500 28px/1 'IBM Plex Mono',monospace;color:var(--orange2);transition:transform .25s}
.qa details[open] summary::after{transform:rotate(45deg)}
.qa p{margin:0 0 22px;color:var(--muted);max-width:60ch}
.qa a{color:var(--orange2)}

/* inne imprezy */
.next{padding:clamp(60px,9vw,110px) 0;border-top:1px solid var(--line);background:var(--bg)}
.next h2{font-size:clamp(28px,3.4vw,44px);margin-bottom:28px}
.route{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.route li{padding:22px 20px 6px 0;display:flex;flex-direction:column;gap:6px}
.route li+li{padding-left:20px;border-left:1px solid var(--line)}
.route b{font:400 clamp(34px,4vw,50px)/1 Kavoon,sans-serif}
.route b span{font-size:.5em;color:var(--orange2)}
.route em{font-style:normal;font-weight:700;font-size:17px}
.route i{font-style:normal;color:var(--soft);font-size:14px}
.route a{color:var(--orange2);font-weight:700}

/* finał: świeca */
.final{position:relative;overflow:hidden;padding:clamp(80px,12vw,160px) 0;text-align:center;border-top:1px solid var(--line);
  background:radial-gradient(45% 65% at 50% 105%,rgba(226,119,43,.4),transparent 70%),var(--bg)}
.final::after{content:"";position:absolute;left:50%;bottom:-120px;width:520px;height:260px;margin-left:-260px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,154,61,.35),transparent);animation:candle 3.2s ease-in-out infinite;pointer-events:none}
@keyframes candle{0%,100%{opacity:.75;transform:scale(1)}40%{opacity:1;transform:scale(1.05)}70%{opacity:.6;transform:scale(.97)}}
.final-k{position:relative;margin:0 0 18px;font:600 14px/1 'IBM Plex Mono',monospace;letter-spacing:.2em;color:var(--orange2)}
.final h2{position:relative;font-size:clamp(46px,9vw,130px);line-height:.92;margin-bottom:40px}
.final h2 em{font-style:normal;color:var(--orange);text-shadow:0 0 40px rgba(226,119,43,.5)}
.final .btn{position:relative;z-index:1}

.foot{padding:34px 0 110px;border-top:1px solid var(--line);color:var(--soft);font-size:14px;background:#080706}
.foot-grid{display:flex;flex-wrap:wrap;gap:12px 36px;align-items:center;justify-content:space-between}
.foot-grid p{margin:0}
.foot a{color:var(--muted);text-decoration:none}
.foot a:hover{color:var(--orange2)}
.foot-logo img{height:24px;display:block}

.buybar{position:fixed;z-index:60;left:10px;right:10px;bottom:max(10px,env(safe-area-inset-bottom));display:none;align-items:center;justify-content:space-between;gap:12px;padding:10px 10px 10px 16px;border-radius:12px;background:rgba(20,15,12,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 10px 40px rgba(0,0,0,.6),inset 0 0 0 1px var(--line);font-size:14px;transform:translateY(140%);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.buybar b{color:var(--ink)}
.buybar .btn{padding:13px 16px;font-size:15px}
.buybar.show{transform:none}

@media (max-width:980px){
  .bar-nav{display:none}
  .tix-grid,.crowd-head,.info-grid,.faq-grid{grid-template-columns:1fr}
  .stub{order:-1}
  .faq h2{position:static}
  .route{grid-template-columns:repeat(2,1fr)}
  .route li:nth-child(3){padding-left:0;border-left:0}
  .route li:nth-child(n+3){border-top:1px solid var(--line)}
}
@media (max-width:760px){
  body{font-size:16px}
  .buybar{display:flex}
  .bar{padding:10px 14px}
  .bar-logo span{display:none}
  .hero{height:190vh}
  .hero-top{top:calc(58px + 2vh)}
  .ttl .vet{font-size:9vw}
  .ttl .hal{font-size:min(17.5vw,12vh)}
  .hint{top:calc(58px + 2vh + 9vw * .86 + min(17.5vw,12vh) * .86 + 4vh)}
  .hero-bottom{flex-direction:column;align-items:stretch;text-align:center;gap:12px}
  .hero-bottom .btn{justify-content:center;font-size:19px;padding:19px}
  .count{align-items:center}
  .stub{grid-template-columns:1fr 84px}
  .stub-main{padding:22px 18px 20px 22px}
  .facts div{grid-template-columns:1fr;gap:4px;padding:18px 0}
  .map{min-height:320px}
}
@media (prefers-reduced-motion:reduce){
  .js .rv{transition:none}html{scroll-behavior:auto}
  .fog,.ttl .hal,.final::after{animation:none}
}

/* nietoperze w hero */
.bat{position:absolute;left:0;z-index:2;width:52px;height:24px;pointer-events:none;animation:batfly var(--d,6s) linear forwards}
.bat svg{display:block;width:100%;height:100%;fill:#120c08;filter:drop-shadow(0 0 5px rgba(255,140,50,.55));animation:flap .2s ease-in-out infinite alternate;transform-origin:50% 45%}
@keyframes flap{from{transform:scaleY(1)}to{transform:scaleY(.3)}}
@keyframes batfly{
  from{transform:translate(var(--x0),0) scaleX(var(--s,1)) scaleY(calc(var(--s,1) * var(--s,1) / var(--s,1)))}
  50%{transform:translate(calc((var(--x0) + var(--x1)) / 2),var(--dy,-40px)) scaleX(var(--s,1))}
  to{transform:translate(var(--x1),0) scaleX(var(--s,1))}}
