/* =========================================
   SHOOTING STAR CURSOR
========================================= */

@media (pointer: fine) {

    body,
    a,
    button {
        cursor: none;
    }

    /* Main glowing star */
    .star-cursor {
        position: fixed;

        width: 8px;
        height: 8px;

        border-radius: 50%;

        background: white;

        pointer-events: none;

        z-index: 99999;

        transform:
            translate(-50%, -50%);

        box-shadow:
            0 0 6px white,
            0 0 14px #60a5fa,
            0 0 30px #3b82f6;
    }


    /* Shooting trail */
    .star-particle {

        position: fixed;

        width: 5px;
        height: 5px;

        border-radius: 50%;

        pointer-events: none;

        z-index: 99998;

        background:
            radial-gradient(
                circle,
                white 0%,
                #60a5fa 35%,
                transparent 75%
            );

        box-shadow:
            0 0 8px #60a5fa;

        animation:
            starFade
            .7s
            ease-out
            forwards;
    }


    @keyframes starFade {

        0% {

            opacity: .9;

            transform:
                scale(1);

        }

        100% {

            opacity: 0;

            transform:
                translate(
                    var(--tx),
                    var(--ty)
                )
                scale(0);

        }

    }


    /* Click star burst */

    .star-burst {

        position: fixed;

        width: 8px;
        height: 8px;

        border-radius: 50%;

        pointer-events: none;

        z-index: 99997;

        border:
            1px solid
            rgba(255,255,255,.8);

        transform:
            translate(-50%, -50%)
            scale(0);

        animation:
            starBurst
            .6s
            ease-out
            forwards;

    }


    @keyframes starBurst {

        to {

            transform:
                translate(-50%, -50%)
                scale(6);

            opacity: 0;

        }

    }


    /* Mobile */

    @media (pointer: coarse) {

        .star-cursor,
        .star-particle,
        .star-burst {

            display: none;

        }

    }

}