/* =====================================================
   CUSTOM CURSOR
====================================================== */

.cursor{

    position:fixed;

    width:12px;
    height:12px;

    background:var(--primary);

    border-radius:50%;

    pointer-events:none;

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

    z-index:999999;

    transition:
    width .2s,
    height .2s,
    background .2s,
    transform .08s linear;

}

/* =====================================================
   CURSOR BLUR
====================================================== */

.cursor-blur{

    position:fixed;

    width:42px;
    height:42px;

    background:rgba(56,189,248,.18);

    border-radius:50%;

    backdrop-filter:blur(10px);

    pointer-events:none;

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

    z-index:999998;

    transition:
    transform .15s linear,
    width .25s,
    height .25s;

}

/* =====================================================
   HOVER EFFECT
====================================================== */

.cursor.active{

    width:22px;

    height:22px;

    background:#ffffff;

}

.cursor-blur.active{

    width:70px;

    height:70px;

    background:rgba(56,189,248,.28);

}

/* =====================================================
   HIDE ON MOBILE
====================================================== */

@media(max-width:768px){

.cursor,
.cursor-blur{

display:none;

}

body{

cursor:auto;

}

}

@media(min-width:769px){

body{

cursor:none;

}

a,
button,
input,
textarea{

cursor:none;

}

}