.mf-cursor {
position: fixed;
top: 0;
left: 0;
z-index: 99999;
direction: ltr;
contain: layout style size;
pointer-events: none;
transition: opacity .3s, color .4s;
--border-color: unset;
--border-top-radius: 50%;
--border-right-radius: 50%;
--border-bottom-radius: 50%;
--border-left-radius: 50%;
--border-style: unset;
--border-top-width: 0;
--border-right-width: 0;
--border-bottom-width: 0;
--border-left-width: 0
}
.mf-cursor.mf-hide-cursor {
display: none
}
.mf-cursor:before {
content: "";
position: absolute;
top: -24px;
left: -24px;
display: block;
width: 48px;
height: 48px;
transform: scale(.2);
background: currentColor;
border-radius: 50%;
transition: transform .25s ease-in-out, opacity .1s, border .2s;
border-color: var(--border-color);
border-radius: var(--border-top-radius) var(--border-right-radius) var(--border-bottom-radius) var(--border-left-radius);
border-style: var(--border-style);
border-width: var(--border-top-width) var(--border-right-width) var(--border-bottom-width) var(--border-left-width)
}
.mf-cursor.-inverse {
color: #fff
}
@supports(mix-blend-mode:exclusion) {
.mf-cursor.-exclusion {
mix-blend-mode: exclusion
}
.mf-cursor.-exclusion:before {
background: #fff
}
}
.mf-cursor.-icon:before {
transform: scale(1.5)
}
.mf-cursor.-icon.-active:before {
transform: scale(1.4)
}
.mf-cursor.-hidden:before {
transform: scale(0) !important
}
.mf-cursor-text {
position: absolute;
white-space: nowrap;
top: -18px;
left: -18px;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
transform: scale(0) rotate(10deg);
opacity: 0;
font-size: 16px;
line-height: 20px;
text-align: center;
transition: opacity .4s, transform .3s
}
.mf-cursor.-icon .mf-cursor-text,
.mf-cursor.-text .mf-cursor-text {
opacity: 1;
transform: scale(1)
}
.mf-cursor-media {
position: absolute;
width: 400px;
height: 400px;
margin: -200px 0 0 -200px
}
.mf-cursor-media img,
.mf-cursor-media video {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
border-radius: var(--border-top-radius) var(--border-right-radius) var(--border-bottom-radius) var(--border-left-radius);
transition: border-radius .2s linear
}
@supports(object-fit:cover) {
.mf-cursor-media img,
.mf-cursor-media video {
position: static;
width: 100%;
height: 100%;
object-fit: cover;
transform: translateZ(0)
}
}
.mf-cursor-media-box {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
transform: scale(0) translateZ(0);
padding: 1px;
opacity: 0;
transition: transform .3s, opacity .2s .2s, border .2s
}
.mf-cursor.-media .mf-cursor-media-box {
opacity: 1;
transform: scale(.696);
transition-duration: .3s, .3s;
transition-delay: 0s, 0s
}
.mf-cursor.-media {
color: transparent !important
}