/*==================================================
  CURSOR.CSS
  Zen Spa Home
==================================================*/

/*==============================================
  DEFAULT CURSOR
==============================================*/

html{

    cursor:none;

}

body{

    cursor:none;

}

a,
button,
input,
textarea,
select{

    cursor:none;

}

/*==============================================
  MAIN CURSOR
==============================================*/

.cursor{

    position:fixed;

    top:0;

    left:0;

    width:12px;

    height:12px;

    border-radius:50%;

    background:var(--color-primary);

    pointer-events:none;

    z-index:99999;

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

    will-change:transform;

    transition:

        width .25s ease,

        height .25s ease,

        background .25s ease,

        opacity .25s ease;

}

/*==============================================
  CURSOR FOLLOWER
==============================================*/

.cursor-follower{

    position:fixed;

    top:0;

    left:0;

    width:42px;

    height:42px;

    border-radius:50%;

    border:1px solid rgba(185,145,93,.45);

    background:rgba(185,145,93,.08);

    backdrop-filter:blur(8px);

    pointer-events:none;

    z-index:99998;

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

    will-change:transform;

    transition:

        width .35s ease,

        height .35s ease,

        border-color .35s ease,

        background .35s ease,

        opacity .35s ease;

}

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

.cursor.hover{

    width:18px;

    height:18px;

}

.cursor-follower.hover{

    width:72px;

    height:72px;

    border-color:rgba(185,145,93,.8);

    background:rgba(185,145,93,.12);

}

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

.cursor.click{

    transform:translate(-50%,-50%) scale(.75);

}

.cursor-follower.click{

    transform:translate(-50%,-50%) scale(.90);

}

/*==============================================
  HIDDEN
==============================================*/

.cursor.hidden,

.cursor-follower.hidden{

    opacity:0;

}

/*==============================================
  TEXT SELECTION
==============================================*/

.cursor.text{

    width:8px;

    height:28px;

    border-radius:6px;

}

.cursor-follower.text{

    opacity:0;

}

/*==============================================
  RESPONSIVE
==============================================*/

@media (hover:none),

(max-width:992px){

    html{

        cursor:auto;

    }

    body{

        cursor:auto;

    }

    a,
    button,
    input,
    textarea,
    select{

        cursor:pointer;

    }

    .cursor,

    .cursor-follower{

        display:none;

    }

}