.access-cursor{
    position:fixed;
    left:0;
    top:0;
    width:50px;
    height:50px;
    z-index:20000;
    pointer-events:none;
    opacity:0;
    transform:translate(-50%,-50%);
    transition:opacity .2s ease;
}

/* =========================
   ACCESS EMBLEM
========================= */

.cursor-emblem{
    position:absolute;
    left:50%;
    top:50%;
    width:27px;
    height:27px;
    transform:translate(-50%,-50%);
    filter:drop-shadow(
        0 0 5px
        rgba(69,193,183,.45)
    );
    transition:.25s var(--ease);
}

/* =========================
   MAIN CIRCLE
========================= */

.cursor-ring{
    position:absolute;
    inset:4px;
    border:1px solid rgba(111,255,242,.48);
    border-radius:50%;

    box-shadow:
        0 0 10px
        rgba(69,193,183,.12);

    transition:.3s var(--ease);
}

/* =========================
   ORBIT TRACK
========================= */

.cursor-orbit-track{
    position:absolute;
    inset:0;
    border-radius:50%;

    transform-origin:50% 50%;

    will-change:transform;
}

/* =========================
   ORANGE ORBITING DOT
========================= */

.cursor-orbit-dot{
    position:absolute;

    left:50%;
    top:-3px;

    width:6px;
    height:6px;

    transform:translateX(-50%);

    border-radius:50%;

    background:var(--orange);

    box-shadow:
        0 0 4px var(--orange),
        0 0 11px rgba(253,81,28,.95);
}

/* =========================
   CLICK RIPPLE
========================= */

.cursor-ripple{
    position:absolute;
    inset:5px;

    border:
        1px solid
        rgba(111,255,242,.6);

    border-radius:50%;

    opacity:0;
}

/* =========================
   INTERACTIVE HOVER
========================= */

.access-cursor.is-hovering
.cursor-ring{
    inset:-5px;

    border-color:
        rgba(111,255,242,.8);

    box-shadow:
        0 0 18px
        rgba(69,193,183,.25),

        0 0 30px
        rgba(253,81,28,.08);
}

.access-cursor.is-hovering
.cursor-emblem{
    width:31px;
    height:31px;

    filter:
        drop-shadow(
            0 0 8px
            rgba(69,193,183,.65)
        );
}

/* =========================
   CLICK STATE
========================= */

.access-cursor.is-clicking
.cursor-ring{
    inset:10px;

    border-color:
        var(--orange);

    box-shadow:
        0 0 20px
        rgba(253,81,28,.38);
}

.access-cursor.is-clicking
.cursor-emblem{
    transform:
        translate(-50%,-50%)
        scale(.86)
        rotate(10deg);

    filter:
        drop-shadow(
            0 0 10px
            rgba(253,81,28,.65)
        );
}

/* =========================
   RELEASE RIPPLE
========================= */

.access-cursor.release
.cursor-ripple{
    animation:
        cursorRipple
        .55s
        var(--ease);
}

@keyframes cursorRipple{

    0%{
        opacity:.9;
        transform:scale(.45);
    }

    100%{
        opacity:0;
        transform:scale(2);
    }

}

/* =========================
   REMOVE NORMAL CURSOR
   EVERYWHERE
========================= */

@media (hover:hover) and (pointer:fine){

    body.access-custom-cursor,
    body.access-custom-cursor *{
        cursor:none!important;
    }

}

/* =========================
   TOUCH DEVICES
========================= */

@media (hover:none), (pointer:coarse){

    .access-cursor{
        display:none!important;
    }

}