/* Optional Karmarando storefront ornament. Loaded ONLY while Halloween is active. */
/* Decorative pseudo-elements: no inserted DOM, scripts, events, layout changes or CLS. */
@media screen {
    html::before, html::after, body::before, body::after {
        content: "";
        display: block;
        position: fixed;
        z-index: 2200;
        pointer-events: none !important;
        user-select: none;
        background-repeat: no-repeat;
        opacity: .47;
        transition: none !important;
        animation: none !important;
    }
    body::before {
        top: 90px;
        left: 0;
        width: 112px;
        height: 112px;
        background-image: url("./halloween/web.svg");
        background-position: top left;
        background-size: contain;
    }
    body::after {
        top: 110px;
        right: 0;
        width: 125px;
        height: 135px;
        background-image: url("./halloween/spider.svg"), url("./halloween/web.svg");
        background-position: 45px 24px, top right;
        background-size: 35px 90px, 130px 130px;
        transform: scaleX(-1);
    }
    html::before {
        top: 48%;
        left: 0;
        width: 56px;
        height: 68px;
        background-image: url("./halloween/bats.svg");
        background-position: center left;
        background-size: contain;
        opacity: .38;
    }
    html::after {
        right: 0;
        bottom: 0;
        width: 145px;
        height: 145px;
        background-image: url("./halloween/pumpkin.svg"), url("./halloween/web-bottom.svg");
        background-position: right 8px bottom 8px, bottom right;
        background-size: 36px 36px, 120px 120px;
        opacity: .46;

    }
    /* The original responsive logo remains untouched. */
    .km-brand-topbar::after {
        content: "";
        position: absolute;
        pointer-events: none !important;
        top: -6px;
        right: -11px;
        width: 26px;
        height: 34px;
        background: url("./halloween/spider.svg") center/contain no-repeat;
        opacity: .78;
    }
}
@media screen and (max-width: 720px) {
    body::before { top: 80px; width: 55px; height: 55px; }
    body::after { top: 104px; width: 70px; height: 80px; background-position: 18px 12px, top right; background-size: 24px 56px, 64px 64px; }
    html::before { width: 25px; height: 35px; opacity: .25; }
    html::after { width: 78px; height: 78px; background-size: 24px 24px, 70px 70px; }
    .km-brand-topbar::after { width: 18px; height: 22px; right: -5px; }
}
@media (prefers-reduced-motion: reduce) {
    html::before, html::after, body::before, body::after, .km-brand-topbar::after { animation: none !important; transition: none !important; }
}
@media print {
    html::before, html::after, body::before, body::after, .km-brand-topbar::after { display: none !important; }
}