@media (hover: hover) and (pointer: fine) {
    .pl-story-background {
        position: fixed;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        overflow: hidden;
        background: var(--pl-story-bg-canvas, #111);
        opacity: 0;
        transition: opacity 250ms ease;
    }

    .pl-story-background.is-active {
        opacity: 1;
    }

    .pl-story-bg {
        position: absolute;
        inset: 0;
        background:
            radial-gradient(
                circle at 15% 20%,
                rgba(var(--pl-bg-c1, 30, 30, 30), 0.95),
                transparent 60%
            ),
            radial-gradient(
                circle at 85% 30%,
                rgba(var(--pl-bg-c2, 20, 20, 20), 0.85),
                transparent 65%
            ),
            radial-gradient(
                circle at 50% 80%,
                rgba(var(--pl-bg-c3, 10, 10, 10), 0.9),
                transparent 70%
            ),
            linear-gradient(
                145deg,
                rgba(var(--pl-bg-c1, 20, 20, 20), 0.85),
                rgba(var(--pl-bg-c3, 10, 10, 10), 0.95)
            );
        filter: saturate(1.2) contrast(1.15);
        opacity: 0;
        transition: opacity 400ms ease;
        will-change: opacity;
    }

    .pl-story-bg.is-visible {
        opacity: 0.85;
    }
}