/* =========================================================
   BIG STAR PRODUCTIONS
   CUSTOM MOUSE / CURSOR
========================================================= */


/* =========================================================
   DESKTOP ONLY
========================================================= */

@media (min-width: 992px) and (pointer: fine) {

    /* -----------------------------------------------------
       HIDE DEFAULT CURSOR
    ----------------------------------------------------- */

    body.has-big-star-cursor {
        cursor: none;
    }

    body.has-big-star-cursor a,
    body.has-big-star-cursor button,
    body.has-big-star-cursor [role="button"],
    body.has-big-star-cursor input,
    body.has-big-star-cursor textarea,
    body.has-big-star-cursor select {
        cursor: none;
    }


    /* -----------------------------------------------------
       MAIN CURSOR CONTAINER

       IMPORTANT:
       This class belongs ONLY to the cursor element.
       Do NOT use this class on body.
    ----------------------------------------------------- */

    .big-star-cursor {
        position: fixed;

        top: 0;
        left: 0;

        width: 1px;
        height: 1px;

        pointer-events: none;

        z-index: 999999;

        transform: translate3d(0, 0, 0);

        will-change: transform;
    }


    /* =====================================================
       OUTER GOLD RING
    ===================================================== */

    .big-star-cursor__ring {

        position: absolute;

        width: 38px;
        height: 38px;

        left: -19px;
        top: -19px;

        border: 1px solid rgba(218, 157, 69, 0.65);

        border-radius: 50%;

        background: rgba(218, 157, 69, 0.02);

        transition:
            width 0.3s ease,
            height 0.3s ease,
            left 0.3s ease,
            top 0.3s ease,
            border-color 0.3s ease,
            background 0.3s ease,
            box-shadow 0.3s ease,
            transform 0.2s ease;

        will-change:
            width,
            height,
            transform;
    }


    /* =====================================================
       MAIN STAR
    ===================================================== */

    .big-star-cursor__star {

        position: absolute;

        width: 13px;
        height: 13px;

        left: -6.5px;
        top: -6.5px;

        background: #f5b82e;

        /*
         * Five-point star
         */
        clip-path: polygon(
            50% 0%,
            61% 36%,
            100% 36%,
            69% 58%,
            81% 100%,
            50% 74%,
            19% 100%,
            31% 58%,
            0% 36%,
            39% 36%
        );

        filter:
            drop-shadow(
                0 0 5px
                rgba(245, 184, 46, 0.95)
            )
            drop-shadow(
                0 0 12px
                rgba(245, 184, 46, 0.45)
            );

        transition:
            transform 0.3s ease,
            filter 0.3s ease;

        will-change: transform;
    }


    /* =====================================================
       SMALL SPARK PARTICLES
    ===================================================== */

    .big-star-cursor__spark {

        position: absolute;

        width: 4px;
        height: 4px;

        border-radius: 50%;

        background: #f5b82e;

        opacity: 0;

        box-shadow:
            0 0 6px
            rgba(245, 184, 46, 0.95),

            0 0 14px
            rgba(245, 184, 46, 0.55);

        animation:
            big-star-spark
            1.8s
            ease-out
            infinite;

        pointer-events: none;
    }


    /* Different timing for each spark */

    .big-star-cursor__spark:nth-child(3) {
        animation-delay: 0.2s;
    }

    .big-star-cursor__spark:nth-child(4) {
        animation-delay: 0.6s;
    }

    .big-star-cursor__spark:nth-child(5) {
        animation-delay: 1s;
    }


    /* =====================================================
       HOVERING OVER CLICKABLE ELEMENT
    ===================================================== */

    .big-star-cursor.is-hovering
    .big-star-cursor__ring {

        width: 62px;
        height: 62px;

        left: -31px;
        top: -31px;

        border-color:
            rgba(245, 184, 46, 0.9);

        background:
            rgba(245, 184, 46, 0.06);

        box-shadow:

            0 0 20px
            rgba(245, 184, 46, 0.18),

            inset 0 0 20px
            rgba(245, 184, 46, 0.05);
    }


    /* Make star larger on hover */

    .big-star-cursor.is-hovering
    .big-star-cursor__star {

        transform:
            scale(1.6)
            rotate(15deg);

        filter:

            drop-shadow(
                0 0 7px
                rgba(245, 184, 46, 1)
            )

            drop-shadow(
                0 0 20px
                rgba(245, 184, 46, 0.65)
            );
    }


    /* =====================================================
       CLICKING EFFECT
    ===================================================== */

    .big-star-cursor.is-clicking
    .big-star-cursor__ring {

        transform: scale(0.75);

        background:
            rgba(245, 184, 46, 0.16);

        border-color:
            rgba(245, 184, 46, 1);
    }


    .big-star-cursor.is-clicking
    .big-star-cursor__star {

        transform:
            scale(2)
            rotate(15deg);

        filter:

            drop-shadow(
                0 0 8px
                rgba(245, 184, 46, 1)
            )

            drop-shadow(
                0 0 24px
                rgba(245, 184, 46, 0.8)
            );
    }


    /* =====================================================
       SPARK ANIMATION
    ===================================================== */

    @keyframes big-star-spark {

        0% {

            opacity: 0;

            transform:
                translate(0, 0)
                scale(0.4);
        }

        20% {

            opacity: 1;
        }

        60% {

            opacity: 0.7;
        }

        100% {

            opacity: 0;

            transform:
                translate(
                    var(--spark-x),
                    var(--spark-y)
                )
                scale(0);
        }
    }

}


/* =========================================================
   TABLET / MOBILE
   =========================================================

   Custom cursor is completely disabled.
   Normal touch behavior remains unchanged.
========================================================= */

@media (max-width: 991.98px),
       (pointer: coarse) {

    .big-star-cursor {
        display: none !important;
    }

    body.has-big-star-cursor {
        cursor: auto;
    }

    body.has-big-star-cursor a,
    body.has-big-star-cursor button,
    body.has-big-star-cursor [role="button"],
    body.has-big-star-cursor input,
    body.has-big-star-cursor textarea,
    body.has-big-star-cursor select {
        cursor: auto;
    }
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .big-star-cursor {
        display: none !important;
    }

    body.has-big-star-cursor {
        cursor: auto;
    }

    body.has-big-star-cursor a,
    body.has-big-star-cursor button,
    body.has-big-star-cursor [role="button"],
    body.has-big-star-cursor input,
    body.has-big-star-cursor textarea,
    body.has-big-star-cursor select {
        cursor: auto;
    }
}