:root { --red:#ff2b1c; --mx:50vw; --my:50vh; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:#050000; }
body { margin:0; min-width:320px; color:#fff; background:#050000; overflow-x:hidden; font-family:Tahoma,Arial,sans-serif; }
body.modal-open { overflow:hidden; }
button,a { -webkit-tap-highlight-color:transparent; }
button { font:inherit; }
img { display:block; max-width:100%; height:auto; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.scene { position:fixed; inset:0; z-index:-2; overflow:hidden; background:#090000 url("assets/bg-desktop.webp") center/cover no-repeat; }
.scene::after { content:""; position:absolute; inset:0; background:radial-gradient(circle 260px at var(--mx) var(--my),rgba(255,73,21,.16),transparent 72%); }
.scene__vignette { position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.08),transparent 35%,rgba(0,0,0,.08) 82%,rgba(0,0,0,.25)); }
.scene__grain { position:absolute; inset:-60%; opacity:.045; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation:grain .25s steps(2) infinite; }
.scene__fog { position:absolute; left:-30%; width:160%; height:33%; border-radius:50%; opacity:.11; filter:blur(55px); background:repeating-radial-gradient(ellipse at center,#ead9cc 0 1.5%,transparent 3% 10%); pointer-events:none; }
.scene__fog--one { bottom:-8%; animation:fog 25s linear infinite; }
.scene__fog--two { top:30%; opacity:.065; animation:fog 38s linear infinite reverse; }
.scene__embers { position:absolute; inset:0; }
.ember { position:absolute; bottom:-10px; width:3px; height:3px; border-radius:50%; opacity:0; background:#ff6a23; box-shadow:0 0 9px 2px #f20; animation:ember var(--duration) linear var(--delay) infinite; }
.scene__flash { position:fixed; inset:0; z-index:60; pointer-events:none; background:#fff; opacity:0; mix-blend-mode:screen; }
body.jump-scare .scene__flash { animation:flash .52s ease-out; }
body.jump-scare main { animation:shake .38s ease-out; }
.topbar { position:fixed; z-index:30; top:0; left:0; right:0; display:flex; align-items:center; justify-content:space-between; padding:max(9px,env(safe-area-inset-top)) clamp(12px,3vw,44px) 4px; pointer-events:none; background:linear-gradient(#090000b8,transparent); }
.logo,.sound-toggle { pointer-events:auto; }
.logo { position:relative; display:block; filter:drop-shadow(0 0 15px #ff160055); }
.logo::before { content:""; position:absolute; inset:14% 9%; border-radius:50%; background:#ff1e0e; filter:blur(24px); opacity:.2; animation:logoPulse 2.2s ease-in-out infinite; }
.logo::after { content:""; position:absolute; z-index:3; top:9%; bottom:9%; width:16%; left:-18%; transform:skewX(-20deg); background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent); filter:blur(1px); animation:logoShine 3.8s ease-in-out infinite; }
.logo__crop { position:relative; z-index:2; display:block; width:clamp(150px,18vw,245px); height:clamp(47px,5.6vw,76px); overflow:hidden; }
.logo__crop img { position:absolute; width:155%; max-width:none; left:50%; top:55%; transform:translate(-50%,-50%); }
.logo__spark { position:absolute; z-index:4; width:7px; height:7px; border-radius:50%; background:#fff; box-shadow:0 0 7px 2px #fff,0 0 17px 6px #ffef73; animation:spark 2.2s ease-in-out infinite; }
.logo__spark::before,.logo__spark::after { content:""; position:absolute; left:50%; top:50%; background:#fff; transform:translate(-50%,-50%); }
.logo__spark::before { width:1px; height:19px; }
.logo__spark::after { width:19px; height:1px; }
.logo__spark--one { top:19%; right:8%; }
.logo__spark--two { bottom:20%; left:17%; animation-delay:-1.1s; transform:scale(.65); }
.sound-toggle { display:flex; align-items:center; gap:9px; min-height:42px; padding:9px 14px; color:#ffd9d2; border:1px solid #8b2c22; border-radius:999px; background:#120202d9; box-shadow:0 0 24px #f001; backdrop-filter:blur(10px); cursor:pointer; }
.sound-toggle > span:last-child { font-size:10px; font-weight:700; }
.sound-toggle__icon { display:flex; align-items:center; gap:2px; height:16px; }
.sound-toggle__icon i { display:block; width:2px; height:4px; border-radius:3px; background:#ff4b39; }
.sound-toggle[aria-pressed="true"] { border-color:#ff624c; box-shadow:0 0 25px #ff1b0045; }
.sound-toggle[aria-pressed="true"] .sound-toggle__icon i { animation:wave .55s ease-in-out infinite alternate; }
.sound-toggle[aria-pressed="true"] .sound-toggle__icon i:nth-child(2) { animation-delay:-.25s; }
.sound-toggle[aria-pressed="true"] .sound-toggle__icon i:nth-child(3) { animation-delay:-.4s; }
.hero { position:relative; display:grid; place-items:center; padding:clamp(64px,6vw,88px) 14px 8px; }
.hero__halo { position:absolute; width:min(78vw,760px); aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,#ff320018,transparent 67%); filter:blur(10px); animation:halo 3.2s ease-in-out infinite; }
.hero__frame { position:relative; z-index:2; width:min(570px,88vw); padding:6px; background:linear-gradient(135deg,#ff8b45,#5a0601 20%,#160000 52%,#ff3f22); box-shadow:0 20px 62px #000b,0 0 36px #ff21003b; overflow:hidden; }
.hero__frame::before { content:""; position:absolute; z-index:2; inset:7px; border:1px solid #ffcfaa55; pointer-events:none; }
.hero__frame video { display:block; width:100%; aspect-ratio:1; object-fit:cover; background:#090000 url("assets/event-hero.webp") center/cover no-repeat; }
.hero__shine { position:absolute; z-index:3; inset:7px; pointer-events:none; background:linear-gradient(110deg,transparent 28%,rgba(255,255,255,.18) 49%,transparent 68%); transform:translateX(-130%); animation:heroShine 4.2s ease-in-out 1s infinite; }
.houses { position:relative; width:min(100%,940px); margin:0 auto; padding:0 clamp(8px,3vw,28px) 36px; display:grid; gap:0; }
.house { position:relative; z-index:2; width:100%; padding:0; border:0; background:transparent; cursor:pointer; isolation:isolate; transition:transform .35s cubic-bezier(.16,1,.3,1),filter .35s; }
.house:nth-of-type(2) { transform:translateX(-4%); }
.house:nth-of-type(3) { transform:translateX(3%); }
.house:not(:first-child) { margin-top:-28px; }
.house:hover,.house:focus-visible { transform:translateY(-10px) scale(1.025); filter:brightness(1.13) saturate(1.15); outline:none; }
.house:nth-of-type(2):hover,.house:nth-of-type(2):focus-visible { transform:translateX(-4%) translateY(-10px) scale(1.025); }
.house:nth-of-type(3):hover,.house:nth-of-type(3):focus-visible { transform:translateX(3%) translateY(-10px) scale(1.025); }
.house img { position:relative; z-index:2; width:100%; filter:drop-shadow(0 22px 28px #000) drop-shadow(0 0 10px #e21b0d55); }
.house__aura { position:absolute; z-index:1; inset:18% 7%; border-radius:45%; background:radial-gradient(ellipse,#ff260034 0,transparent 70%); filter:blur(25px); animation:aura 2.6s ease-in-out infinite; }
.house__tap { position:absolute; z-index:4; right:7.5%; bottom:9%; width:38px; height:38px; border-radius:50%; border:1px solid #ff806b; background:#ae170dd9; box-shadow:0 0 0 0 #ff392c88,0 0 25px #f30; animation:tapPulse 1.8s ease-out infinite; }
.house__tap i::before,.house__tap i::after { content:""; position:absolute; left:50%; top:50%; background:#fff; transform:translate(-50%,-50%); }
.house__tap i::before { width:13px; height:2px; }
.house__tap i::after { width:2px; height:13px; }
.haunt-fx { position:fixed; inset:0; z-index:8; overflow:hidden; pointer-events:none; }
.fx-web { position:absolute; top:-46px; width:190px; height:190px; opacity:.22; background:repeating-conic-gradient(from 8deg at 50% 50%,transparent 0 13deg,#ffd4ca 14deg 14.7deg,transparent 15deg 28deg),repeating-radial-gradient(circle at 50% 50%,transparent 0 21px,#ffd4ca 22px 23px,transparent 24px 39px); filter:drop-shadow(0 0 5px #ff2c1c88); }
.fx-web--left { left:-52px; transform:rotate(-16deg); }
.fx-web--right { right:-52px; transform:scaleX(-1) rotate(-16deg); }
.fx-bat { position:absolute; width:44px; height:20px; background:#080000; clip-path:polygon(0 55%,15% 12%,36% 37%,50% 0,64% 37%,85% 12%,100% 55%,78% 44%,66% 100%,50% 57%,34% 100%,22% 44%); filter:drop-shadow(0 0 5px #ff1d0d); opacity:.72; }
.fx-bat--one { top:19%; left:-60px; animation:batFly 13s linear infinite; }
.fx-bat--two { top:48%; left:-80px; transform:scale(.65); animation:batFly 17s linear -7s infinite; }
.fx-bat--three { top:72%; left:-70px; transform:scale(.82); animation:batFly 20s linear -12s infinite; }
.fx-ghost { position:absolute; width:48px; height:58px; border-radius:50% 50% 36% 36%; background:radial-gradient(circle at 40% 35%,#fff 0 5%,transparent 6%),radial-gradient(circle at 62% 35%,#fff 0 5%,transparent 6%),linear-gradient(180deg,rgba(255,255,255,.52),rgba(255,255,255,.05)); filter:blur(.2px) drop-shadow(0 0 12px #fff7); opacity:.32; }
.fx-ghost::after { content:""; position:absolute; left:9px; right:9px; bottom:-7px; height:16px; background:inherit; clip-path:polygon(0 0,18% 100%,38% 0,58% 100%,78% 0,100% 100%,100% 0); }
.fx-ghost--one { top:31%; right:5%; animation:ghostFloat 7s ease-in-out infinite; }
.fx-ghost--two { top:66%; left:4%; transform:scale(.7); animation:ghostFloat 9s ease-in-out -4s infinite reverse; }
.fx-pumpkin { position:absolute; width:42px; height:34px; border-radius:48% 52% 48% 52%; background:radial-gradient(ellipse at 35% 55%,#ffb343 0 7%,transparent 8%),radial-gradient(ellipse at 67% 55%,#ffb343 0 7%,transparent 8%),radial-gradient(ellipse at center,#ff6a19,#6b0c03 74%); box-shadow:inset 8px 0 #ff9b2526,inset -8px 0 #29000040,0 0 20px #ff3c0066; opacity:.72; }
.fx-pumpkin::before { content:""; position:absolute; width:7px; height:10px; left:18px; top:-7px; border-radius:2px; background:#4f371c; }
.fx-pumpkin--one { right:2%; bottom:10%; animation:pumpkinFloat 5s ease-in-out infinite; }
.fx-pumpkin--two { left:2%; bottom:35%; transform:scale(.68); animation:pumpkinFloat 6s ease-in-out -2s infinite reverse; }
.fx-eyes { position:absolute; width:34px; height:9px; opacity:0; filter:drop-shadow(0 0 6px #ff1c00); animation:eyesBlink 5.6s ease-in-out infinite; }
.fx-eyes::before,.fx-eyes::after { content:""; position:absolute; top:0; width:12px; height:8px; border-radius:60% 20% 55% 20%; background:#ff3b1f; box-shadow:0 0 10px #f20; }
.fx-eyes::before { left:0; transform:rotate(8deg); }
.fx-eyes::after { right:0; transform:scaleX(-1) rotate(8deg); }
.fx-eyes--one { top:43%; left:7%; }
.fx-eyes--two { top:61%; right:8%; animation-delay:-2.1s; transform:scale(.72); }
.fx-eyes--three { bottom:8%; left:44%; animation-delay:-4.2s; transform:scale(.55); }
.fx-spider { position:absolute; top:-8px; right:17%; width:1px; height:20vh; min-height:100px; max-height:190px; background:linear-gradient(#ddd9,transparent); animation:spiderDrop 7s ease-in-out infinite; }
.fx-spider b { position:absolute; left:-8px; bottom:-15px; width:17px; height:20px; border-radius:50%; background:#050000; box-shadow:0 0 7px #ff2a1caa; }
.fx-spider b::before,.fx-spider b::after { content:""; position:absolute; inset:2px -7px; border-top:2px solid #050000; border-bottom:2px solid #050000; transform:rotate(30deg); }
.fx-spider b::after { transform:rotate(-30deg); }
.portal { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:max(14px,env(safe-area-inset-top)) 14px max(14px,env(safe-area-inset-bottom)); visibility:hidden; opacity:0; transition:visibility .5s,opacity .32s; }
.portal.is-open { visibility:visible; opacity:1; }
.portal__backdrop { position:absolute; inset:0; width:100%; height:100%; padding:0; border:0; cursor:pointer; background:radial-gradient(circle at center,#5a0804e8,#090000fa 62%,#000); backdrop-filter:blur(15px); }
.portal__rays { position:absolute; width:120vmax; height:120vmax; background:repeating-conic-gradient(from 0deg,transparent 0deg 10deg,#ff261009 11deg 12deg); animation:spin 50s linear infinite; }
.portal__panel { position:relative; z-index:2; width:min(700px,94vw); max-height:95svh; display:grid; gap:12px; justify-items:center; opacity:0; transform:scale(.66) rotate(-3deg); filter:blur(12px); transition:.62s cubic-bezier(.16,1,.3,1); }
.portal.is-open .portal__panel { opacity:1; transform:scale(1); filter:none; }
.portal__image { position:relative; padding:6px; background:linear-gradient(135deg,#ff9d64,#5d0904 26%,#140100 58%,#ff311e); box-shadow:0 35px 100px #000,0 0 70px #ff210035; overflow:hidden; }
.portal__image img { max-height:calc(95svh - 76px); width:100%; object-fit:contain; background:#120000; }
.portal__image span { position:absolute; inset:6px; pointer-events:none; background:linear-gradient(110deg,transparent 28%,rgba(255,255,255,.17) 49%,transparent 67%); transform:translateX(-130%); animation:popupShine 2.3s ease-out .35s; }
.back-button { display:flex; align-items:center; justify-content:center; gap:10px; min-width:150px; padding:12px 20px; color:#fff; border:1px solid #ff624d; background:linear-gradient(#d62718,#870b06); box-shadow:0 12px 35px #0008,0 0 20px #f002; cursor:pointer; }
.back-button i { font-style:normal; font-size:20px; }
.back-button b { font-size:12px; }
@keyframes grain { 0%{transform:translate(1%,1%)} 25%{transform:translate(-2%,3%)} 50%{transform:translate(3%,-1%)} 75%{transform:translate(-1%,-2%)} 100%{transform:translate(2%,1%)} }
@keyframes fog { to{transform:translateX(25%) scale(1.08)} }
@keyframes ember { 0%{transform:translate(0,0);opacity:0} 12%{opacity:.9} 80%{opacity:.3} 100%{transform:translate(50px,-105vh);opacity:0} }
@keyframes flash { 0%,100%{opacity:0} 8%{opacity:.9} 16%{opacity:.04} 23%{opacity:.65} 40%{opacity:0} }
@keyframes shake { 0%,100%{transform:none} 25%{transform:translate(-5px,2px)} 45%{transform:translate(5px,-3px)} 70%{transform:translate(-2px,2px)} }
@keyframes logoPulse { 50%{opacity:.58;transform:scale(1.08)} }
@keyframes logoShine { 0%,52%{left:-18%;opacity:0} 63%{opacity:1} 78%,100%{left:110%;opacity:0} }
@keyframes spark { 0%,100%{opacity:.15;transform:scale(.25) rotate(0)} 48%{opacity:1;transform:scale(1) rotate(90deg)} }
@keyframes wave { to{height:15px;background:#ffc4a2} }
@keyframes halo { 50%{transform:scale(1.08);opacity:.65} }
@keyframes heroShine { 0%,55%{transform:translateX(-130%)} 80%,100%{transform:translateX(130%)} }
@keyframes arrow { 0%,100%{opacity:.15;transform:translateY(-4px) rotate(45deg)} 50%{opacity:1;transform:translateY(4px) rotate(45deg)} }
@keyframes aura { 50%{transform:scale(1.12);opacity:.55} }
@keyframes tapPulse { 70%{box-shadow:0 0 0 15px transparent,0 0 28px #f30} 100%{box-shadow:0 0 0 0 transparent,0 0 25px #f30} }
@keyframes spin { to{transform:rotate(360deg)} }
@keyframes popupShine { to{transform:translateX(130%)} }
@keyframes batFly { 0%{left:-70px;transform:translateY(0) rotate(-5deg)} 35%{transform:translateY(-45px) rotate(7deg)} 70%{transform:translateY(30px) rotate(-4deg)} 100%{left:calc(100% + 70px);transform:translateY(-10px) rotate(5deg)} }
@keyframes ghostFloat { 0%,100%{transform:translate(0,0) rotate(-3deg)} 50%{transform:translate(-20px,-34px) rotate(5deg);opacity:.5} }
@keyframes pumpkinFloat { 0%,100%{translate:0 0;rotate:-4deg} 50%{translate:0 -22px;rotate:5deg} }
@keyframes eyesBlink { 0%,40%,44%,48%,100%{opacity:0} 41%,43%,45%,47%{opacity:.88} }
@keyframes spiderDrop { 0%,100%{transform:translateY(-34%)} 48%,58%{transform:translateY(10%)} }
@media (max-width:700px) {
  .scene { background-image:url("assets/bg-mobile.webp"); background-position:center top; }
  .topbar { padding:9px 11px 8px; }
  .logo__crop { width:150px; height:47px; }
  .sound-toggle { min-width:42px; justify-content:center; padding:9px 11px; }
  .sound-toggle > span:last-child { display:none; }
  .hero { padding:55px 7px 4px; }
  .hero__frame { width:min(94vw,520px); padding:5px; }
  .hero__frame::before,.hero__shine { inset:5px; }
  .houses { padding:0 3px 22px; gap:0; }
  .house:nth-of-type(2),.house:nth-of-type(3),.house:nth-of-type(2):hover,.house:nth-of-type(3):hover { transform:none; }
  .house:hover,.house:focus-visible { transform:scale(1.015); }
  .house:not(:first-child) { margin-top:-20px; }
  .house__tap { right:8%; bottom:7%; width:34px; height:34px; }
  .fx-bat { width:34px; height:16px; }
  .fx-ghost--one { right:-8px; }
  .fx-pumpkin { opacity:.58; }
  .fx-web { width:140px; height:140px; top:-35px; }
  .fx-web--left { left:-48px; }
  .fx-web--right { right:-48px; }
  .fx-spider { right:13%; max-height:150px; }
  .portal__image img { max-height:calc(94svh - 68px); }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; transition-duration:.01ms!important; } }