/* Cursor */

.cursor,
.cursor-dot{
    position:fixed;
    top:0;
    left:0;
    pointer-events:none;
    z-index:9999;
    border-radius:50%;
    transform:translate(-50%,-50%);
    transition:
    width var(--medium),
    height var(--medium),
    background var(--medium),
    border-color var(--medium),
    opacity var(--medium),
    transform .08s linear;
}

.cursor{
    width:42px;
    height:42px;
    border:1px solid rgba(255,255,255,.35);
    backdrop-filter:blur(4px);
    background:rgba(255,255,255,.03);
}

.cursor-dot{
    width:6px;
    height:6px;
    background:var(--color-white);
}

/* States */

.cursor.active{
    width:70px;
    height:70px;
    border-color:var(--color-accent);
    background:rgba(75,123,255,.08);
}

.cursor.image{
    width:90px;
    height:90px;
    background:rgba(255,255,255,.08);
    border-color:var(--color-white);
}

.cursor.hide,
.cursor-dot.hide{
    opacity:0;
}

.cursor.click{
    transform:translate(-50%,-50%) scale(.8);
}

.cursor.inverse{
    border-color:#000;
}

.cursor-dot.inverse{
    background:#000;
}

/* Label */

.cursor::after{
    content:attr(data-text);
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    font-size:.65rem;
    font-weight:600;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:#fff;
    opacity:0;
    transition:opacity var(--medium);
}

.cursor.label::after{
    opacity:1;
}

/* Hide */

@media (pointer:coarse){

    .cursor,
    .cursor-dot{
        display:none;
    }

}