/* ============================================================
   meggybug sparkle cursor trail

   Change the four colours below to restyle the sparkles.
   Nothing else in here needs editing.
   ============================================================ */

.mb-sparkle-layer {

    /* --- the palette. JS picks one of these per sparkle. --- */
    --mb-c1: #f7c8e0;   /* soft pink   */
    --mb-c2: #fff1a8;   /* warm yellow */
    --mb-c3: #c9e4f6;   /* pale blue   */
    --mb-c4: #ffffff;   /* white       */

    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;

    /* Sits above page content but below GLightbox, which uses
       999999, so sparkles never clutter the artwork viewer. */
    z-index: 9998;

    contain: layout style paint;
}

.mb-sparkle {
    position: absolute;
    top: 0;
    left: 0;

    width: var(--mb-sparkle-size, 14px);
    height: var(--mb-sparkle-size, 14px);
    margin-left: calc(var(--mb-sparkle-size, 14px) / -2);
    margin-top: calc(var(--mb-sparkle-size, 14px) / -2);

    background: var(--mb-sparkle-color, #ffffff);

    /* Four-pointed star. */
    clip-path: polygon(
        50% 0%,  61% 39%,
        100% 50%, 61% 61%,
        50% 100%, 39% 61%,
        0% 50%,   39% 39%
    );

    opacity: 0;
    display: none;
    will-change: transform, opacity;
}

.mb-sparkle.is-live {
    display: block;
    animation: mb-sparkle-pop var(--mb-sparkle-life, 750ms) ease-out forwards;
}

@keyframes mb-sparkle-pop {
    0% {
        opacity: 0;
        transform:
            translate3d(var(--mb-x), var(--mb-y), 0)
            scale(0.2)
            rotate(0deg);
    }
    22% {
        opacity: 1;
        transform:
            translate3d(
                calc(var(--mb-x) + var(--mb-dx) * 0.22),
                calc(var(--mb-y) + var(--mb-dy) * 0.22),
                0
            )
            scale(1)
            rotate(calc(var(--mb-spin) * 0.22));
    }
    100% {
        opacity: 0;
        transform:
            translate3d(
                calc(var(--mb-x) + var(--mb-dx)),
                calc(var(--mb-y) + var(--mb-dy)),
                0
            )
            scale(0.35)
            rotate(var(--mb-spin));
    }
}

/* ------------------------------------------------------------
   Opt-outs. The JS checks these too; the CSS is the backstop.
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    .mb-sparkle-layer {
        display: none !important;
    }
}

/* No cursor to trail on touch devices. */
@media (hover: none), (pointer: coarse) {
    .mb-sparkle-layer {
        display: none !important;
    }
}