/* Halloween background layer. Enabled from template.php by date. */
.halloween{
   position:fixed;
   inset:0;
   z-index:-1;
   overflow:hidden;
   pointer-events:none;
   color:var(--tg-theme-hint-color, #8a8a8a);
}
/* pumpkins sit above content; small and click-through */
.halloween-front{
   position:fixed;left:0;right:0;bottom:0;height:60px;
   z-index:10;
   pointer-events:none;
}
.halloween svg,.halloween-front svg{display:block;width:100%;height:100%}

/* cobwebs */
.hw-web{position:absolute;top:0;width:110px;height:110px;opacity:.35}
.hw-web--left{left:0}
.hw-web--right{right:0;transform:scaleX(-1)}

/* spider hanging from the right web */
.hw-spider{
   position:absolute;top:0;right:46px;width:18px;
   transform-origin:top center;
   animation:hw-spider 6s ease-in-out infinite;
   opacity:.6;
}
.hw-spider::before{
   content:'';display:block;width:1px;height:70px;margin:0 auto;
   background:currentColor;
}
.hw-spider svg{height:18px}
@keyframes hw-spider{
   0%,100%{transform:translateY(-30px)}
   50%{transform:translateY(10px)}
}

/* bats */
.hw-bat{
   position:absolute;left:-70px;width:52px;height:28px;
   color:#6b4a8a;opacity:.5;
   animation:hw-fly 16s linear infinite;
}
.hw-bat svg{animation:hw-flap .32s ease-in-out infinite alternate;transform-origin:center 40%}
.hw-bat:nth-child(4){top:14%;animation-delay:0s}
.hw-bat:nth-child(5){top:30%;width:28px;animation-duration:21s;animation-delay:5s}
.hw-bat:nth-child(6){top:8%;width:34px;animation-duration:18s;animation-delay:10s}
.hw-bat:nth-child(7){top:42%;width:22px;animation-duration:24s;animation-delay:2s}
@keyframes hw-fly{
   0%{transform:translate(0,0)}
   25%{transform:translate(30vw,-25px)}
   50%{transform:translate(60vw,15px)}
   75%{transform:translate(90vw,-20px)}
   100%{transform:translate(calc(100vw + 120px),0)}
}
@keyframes hw-flap{from{transform:scaleY(1)}to{transform:scaleY(.6)}}

/* ghosts */
.hw-ghost{
   position:absolute;bottom:-80px;width:38px;height:48px;
   color:#ffffff;opacity:0;
   filter:drop-shadow(0 0 6px rgba(255,255,255,.5));
   animation:hw-ghost 14s ease-in-out infinite;
}
.hw-ghost:nth-child(8){left:18%;animation-delay:1s}
.hw-ghost:nth-child(9){left:62%;width:28px;animation-duration:17s;animation-delay:7s}
.hw-ghost:nth-child(10){left:84%;width:32px;animation-duration:15s;animation-delay:11s}
@keyframes hw-ghost{
   0%{transform:translate(0,0);opacity:0}
   15%{opacity:.45}
   50%{transform:translate(-20px,-55vh)}
   85%{opacity:.35}
   100%{transform:translate(15px,-110vh);opacity:0}
}

/* pumpkins */
.hw-pumpkin{
   position:absolute;bottom:6px;width:46px;height:42px;opacity:.75;
   filter:drop-shadow(0 0 8px rgba(255,140,0,.55));
   animation:hw-glow 3s ease-in-out infinite;
}
.hw-pumpkin--1{left:8px}
.hw-pumpkin--2{left:52px;width:32px;height:30px;animation-delay:1.1s}
.hw-pumpkin--3{right:10px;width:40px;height:36px;animation-delay:.5s}
.hw-pumpkin .hw-face{animation:hw-flicker 2.4s steps(1) infinite}
@keyframes hw-glow{
   0%,100%{filter:drop-shadow(0 0 6px rgba(255,140,0,.4))}
   50%{filter:drop-shadow(0 0 12px rgba(255,160,0,.75))}
}
@keyframes hw-flicker{
   0%,100%{fill:#ffd23f}
   30%{fill:#ffb000}
   35%{fill:#ffe680}
   70%{fill:#ffc21a}
}

@media (prefers-reduced-motion: reduce){
   .halloween *,.halloween-front *{animation:none !important}
   .hw-bat,.hw-ghost{display:none}
}