/*==========================================================
GENESIS V2
CURSOR CSS
==========================================================*/

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

html{

cursor:none;

}

body{

cursor:none;

}

/*==========================================================
MAIN DOT
==========================================================*/

.cursor-dot{

position:fixed;

top:0;

left:0;

width:8px;

height:8px;

border-radius:50%;

background:#ffffff;

pointer-events:none;

z-index:99999;

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

transition:

width .25s ease,

height .25s ease,

background .25s ease,

opacity .25s ease;

mix-blend-mode:difference;

}

/*==========================================================
RING
==========================================================*/

.cursor-ring{

position:fixed;

top:0;

left:0;

width:42px;

height:42px;

border-radius:50%;

border:1.6px solid rgba(255,255,255,.35);

pointer-events:none;

z-index:99998;

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

transition:

width .35s,

height .35s,

border-color .35s,

background .35s,

transform .12s linear;

backdrop-filter:blur(4px);

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

}

/*==========================================================
GLOW
==========================================================*/

.cursor-glow{

position:fixed;

top:0;

left:0;

width:140px;

height:140px;

border-radius:50%;

background:

radial-gradient(

circle,

rgba(255,0,85,.22),

rgba(139,0,255,.10),

transparent);

filter:blur(28px);

pointer-events:none;

z-index:99997;

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

transition:

transform .08s linear,

opacity .25s ease;

opacity:.9;

}

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

.cursor-hover .cursor-ring{

width:72px;

height:72px;

border-color:rgba(255,0,85,.65);

background:

rgba(255,0,85,.08);

}

.cursor-hover .cursor-dot{

width:12px;

height:12px;

background:#ff0055;

}

.cursor-hover .cursor-glow{

width:180px;

height:180px;

opacity:1;

}

/*==========================================================
BUTTON PRESS
==========================================================*/

.cursor-click .cursor-ring{

transform:

translate(-50%,-50%)

scale(.82);

}

.cursor-click .cursor-dot{

transform:

translate(-50%,-50%)

scale(.7);

}

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

.cursor-text .cursor-ring{

width:64px;

height:64px;

border-color:

rgba(77,163,255,.6);

}

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

.cursor-image .cursor-ring{

width:90px;

height:90px;

border-color:

rgba(139,0,255,.6);

}

.cursor-image .cursor-glow{

width:220px;

height:220px;

}

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

::selection{

background:#ff0055;

color:#fff;

}

/*==========================================================
HIDE CURSOR
==========================================================*/

.hide-cursor .cursor-dot,

.hide-cursor .cursor-ring,

.hide-cursor .cursor-glow{

opacity:0;

}

/*==========================================================
DISABLE ON TOUCH
==========================================================*/

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

html{

cursor:auto;

}

body{

cursor:auto;

}

.cursor-dot,

.cursor-ring,

.cursor-glow{

display:none!important;

}

}

/*==========================================================
PERFORMANCE
==========================================================*/

.cursor-dot,

.cursor-ring,

.cursor-glow{

will-change:transform;

backface-visibility:hidden;

transform-style:preserve-3d;

}