/* Decorative layer: all painted pixels, including glow, stay inside the banner. */
.header-banner--fireflies {
    isolation: isolate;
    overflow: hidden;
}
.header-banner--fireflies::after { z-index: 0; pointer-events: none; }
.header-banner--fireflies > .header-banner-container { position: relative; z-index: 2; }
.banner-fireflies { display: none; }
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
    .banner-fireflies {
        display: block;
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        overflow: hidden;
        contain: layout paint;
    }
    .banner-firefly {
        position: absolute;
        left: 0;
        top: 0;
        margin-left: calc(var(--size) / -2);
        margin-top: calc(var(--size) / -2);
        width: var(--size);
        height: var(--size);
        border-radius: 50%;
        background: radial-gradient(circle, #fffef5 0 7%, #ffe7b1 10%, rgba(255,224,169,.55) 20%, rgba(255,224,169,.15) 45%, transparent 70%);
        animation: banner-firefly-glimmer 7s ease-in-out var(--delay) infinite;
        animation-play-state: paused;
    }
    .banner-firefly--cross::before {
        content: "";
        position: absolute;
        inset: 30%;
        background: linear-gradient(90deg, transparent 38%, #fff9df 50%, transparent 62%),
            linear-gradient(transparent 38%, #fff9df 50%, transparent 62%);
    }
    .banner-fireflies--running .banner-firefly { animation-play-state: running; }
}
@keyframes banner-firefly-glimmer {
    0%, 100% { opacity: calc(.35 + var(--fear, 0) * .65); }
    50% { opacity: calc(.95 + var(--fear, 0) * .05); }
}