/* Screen-wide decoration above content, below navigation and top-layer dialogs. */
:root[data-style=halloween] .app{position:relative;isolation:isolate}
:root[data-style=halloween] .app>#main{position:relative;z-index:1}
:root[data-style=halloween] .app>.topbar{position:relative;z-index:20}
.halloween-bats{position:fixed;inset:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px);z-index:10;overflow:hidden;contain:strict;pointer-events:none;user-select:none;-webkit-user-select:none}
.halloween-bats *{pointer-events:none}
.halloween-bat{position:absolute;left:-64px;top:clamp(48px,var(--lane),calc(100% - 115px));width:var(--size);aspect-ratio:96/56;opacity:0;color:var(--ink);animation:hb-flight var(--duration) var(--delay) cubic-bezier(.38,.05,.57,.96) infinite both}
.halloween-bat svg{display:block;width:100%;height:100%;overflow:visible;fill:currentColor}
.halloween-bat path{stroke:#9274b0;stroke-width:.7;stroke-opacity:.4;vector-effect:non-scaling-stroke;paint-order:stroke fill}
.halloween-bat:nth-child(1){--size:40px;--lane:20%;--ink:#10061c;--alpha:.64;--duration:26s;--delay:-4s;--rise:-5vh;--dip:3vh;--exit:-2vh;--flap:.83s}
.halloween-bat:nth-child(2){--size:31px;--lane:43%;--ink:#5a3974;--alpha:.5;--duration:31s;--delay:-16s;--rise:6vh;--dip:-4vh;--exit:2vh;--flap:.71s;animation-direction:reverse}
.halloween-bat:nth-child(2) svg{transform:scaleX(-1)}
.halloween-bat:nth-child(3){--size:27px;--lane:72%;--ink:#9274b0;--alpha:.3;--duration:35s;--delay:-30s;--rise:-7vh;--dip:-2vh;--exit:1vh;--flap:.94s}
.halloween-bat:nth-child(4){--size:43px;--lane:31%;--ink:#452553;--alpha:.48;--duration:43s;--delay:-29s;--rise:4vh;--dip:-6vh;--exit:-1vh;--flap:.78s}
.bat-wing{transform-box:fill-box;animation:hb-wing var(--flap) ease-in-out infinite alternate}
.bat-wing-left{transform-origin:100% 55%}
.bat-wing-right{transform-origin:0% 55%;animation-delay:-.06s}
.halloween-bats[data-paused] *{animation-play-state:paused!important}
@keyframes hb-wing{from{transform:scaleY(.32) rotate(-4deg)}to{transform:scaleY(1) rotate(3deg)}}
/* Each flight occupies part of its cycle; long invisible gaps keep the scene quiet. */
@keyframes hb-flight{
 0%,7%{transform:translate3d(-5vw,0,0) rotate(6deg);opacity:0}
 12%,48%{opacity:var(--alpha)}
 24%{transform:translate3d(30vw,var(--rise),0) rotate(-6deg)}
 40%{transform:translate3d(68vw,var(--dip),0) rotate(4deg)}
 57%,100%{transform:translate3d(calc(100vw + 130px),var(--exit),0) rotate(-3deg);opacity:0}
}
/* Defense in depth while the preference/theme change event removes the scene. */
:root:not([data-style=halloween]) .halloween-bats{display:none}
:root:not([data-style=halloween]) .halloween-bats *{animation:none}
@media(prefers-reduced-motion:reduce){.halloween-bats{display:none}.halloween-bats *{animation:none}}