/* Sector14 Dealect-like Halloween decor */
html, html.dark, body{
  background: transparent !important;
  background-color: transparent !important;
}
html.dark body{background-image:none!important;}
#s14-hw{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
#s14-hw .sky{
  position:absolute;inset:0;
  background:
    radial-gradient(circle at 82% 12%,hsl(36 90% 62% / .28),transparent 22%),
    radial-gradient(ellipse 80% 50% at 50% 110%,hsl(18 90% 42% / .35),transparent 60%),
    linear-gradient(180deg,#1a0b24,#2a1020 46%,#3a160f);
}
#root{position:relative;z-index:1;background:transparent!important;background-color:transparent!important;}
#root > div{background:transparent!important;background-color:transparent!important;}
#s14-hw .moon{
  position:absolute;top:4.5rem;right:4vw;width:min(18vw,150px);height:min(18vw,150px);
  border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#ffe7a8,#f0b429 55%,#c47a10);
  box-shadow:0 0 40px hsl(32 100% 58% / .45),0 0 80px hsl(28 90% 45% / .25);
  animation:s14-moon 8s ease-in-out infinite;
}
#s14-hw .moon::after{
  content:"";position:absolute;inset:18% 22% auto auto;width:28%;height:28%;border-radius:50%;
  background:rgba(26,11,36,.35);
}
#s14-hw .bat{
  position:absolute;top:5.2rem;right:calc(4vw + min(9vw,70px));width:56px;height:22px;
  color:#140814;opacity:.9;animation:s14-bat 7s linear infinite;
}
#s14-hw .web{
  position:absolute;top:0;left:0;width:min(42vw,280px);height:min(42vw,280px);
  opacity:.75;color:rgba(255,255,255,.8);
}
#s14-hw .ground{
  position:absolute;left:0;right:0;bottom:0;height:220px;
  background:linear-gradient(180deg,transparent,rgba(8,4,12,.75) 40%,#0a0610);
}
#s14-hw .sil{position:absolute;left:0;right:0;bottom:0;height:180px;color:#05030a;}
#s14-hw .pump{
  position:absolute;width:54px;height:54px;filter:drop-shadow(0 0 12px rgba(255,120,20,.55));
  animation:s14-float 6s ease-in-out infinite;
}
#s14-hw .ghost{
  position:absolute;width:46px;height:56px;opacity:.75;
  animation:s14-float 7.5s ease-in-out infinite reverse;
  filter:drop-shadow(0 0 8px rgba(255,255,255,.25));
}
#s14-hw .ember{
  position:absolute;width:5px;height:5px;border-radius:999px;background:#ff983d;
  box-shadow:0 0 10px #ff8214;animation:s14-ember linear infinite;
}
#s14-hw-line{
  position:fixed;left:0;right:0;top:0;height:2px;z-index:60;pointer-events:none;
  background:linear-gradient(90deg,transparent 5%,#ff7a00 35%,#a855f7 65%,transparent 95%);
  box-shadow:0 0 14px rgba(255,122,0,.55);
  margin-top:56px;
}
@keyframes s14-moon{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}
@keyframes s14-bat{0%{transform:translate(0,0) scaleX(1)}25%{transform:translate(-18px,10px) scaleX(1)}50%{transform:translate(-36px,-6px) scaleX(-1)}75%{transform:translate(-12px,8px) scaleX(-1)}100%{transform:translate(0,0) scaleX(1)}}
@keyframes s14-float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-14px) rotate(3deg)}}
@keyframes s14-ember{0%{transform:translateY(0) scale(1);opacity:.9}100%{transform:translateY(-110vh) scale(.4);opacity:0}}
@media (max-width:640px){
  #s14-hw .pump{width:32px;height:32px}
  #s14-hw .ghost{width:28px;height:34px}
  #s14-hw .sil{height:120px}
  #s14-hw-line{margin-top:52px}
}
@media (prefers-reduced-motion:reduce){
  #s14-hw .moon,#s14-hw .bat,#s14-hw .pump,#s14-hw .ghost,#s14-hw .ember{animation:none!important}
}
