/* Reusable static page backdrops; no motion effects. */
.page-backdrop {
    position: relative;
    isolation: isolate;
    overflow: clip;
    background: var(--page-backdrop-base, var(--bg));
}

.page-backdrop > * {
    position: relative;
    z-index: 1;
}

.page-backdrop--events {
    --page-backdrop-base: #f4f1e8;
    background:
        radial-gradient(circle at 92% 8%, rgba(224, 173, 102, .16), transparent 30rem),
        radial-gradient(circle at 8% 48%, rgba(25, 60, 53, .09), transparent 34rem),
        linear-gradient(180deg, #f7f4ec 0%, #f3f0e7 42%, #f5f2ea 100%);
}

.page-backdrop--events::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        url("artwork/spark/logo.svg"),
        url("artwork/spark/logo.svg");
    background-repeat: no-repeat;
    background-size: 360px 360px, 250px 250px;
    background-position:
        calc(100% + 100px) 150px,
        -78px 980px;
    opacity: .032;
    transform: rotate(-4deg);
    transform-origin: center;
}

.page-backdrop--events .listing-intro {
    background: linear-gradient(
        180deg,
        rgba(255, 253, 247, .96) 0%,
        rgba(244, 241, 232, .86) 100%
    );
}

@media (max-width: 720px) {
    .page-backdrop--events::after {
        background-size: 220px 220px, 160px 160px;
        background-position:
            calc(100% + 72px) 250px,
            -62px 920px;
        opacity: .026;
        transform: rotate(-3deg);
    }

    .page-backdrop--events {
        background:
            radial-gradient(circle at 100% 12%, rgba(224, 173, 102, .12), transparent 18rem),
            radial-gradient(circle at 0% 58%, rgba(25, 60, 53, .07), transparent 22rem),
            linear-gradient(180deg, #f7f4ec 0%, #f4f1e8 100%);
    }
}

@media (min-width: 1200px) {
    .page-backdrop--events::after {
        background-size: 430px 430px, 300px 300px;
        background-position:
            calc(100% + 110px) 120px,
            -90px 1080px;
    }
}

@media print {
    .page-backdrop,
    .page-backdrop--events {
        background: #fff;
    }

    .page-backdrop--events::after {
        display: none;
    }
}