/* Two Paths artwork: one contained background layer and one contrast layer. */
.audience-panel {
    --audience-position: center;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: #08090a;
}

.audience-panel.club-panel {
    background: #08090a;
}

.audience-panel::before,
.audience-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.audience-panel::before {
    z-index: 0;
    inset: -2%;
    background-image: var(--audience-image);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: var(--audience-position);
    filter: saturate(.82) contrast(1.08);
    transform: scale(1.02);
    transition: transform .65s ease, filter .65s ease;
}

.audience-panel::after {
    z-index: 0;
    background:
        linear-gradient(180deg, rgba(3, 4, 4, .12) 0%, rgba(3, 4, 4, .42) 42%, rgba(3, 4, 4, .94) 100%),
        linear-gradient(90deg, rgba(3, 4, 4, .56) 0%, rgba(3, 4, 4, .1) 72%);
}

.audience-panel.club-panel::after {
    background:
        radial-gradient(circle at 88% 15%, rgba(200, 255, 0, .09), transparent 34%),
        linear-gradient(180deg, rgba(3, 4, 4, .12) 0%, rgba(3, 4, 4, .44) 42%, rgba(3, 4, 4, .95) 100%),
        linear-gradient(90deg, rgba(3, 4, 4, .6) 0%, rgba(3, 4, 4, .08) 72%);
}

.audience-panel:hover::before {
    filter: saturate(.92) contrast(1.1);
    transform: scale(1.055);
}

.audience-panel > * {
    position: relative;
    z-index: 1;
}

.audience-panel small {
    text-shadow: 0 2px 16px #000;
}

.audience-panel h2 {
    text-shadow: 0 3px 24px rgba(0, 0, 0, .9);
}

.audience-panel p {
    color: #dededb;
    text-shadow: 0 2px 16px #000;
}

@media (max-width: 768px) {
    .audience-panel {
        --audience-position: 58% center;
    }

    .audience-panel.club-panel {
        --audience-position: 63% center;
    }

    .audience-panel::after {
        background:
            linear-gradient(180deg, rgba(3, 4, 4, .18) 0%, rgba(3, 4, 4, .5) 38%, rgba(3, 4, 4, .97) 100%),
            linear-gradient(90deg, rgba(3, 4, 4, .64) 0%, rgba(3, 4, 4, .12) 82%);
    }

    .audience-panel.club-panel::after {
        background:
            radial-gradient(circle at 90% 12%, rgba(200, 255, 0, .08), transparent 32%),
            linear-gradient(180deg, rgba(3, 4, 4, .18) 0%, rgba(3, 4, 4, .52) 38%, rgba(3, 4, 4, .97) 100%),
            linear-gradient(90deg, rgba(3, 4, 4, .66) 0%, rgba(3, 4, 4, .12) 82%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .audience-panel::before {
        transition: none;
    }
}