/* Global glass cursor: pointer, link and contextual states. */


/* =========================================================
   GLOBAL CURSOR
   ========================================================= */

#global-glass-cursor {

    position: fixed !important;

    left: 0;
    top: 0;

    width: 24px;
    height: 24px;

    margin: 0;
    padding: 0;

    box-sizing: border-box;

    border-radius: 50%;

    pointer-events: none !important;

    z-index: 2147483647 !important;

    background: rgba(60, 60, 60, 0.24);

    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);



    opacity: 0;

    transform:
        translate3d(-100px, -100px, 0)
        translate(-50%, -50%);

    display: flex;

    align-items: center;
    justify-content: center;

    will-change: transform, width, height, padding;

    /*
     * Position is NOT animated.
     * Only size/style changes are animated.
     */
    transition:
        width 0.25s cubic-bezier(.22, 1, .36, 1),
        height 0.25s cubic-bezier(.22, 1, .36, 1),
        padding 0.25s cubic-bezier(.22, 1, .36, 1),
        border-radius 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        opacity 0.15s ease;

}


/* =========================================================
   VISIBLE
   ========================================================= */

#global-glass-cursor.is-visible {
    opacity: 1;
}


/* =========================================================
   CURSOR LABEL
   ========================================================= */

#global-glass-cursor .cursor-label {

    font-family: inherit;

    font-size: 10px;

    line-height: 1;

    font-weight: 500;

    letter-spacing: 0.02em;

    color: rgba(255, 255, 255, 0.95);

    white-space: nowrap;

    opacity: 0;

    transform: scale(0.7);

    transition:
        opacity 0.18s ease,
        transform 0.22s cubic-bezier(.22, 1, .36, 1);

}


/* =========================================================
   ALL LINKS
   Every normal <a> gets a larger glass cursor
   ========================================================= */

#global-glass-cursor.is-link {

    width: 58px;
    height: 58px;

    background: rgba(70, 70, 70, 0.24);

    border-color: rgba(255, 255, 255, 0.62);

    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);

    box-shadow:
        0 7px 25px rgba(0, 0, 0, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.24),
        inset 0 0 14px rgba(255, 255, 255, 0.08);
}


/* =========================================================
   GROW CLASS
   Add:
   glass-cursor-grow
   ========================================================= */

#global-glass-cursor.is-grow {

    width: 88px;
    height: 88px;

    background: rgba(70, 70, 70, 0.22);

    border-color: rgba(255, 255, 255, 0.62);

    backdrop-filter: blur(14px) saturate(155%);
    -webkit-backdrop-filter: blur(14px) saturate(155%);

    box-shadow:
        0 10px 35px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.24),
        inset 0 0 18px rgba(255, 255, 255, 0.08);
}


/* =========================================================
   TEXT / VIEW CURSOR
   Button-like glass shape
   ========================================================= */

#global-glass-cursor.is-text {

    width: auto;
    height: auto;

    min-width: 0;

    padding: 10px 18px;

    border-radius: 8px;

    background: rgba(255, 255, 255, 0.16);

    border: 1px solid rgba(255, 255, 255, 0.46);

    backdrop-filter: blur(18px) saturate(170%);
    -webkit-backdrop-filter: blur(18px) saturate(170%);

}


#global-glass-cursor.is-text .cursor-label {

    opacity: 1;

    transform: scale(1);

    font-size: 16px;

    line-height: 1;

    font-weight: 500;

    letter-spacing: 0.02em;

    color: rgba(255, 255, 255, 0.96);

    text-shadow:
        0 1px 8px rgba(0, 0, 0, 0.18);
}


/* =========================================================
   VIEW CURSOR
   Same glass button but slightly larger
   ========================================================= */

#global-glass-cursor.is-view {

    width: auto;
    height: auto;

    min-width: 0;

    padding: 11px 20px;

    border-radius: 8px;

    background: rgba(255, 255, 255, 0.16);

    border: 1px solid rgba(255, 255, 255, 0.46);

    backdrop-filter: blur(18px) saturate(170%);
    -webkit-backdrop-filter: blur(18px) saturate(170%);

    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        inset 0 -1px 0 rgba(255, 255, 255, 0.08),
        inset 0 0 18px rgba(255, 255, 255, 0.08);
}


#global-glass-cursor.is-view .cursor-label {

    opacity: 1;

    transform: scale(1);

    font-size: 16px;

    line-height: 1;

    font-weight: 500;

    letter-spacing: 0.02em;

    color: rgba(255, 255, 255, 0.96);

    text-shadow:
        0 1px 8px rgba(0, 0, 0, 0.18);
}


/* =========================================================
   DARK CURSOR
   Add:
   glass-cursor-dark
   ========================================================= */

#global-glass-cursor.is-dark {

    width: 76px;
    height: 76px;

    background: rgba(20, 20, 20, 0.42);

    border-color: rgba(255, 255, 255, 0.36);

    backdrop-filter: blur(14px) saturate(130%);
    -webkit-backdrop-filter: blur(14px) saturate(130%);

    box-shadow:
        0 10px 35px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}


/* =========================================================
   HIDE CURSOR
   Add:
   glass-cursor-hide
   ========================================================= */

#global-glass-cursor.is-hidden {

    opacity: 0 !important;
}




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

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

    #global-glass-cursor {
        display: none !important;
    }

}