/* ===== Helovino EVENT ===== */
.evb{display:none}
[data-theme=hall] .evb{display:inline-flex;align-items:center;gap:8px;margin-bottom:22px;padding:7px 14px 7px 10px;border-radius:30px;font:800 11px inherit;letter-spacing:2px;text-transform:uppercase;color:#ffb347;background:rgba(255,122,0,.1);border:1px solid rgba(255,122,0,.45);box-shadow:0 0 24px rgba(255,122,0,.25);animation:evg 2.4s ease-in-out infinite}
[data-theme=hall] .hero h1 span{color:transparent;background:linear-gradient(180deg,#ffb347,#ff7a00 55%,#b33900);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 0 18px rgba(255,122,0,.45));animation:flk 6s infinite}
[data-theme=hall] h2 b{text-shadow:0 0 18px rgba(255,122,0,.55);animation:flk 7s infinite}
@keyframes flk{0%,19%,21%,23%,62%,64%,100%{opacity:1}20%,22%,63%{opacity:.35}}
[data-theme=hall] .btn:not(.o){box-shadow:0 0 0 0 rgba(255,122,0,.5),0 8px 24px rgba(255,122,0,.25)}
[data-theme=hall] .btn:not(.o):hover{box-shadow:0 0 28px rgba(255,122,0,.6)}
[data-theme=hall] .card:hover,[data-theme=hall] .ch:hover{box-shadow:0 0 0 1px rgba(255,122,0,.5),0 20px 50px rgba(255,90,0,.18)}
[data-theme=hall] .brand{box-shadow:0 0 0 1px rgba(255,122,0,.35),0 0 30px rgba(255,122,0,.25)}
[data-theme=hall] .hero:after{background:linear-gradient(180deg,rgba(123,44,191,.28),transparent 80%)}
[data-theme=hall] #pb{background:linear-gradient(90deg,#7b2cbf,#ff7a00)}

/* Atmosfera */
#fx{position:fixed;inset:0;pointer-events:none;z-index:5;overflow:hidden}
#fx .bt{position:absolute;left:-90px;color:#1a0d24;filter:drop-shadow(0 0 6px rgba(255,122,0,.35));opacity:.85;animation:bat linear infinite}
@keyframes bat{25%{margin-top:-30px}50%{margin-top:10px}75%{margin-top:-40px}to{transform:translateX(calc(100vw + 180px))}}
#fx .gh{position:absolute;right:-120px;color:rgba(235,225,255,.16);animation:ghost 34s linear infinite;filter:blur(.3px)}
#fx .gh.g2{animation-duration:46s;animation-delay:14s;color:rgba(235,225,255,.1)}
@keyframes ghost{0%{transform:translate(0,0)}25%{transform:translate(-30vw,-30px)}50%{transform:translate(-60vw,20px)}75%{transform:translate(-90vw,-20px)}100%{transform:translate(calc(-100vw - 240px),0)}}
#fx .web{position:absolute;top:0;width:150px;height:150px;color:rgba(230,220,240,.13)}#fx .web svg{width:100%;height:100%}
#fx .wl{left:0}#fx .wr{right:0;transform:scaleX(-1)}
#fx .spd{position:absolute;top:0;right:12%;display:flex;flex-direction:column;align-items:center;color:#2a1838;animation:spd 9s ease-in-out infinite;transform-origin:top}
#fx .spd i{width:1px;height:120px;background:linear-gradient(rgba(230,220,240,0),rgba(230,220,240,.35))}#fx .spd svg{filter:drop-shadow(0 0 4px rgba(255,122,0,.5));color:#ff7a00;opacity:.8}
@keyframes spd{0%,100%{transform:translateY(-110px)}45%,60%{transform:translateY(40px)}52%{transform:translateY(30px) rotate(4deg)}}
#fx .eyes{position:absolute;display:flex;gap:9px;opacity:0;animation:eyes 11s infinite}
#fx .eyes i{width:9px;height:5px;border-radius:50%;background:#ff3b1f;box-shadow:0 0 10px #ff3b1f,0 0 20px rgba(255,59,31,.6)}
@keyframes eyes{0%,62%,100%{opacity:0}66%,80%{opacity:.9}70%,76%{transform:scaleY(1)}73%{transform:scaleY(.1)}}
#fx .fog{position:absolute;left:-50%;bottom:-40px;width:200%;height:220px;background:radial-gradient(ellipse at 20% 60%,rgba(170,150,200,.13),transparent 55%),radial-gradient(ellipse at 60% 70%,rgba(170,150,200,.1),transparent 50%),radial-gradient(ellipse at 90% 60%,rgba(170,150,200,.12),transparent 55%);animation:fog 40s linear infinite;filter:blur(6px)}
#fx .fog.f2{animation-duration:62s;animation-direction:reverse;bottom:-80px;opacity:.7}
@keyframes fog{to{transform:translateX(25%)}}
#fxl{position:fixed;inset:0;pointer-events:none;z-index:6;background:radial-gradient(circle at 70% 0,rgba(220,210,255,.5),rgba(180,170,255,.08) 60%);opacity:0}
#fxl.on{animation:light 1.1s}
@keyframes light{0%,100%{opacity:0}8%{opacity:.85}14%{opacity:.1}22%{opacity:.6}40%{opacity:0}}

/* ===== Jumpscare ===== */
#jsc{position:fixed;inset:0;z-index:9999;background:#000;display:grid;place-items:center;overflow:hidden;animation:jsin .25s both}
@keyframes jsin{from{opacity:0}}
#jsc .jsn{position:absolute;inset:-50%;background:repeating-radial-gradient(circle at 17% 32%,rgba(255,255,255,.07) 0 1px,transparent 1px 3px);opacity:.5;animation:noise .2s steps(3) infinite}
@keyframes noise{33%{transform:translate(-3%,2%)}66%{transform:translate(2%,-3%)}}
#jsc .jsl{position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.35) 0 2px,transparent 2px 4px);pointer-events:none}
#jsc .jsf{width:min(70vw,520px);opacity:0;transform:scale(.15);filter:brightness(.2)}
#jsc .jsf svg{width:100%;height:auto;display:block}
#jsc .jst{position:absolute;bottom:9vh;font:800 clamp(56px,14vw,170px) Montserrat,sans-serif;letter-spacing:-4px;color:#ff2a1a;text-shadow:0 0 40px rgba(255,0,0,.8);opacity:0}
#jsc.go{animation:jsflash .5s}
#jsc.go .jsf{animation:jsface 1.25s cubic-bezier(.15,.9,.2,1) forwards}
#jsc.go .jst{animation:jstxt 1.2s .12s forwards}
#jsc.go .jpe{animation:jseye .12s 6 alternate}
@keyframes jsflash{0%{background:#fff}12%{background:#600}100%{background:#000}}
@keyframes jsface{0%{opacity:1;transform:scale(.2) rotate(-6deg);filter:brightness(2)}18%{transform:scale(1.25) rotate(3deg);filter:brightness(1.2) contrast(1.4)}30%{transform:scale(1.12) rotate(-2deg)}45%{transform:scale(1.3) translate(4px,-6px) rotate(2deg)}100%{opacity:1;transform:scale(1.55) rotate(0);filter:brightness(1)}}
@keyframes jstxt{0%{opacity:0;transform:scale(3)}20%{opacity:1;transform:scale(1)}80%{opacity:1}100%{opacity:.8;transform:scale(1.05)}}
@keyframes jseye{to{r:12}}
#jsc.out{animation:jsout .8s forwards}
@keyframes jsout{0%{opacity:1}100%{opacity:0;filter:blur(8px)}}
body.shake #app{animation:shake .45s 2}
@keyframes shake{10%,90%{transform:translate(-3px,1px)}20%,80%{transform:translate(5px,-2px)}30%,50%,70%{transform:translate(-8px,3px)}40%,60%{transform:translate(8px,-3px)}}
#jsc.calm .jsf{transform:scale(.9)}#jsc.calm.go .jsf{animation:none;opacity:1;filter:none}#jsc.calm.go .jst{animation:none;opacity:1}

@media(prefers-reduced-motion:reduce){#fx .bt,#fx .gh,#fx .fog,#fx .spd{animation:none;display:none}[data-theme=hall] .hero h1 span,[data-theme=hall] h2 b{animation:none}}
@media(max-width:700px){#fx .web{width:90px;height:90px}#fx .spd{right:6%}#fx .eyes{display:none}#fx .gh svg{width:40px;height:40px}}