.holiday-bat-layer {
    position: fixed;
    z-index: 1000;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.holiday-bat {
    --wing: #554560;
    --body: #211c2b;
    --outline: #0d0d16;
    --mark: #a58aaf;
    --eye: #f3a06b;
    position: absolute;
    top: var(--holiday-bat-top);
    left: 0;
    width: clamp(3rem, 5vw, 4.5rem);
    filter: drop-shadow(0 .2rem .25rem #0009);
    will-change: transform, opacity;
}

.holiday-bat--lantern { --wing: #713d30; --body: #9c4e23; --mark: #f8ae47; --eye: #ffd466; }
.holiday-bat--phantom { --wing: #74b9c6a6; --body: #7ac3c9c9; --outline: #abcbd9; --mark: #d8f7f6; --eye: #edfffc; }
.holiday-bat--vampire { --wing: #602331; --body: #251524; --mark: #c06073; --eye: #ff655b; }
.holiday-bat--imp { --wing: #675078; --body: #493353; --mark: #ae80b6; --eye: #ffcb72; }

.holiday-bat__art {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.holiday-bat__art--reverse { transform: scaleX(-1); }

.holiday-bat__wing {
    transform-box: view-box;
    transform-origin: 150px 78px;
    animation: holiday-bat-right-flap var(--holiday-bat-flap-duration, .18s) ease-in-out infinite alternate;
}

.holiday-bat__wing--left { animation-name: holiday-bat-left-flap; }

.holiday-bat__wing-fill {
    fill: var(--wing);
    stroke: var(--outline);
    stroke-linejoin: round;
    stroke-width: 2;
}

.holiday-bat__body,
.holiday-bat__ears {
    fill: var(--body);
    stroke: var(--outline);
    stroke-linejoin: round;
    stroke-width: 2;
}

.holiday-bat__tail {
    fill: var(--wing);
    stroke: var(--outline);
    stroke-width: 1.6;
}

.holiday-bat__belly { fill: var(--mark); opacity: .28; }

.holiday-bat__feet,
.holiday-bat__mouth {
    fill: none;
    stroke: var(--mark);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.5;
}

.holiday-bat__marks {
    fill: none;
    stroke: var(--mark);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    opacity: .8;
}

.holiday-bat__eye,
.holiday-bat__face { fill: var(--eye); }
.holiday-bat__nose { fill: var(--mark); }
.holiday-bat__face { stroke: var(--eye); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.4; }

@keyframes holiday-bat-right-flap {
    from { transform: rotate(-29deg); }
    to { transform: rotate(-54deg); }
}

@keyframes holiday-bat-left-flap {
    from { transform: rotate(-12deg); }
    to { transform: rotate(-42deg); }
}

@media (prefers-reduced-motion: reduce) {
    .holiday-bat-layer { display: none; }
}