/* Halloween FX: every class is prefixed with hfx- so it never touches the theme. */
@font-face{font-family:"HFX Creepster";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/creepster.woff2) format("woff2")}
:root{--hfx-op:.75}

.hfx-layer{position:fixed;inset:0;pointer-events:none!important;z-index:99990;overflow:hidden}
.hfx-layer *{pointer-events:none!important}
.hfx-png{opacity:var(--hfx-op);transition:opacity .35s}
.hfx-png.hfx-near{opacity:.18}
.hfx-layer img{max-width:100%;height:auto;display:block;border:0;box-shadow:none}

/* ---------- Banner ---------- */
.hfx-banner{position:relative;z-index:99995;overflow:hidden;color:#fff;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;line-height:1.3;
  background:radial-gradient(circle at 15% 50%,rgba(255,122,26,.35),transparent 30%),radial-gradient(circle at 85% 50%,rgba(123,63,228,.45),transparent 35%),linear-gradient(90deg,#120720,#2a0e47 50%,#120720)}
.hfx-banner::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 40%,rgba(255,255,255,.12) 50%,transparent 60%);animation:hfx-shine 4.5s infinite}
@keyframes hfx-shine{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.hfx-b-in{position:relative;z-index:1;max-width:1200px;margin:auto;display:flex;align-items:center;justify-content:center;gap:10px 22px;padding:11px 48px;flex-wrap:wrap}
.hfx-b-title{font-family:"HFX Creepster",cursive;font-size:26px;letter-spacing:1.5px;color:#ff9a3c;text-shadow:0 0 12px rgba(255,122,26,.7);line-height:1}
.hfx-b-text{font-size:14px;opacity:.92}
.hfx-banner .hfx-code{all:unset;box-sizing:border-box;border:1px dashed rgba(255,177,92,.8);border-radius:6px;padding:3px 9px;font:700 13px/1.4 system-ui,sans-serif;letter-spacing:1px;color:#ffb15c;cursor:pointer;background:rgba(255,122,26,.08)}
.hfx-banner .hfx-code.hfx-copied{background:#ff7a1a;color:#fff}
.hfx-count{display:flex;gap:6px;font-variant-numeric:tabular-nums}
.hfx-count span{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);border-radius:6px;padding:3px 7px;font-size:13px;font-weight:700;min-width:38px;text-align:center;line-height:1.2}
.hfx-count small{display:block;font-size:9px;font-weight:400;opacity:.7;text-transform:uppercase}
.hfx-banner .hfx-cta{background:linear-gradient(180deg,#ff8d32,#e8600c);color:#fff!important;text-decoration:none!important;font-weight:700;font-size:13px;padding:9px 18px;border-radius:999px;animation:hfx-pulse 2.2s infinite;white-space:nowrap}
@keyframes hfx-pulse{0%{box-shadow:0 0 0 0 rgba(255,122,26,.6)}70%{box-shadow:0 0 0 12px rgba(255,122,26,0)}100%{box-shadow:0 0 0 0 rgba(255,122,26,0)}}
.hfx-banner .hfx-x{all:unset;position:absolute;right:12px;top:50%;transform:translateY(-50%);z-index:2;color:#fff;font-size:22px;line-height:1;cursor:pointer;opacity:.65;padding:4px}
.hfx-banner .hfx-x:hover{opacity:1}

/* ---------- Garland ---------- */
.hfx-garland{position:absolute;top:0;left:0;width:100%;height:70px}
.hfx-garland svg{width:100%;height:100%;display:block}
.hfx-garland .hfx-flag{transform-box:fill-box;transform-origin:top center;animation:hfx-sway 3s ease-in-out infinite}
@keyframes hfx-sway{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}

/* ---------- Webs + moon ---------- */
.hfx-webs{position:absolute;top:0;left:0;right:0}
.hfx-web{position:absolute;top:0;width:190px;height:190px}
.hfx-web svg{width:100%;height:100%;display:block}
.hfx-web.hfx-l{left:0}.hfx-web.hfx-r{right:0;transform:scaleX(-1)}
.hfx-moon{position:absolute;top:130px;right:6%;width:90px;height:90px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#fff8dc,#ffe9a8 45%,#f2c46b);box-shadow:0 0 40px 12px rgba(255,220,130,.35),0 0 120px 40px rgba(255,200,100,.15)}
.hfx-moon::before,.hfx-moon::after{content:"";position:absolute;border-radius:50%;background:rgba(200,150,60,.25)}
.hfx-moon::before{width:18px;height:18px;left:22px;top:44px}.hfx-moon::after{width:11px;height:11px;left:55px;top:26px}

/* ---------- Spiders (thread length is driven by JS) ---------- */
.hfx-spider{position:absolute;top:0;width:0;transform-origin:top center;animation:hfx-sway var(--sw,5s) ease-in-out infinite}
.hfx-spider .hfx-thread{position:absolute;left:0;top:0;width:1px;height:60px;background:linear-gradient(rgba(90,90,100,.15),rgba(50,50,60,.75))}
.hfx-spider .hfx-sbody{position:absolute;left:0;top:60px;width:var(--sz,44px);transform:translate(-50%,-6px)}
.hfx-spider svg{display:block;width:100%;overflow:visible}
.hfx-spider .hfx-legs-l,.hfx-spider .hfx-legs-r{transform-box:view-box;transform-origin:30px 30px;animation:hfx-legs 1.6s ease-in-out infinite alternate}
.hfx-spider .hfx-legs-r{animation-delay:-.8s}
.hfx-spider.hfx-moving .hfx-legs-l,.hfx-spider.hfx-moving .hfx-legs-r{animation-duration:.18s}
@keyframes hfx-legs{from{transform:rotate(-5deg)}to{transform:rotate(5deg)}}

/* ---------- Pumpkins ---------- */
.hfx-pumpkin{position:absolute;bottom:-4px;filter:drop-shadow(0 8px 14px rgba(0,0,0,.25))}
.hfx-pumpkin.hfx-l{left:6px;width:140px;animation:hfx-bob 3.6s ease-in-out infinite}
.hfx-pumpkin.hfx-r{right:6px;width:110px;animation:hfx-bob 4.2s ease-in-out infinite reverse}
.hfx-pumpkin .hfx-glow{animation:hfx-flicker 1.9s infinite}
@keyframes hfx-bob{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-7px) rotate(1deg)}}
@keyframes hfx-flicker{0%,100%{opacity:1}38%{opacity:.55}42%{opacity:.95}70%{opacity:.7}}

/* ---------- Bats (position driven by JS) ---------- */
.hfx-bat{position:absolute;left:0;top:0;will-change:transform}
.hfx-bat svg{width:100%;display:block;overflow:visible;animation:hfx-batbob var(--fs,.28s) ease-in-out infinite alternate}
.hfx-bat .hfx-w{transform-box:view-box;transform-origin:106px 44px;animation:hfx-wing var(--fs,.28s) ease-in-out infinite alternate}
@keyframes hfx-wing{from{transform:rotate(-32deg) scaleY(1.05)}to{transform:rotate(24deg) scaleY(.5)}}
@keyframes hfx-batbob{from{transform:translateY(4px)}to{transform:translateY(-4px)}}

/* ---------- Ghosts ---------- */
.hfx-ghost{position:absolute;width:76px;opacity:0;animation:hfx-ghost 15s ease-in-out infinite;filter:drop-shadow(0 0 14px rgba(180,160,255,.8))}
.hfx-ghost > *{animation:hfx-tilt 2.4s ease-in-out infinite}
.hfx-ghost svg{display:block;width:100%}
@keyframes hfx-ghost{0%{opacity:0;transform:translateY(30px)}15%{opacity:var(--hfx-op)}50%{transform:translate(50px,-30px)}85%{opacity:var(--hfx-op)}100%{opacity:0;transform:translate(0,-70px)}}
@keyframes hfx-tilt{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}

/* ---------- Falling + sparkles ---------- */
.hfx-fall{position:absolute;top:-40px;animation:hfx-fall linear infinite}
.hfx-fall svg{display:block}
@keyframes hfx-fall{0%{transform:translate(0,0) rotate(0)}100%{transform:translate(var(--dx),112vh) rotate(var(--rot))}}
.hfx-star{position:absolute;width:4px;height:4px;border-radius:50%;background:#ffd98a;box-shadow:0 0 8px 2px rgba(255,190,90,.8);animation:hfx-twinkle 3s ease-in-out infinite}
@keyframes hfx-twinkle{0%,100%{opacity:0;transform:scale(.4)}50%{opacity:.9;transform:scale(1)}}

/* ---------- Fog ---------- */
.hfx-fog{position:absolute;left:0;right:0;bottom:0;height:170px;overflow:hidden}
.hfx-fog i{position:absolute;bottom:-50px;width:200%;height:200px;background:radial-gradient(ellipse at 15% 80%,rgba(140,110,200,.32),transparent 55%),radial-gradient(ellipse at 55% 90%,rgba(110,90,170,.28),transparent 50%),radial-gradient(ellipse at 85% 80%,rgba(255,140,60,.14),transparent 55%);animation:hfx-fog 32s linear infinite}
.hfx-fog i:nth-child(2){animation-duration:48s;animation-direction:reverse;opacity:.7}
@keyframes hfx-fog{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Dark extras ---------- */
.hfx-vignette{position:absolute;inset:0;background:radial-gradient(ellipse 80% 75% at 50% 45%,transparent 58%,rgba(12,4,22,.16) 85%,rgba(8,2,14,.3) 100%);animation:hfx-breathe 7s ease-in-out infinite}
@keyframes hfx-breathe{0%,100%{opacity:.75}50%{opacity:.95}}
.hfx-eyes{position:absolute;display:flex;isolation:isolate;gap:calc(var(--es) * 1.1);opacity:0;animation:hfx-eyes 4.2s ease-in-out forwards}
.hfx-eyes::before{content:"";position:absolute;z-index:-1;left:-90%;right:-90%;top:-260%;bottom:-260%;border-radius:50%;background:radial-gradient(ellipse at center,rgba(8,2,14,.42) 0,rgba(8,2,14,.18) 45%,transparent 72%)}
.hfx-eyes i{display:block;width:var(--es);height:calc(var(--es) * .55);border-radius:50% 50% 45% 45%;background:radial-gradient(circle at 50% 55%,#fff6c8 0 16%,var(--ec) 45%,transparent 76%);box-shadow:0 0 calc(var(--es) * 1.1) var(--ec);animation:hfx-blink 4.2s ease-in-out forwards}
.hfx-eyes i:first-child{rotate:14deg}.hfx-eyes i:last-child{rotate:-14deg}
@keyframes hfx-eyes{0%{opacity:0}15%,80%{opacity:.95}100%{opacity:0}}
@keyframes hfx-blink{0%,30%,36%,62%,68%,100%{transform:scaleY(1)}33%,65%{transform:scaleY(.08)}}

/* ---------- Dark & spooky look ---------- */
.hfx-dark .hfx-fog{height:170px}
.hfx-dark .hfx-fog i{background:radial-gradient(ellipse at 15% 80%,rgba(18,10,28,.28),transparent 55%),radial-gradient(ellipse at 55% 90%,rgba(35,18,45,.24),transparent 50%),radial-gradient(ellipse at 85% 80%,rgba(70,15,15,.15),transparent 55%)}
.hfx-dark .hfx-web svg g{stroke:rgba(25,15,35,.75)}
.hfx-dark .hfx-moon{background:radial-gradient(circle at 35% 35%,#ffe1d2,#f08a5d 45%,#a3321e);box-shadow:0 0 40px 12px rgba(255,90,40,.35),0 0 130px 45px rgba(200,40,20,.18)}
.hfx-dark .hfx-star{background:#ff7a4a;box-shadow:0 0 6px 1px rgba(255,90,40,.6)}
.hfx-dark .hfx-ghost{filter:drop-shadow(0 0 12px rgba(110,255,170,.45))}
.hfx-lite .hfx-vignette{background:radial-gradient(ellipse 85% 80% at 50% 45%,transparent 62%,rgba(12,4,22,.18) 100%)}

/* ---------- Cursor trail ---------- */
.hfx-spark{position:fixed;pointer-events:none;z-index:99999;font-size:12px;line-height:1;animation:hfx-spark .9s ease-out forwards}
@keyframes hfx-spark{to{transform:translateY(28px) scale(.2) rotate(120deg);opacity:0}}

/* ---------- Promo popup ---------- */
.hfx-popup{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;padding:70px 16px 16px;background:rgba(10,4,20,.62);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;transition:opacity .3s;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;line-height:1.4;overflow-y:auto}
.hfx-popup.hfx-open{opacity:1}
.hfx-pop-card{position:relative;width:100%;max-width:410px;margin:auto;text-align:center;color:#fff;border-radius:22px;padding:64px 26px 22px;border:1px solid rgba(255,255,255,.12);
  background:radial-gradient(circle at 50% 0%,rgba(255,122,26,.35),transparent 45%),radial-gradient(circle at 100% 100%,rgba(123,63,228,.5),transparent 50%),linear-gradient(160deg,#1c0b30,#120720 60%,#1f0a36);
  box-shadow:0 30px 80px rgba(0,0,0,.5),0 0 0 1px rgba(255,122,26,.15) inset;transform:translateY(18px) scale(.94);transition:transform .35s cubic-bezier(.2,1.3,.4,1)}
.hfx-popup.hfx-open .hfx-pop-card{transform:none}
.hfx-pop-art{position:absolute;left:50%;top:-62px;width:130px;transform:translateX(-50%);filter:drop-shadow(0 10px 18px rgba(255,122,26,.45));animation:hfx-bob 3.4s ease-in-out infinite}
.hfx-pop-art svg,.hfx-pop-art img{display:block;width:100%;height:auto}
.hfx-popup .hfx-pop-x{all:unset;box-sizing:border-box;position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;line-height:1;color:#fff;background:rgba(255,255,255,.12);cursor:pointer;transition:background .2s,transform .2s}
.hfx-popup .hfx-pop-x:hover{background:rgba(255,255,255,.25);transform:rotate(90deg)}
.hfx-popup .hfx-pop-x:focus-visible{outline:2px solid #ffb15c;outline-offset:2px}
.hfx-popup p{margin:0;padding:0;color:inherit}
.hfx-popup .hfx-pop-title{font-family:"HFX Creepster",cursive;font-size:34px;letter-spacing:1.5px;color:#ff9a3c;text-shadow:0 0 14px rgba(255,122,26,.7);line-height:1.1}
.hfx-popup .hfx-pop-off{margin:6px 0 4px;font-size:60px;font-weight:900;line-height:1;letter-spacing:-2px;background:linear-gradient(180deg,#fff 20%,#ffb15c);-webkit-background-clip:text;background-clip:text;color:transparent}
.hfx-popup .hfx-pop-off span{font-size:30px;letter-spacing:0}
.hfx-popup .hfx-pop-text{font-size:15px;opacity:.85;margin:8px auto 14px;max-width:320px}
.hfx-pop-codebox{display:flex;align-items:center;gap:8px;border:2px dashed rgba(255,177,92,.75);border-radius:12px;padding:6px 6px 6px 16px;background:rgba(255,122,26,.08)}
.hfx-pop-code{flex:1;text-align:left;font:800 20px/1.2 ui-monospace,Consolas,monospace;letter-spacing:2px;color:#ffb15c;word-break:break-all}
.hfx-popup .hfx-pop-copy{all:unset;box-sizing:border-box;cursor:pointer;background:#ff7a1a;color:#fff;font:700 14px/1 system-ui,sans-serif;padding:11px 16px;border-radius:8px;transition:background .2s}
.hfx-popup .hfx-pop-copy:hover{background:#e8600c}
.hfx-popup .hfx-pop-copy.hfx-copied{background:#2fbf71}
.hfx-popup .hfx-pop-ends{margin:16px 0 6px;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;opacity:.65}
.hfx-popup .hfx-count{justify-content:center;display:flex}
.hfx-popup .hfx-pop-cta{display:block;margin-top:18px;background:linear-gradient(180deg,#ff8d32,#e8600c);color:#fff!important;text-decoration:none!important;font-weight:800;font-size:16px;padding:14px;border-radius:999px;box-shadow:0 8px 22px rgba(232,96,12,.45);transition:transform .2s}
.hfx-popup .hfx-pop-cta:hover{transform:translateY(-2px)}
.hfx-popup .hfx-pop-later{all:unset;cursor:pointer;margin-top:12px;font-size:13px;opacity:.6;text-decoration:underline}
.hfx-popup .hfx-pop-later:hover{opacity:1}

/* Creepster has no Polish letters (ą ć ę ł ń ś ź ż): use a heavy system face instead of mixing fonts mid-word */
.hfx-banner[lang="pl"] .hfx-b-title,.hfx-popup[lang="pl"] .hfx-pop-title{font-family:Impact,"Arial Black","Segoe UI Black",system-ui,sans-serif;font-weight:900;letter-spacing:.5px;text-transform:uppercase}

/* ---------- Phones ---------- */
@media (max-width:800px){
  .hfx-popup .hfx-pop-off{font-size:50px}.hfx-popup .hfx-pop-title{font-size:29px}.hfx-pop-card{padding:58px 18px 18px}
  .hfx-b-title{font-size:20px}.hfx-count{display:none}.hfx-b-in{padding:9px 40px 9px 14px;gap:8px 12px}
  .hfx-lite .hfx-garland{height:42px}
  .hfx-lite .hfx-moon{display:none}
  .hfx-lite .hfx-web{width:120px;height:120px}
  .hfx-lite .hfx-pumpkin.hfx-l{width:90px}.hfx-lite .hfx-pumpkin.hfx-r{width:74px}
  .hfx-lite .hfx-ghost{width:56px}
}

@media (prefers-reduced-motion:reduce){
  .hfx-layer *,.hfx-banner,.hfx-banner *,.hfx-banner::after{animation:none!important}
  .hfx-fall,.hfx-bat,.hfx-ghost,.hfx-star{display:none}
}
@media print{.hfx-layer,.hfx-banner{display:none!important}}