:root {
  --_animspeed-fast: 0.1s;
  --_animspeed-medium: 0.3s;
  --_animspeed-slow: 0.6s;
  --_animbezier: cubic-bezier(0.23, 0.65, 0.74, 1.09);
  }
/* ------------------------------------------------*/
/* Cursor Start */
/* ------------------------------------------------*/
.mx-cursor {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  width: 0;
  height: 0;
  z-index: 10000;
}
.mx-cursor.difference {
  mix-blend-mode: difference;
}
.mx-cursor__dot {
  position: absolute;
  display: block;
  width: 0rem;
  height: 0rem;
  -moz-border-radius: 50%;
       border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.9);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  -webkit-transform: translate(-50%, -50%) scale(1);
     -moz-transform: translate(-50%, -50%) scale(1);
      -ms-transform: translate(-50%, -50%) scale(1);
          transform: translate(-50%, -50%) scale(1);
  -webkit-transition-property: background-color, width, height;
  -moz-transition-property: background-color, width, height;
  transition-property: background-color, width, height;
  -webkit-transition-duration: var(--_animspeed-medium);
     -moz-transition-duration: var(--_animspeed-medium);
          transition-duration: var(--_animspeed-medium);
  -webkit-transition-timing-function: var(--_animbezier);
     -moz-transition-timing-function: var(--_animbezier);
          transition-timing-function: var(--_animbezier);
  z-index: 3;
}
.mx-cursor__dot.expand {
  width: 6rem;
  height: 6rem;
}
.mx-cursor__dot.active {
  background-color:  rgba(0, 0, 0, 0.9);
}
.mx-cursor__dot.active-opposite {
  background-color:  rgba(255, 255, 255, 0.9);
}
.mx-cursor__dot.active-accent {
  background-color: #cb0000;
}
.mx-cursor__dot.active-permanent {
  background-color: rgba(255, 255, 255, 0.9);
}
.mx-cursor__dot.cursor-btn-link {
  width: 2rem;
  height: 2rem;
  background-color: #fff;
}

.mx-cursor__text {
  position: absolute;
  margin: 0;
  text-align: center;
  color: #fff;
  font-size: 14px;
  line-height: 18px;
  text-transform: uppercase;
  letter-spacing: -0.01rem;
  padding-top: 0.4rem;
  -webkit-transform: translate(-50%, -50%) scale(0);
     -moz-transform: translate(-50%, -50%) scale(0);
      -ms-transform: translate(-50%, -50%) scale(0);
          transform: translate(-50%, -50%) scale(0);
  -webkit-transition: -webkit-transform 0.2s var(--_animbezier);
  transition: -webkit-transform 0.2s var(--_animbezier);
  -moz-transition: transform 0.2s var(--_animbezier), -moz-transform 0.2s var(--_animbezier);
  transition: transform 0.2s var(--_animbezier);
  transition: transform 0.2s var(--_animbezier), -webkit-transform 0.2s var(--_animbezier), -moz-transform 0.2s var(--_animbezier);
  z-index: 4;
}
.mx-cursor__text.permanent {
  color: #000;
}
.mx-cursor__text.accent {
  color: #fff;
}
.mx-cursor__text.show {
  display: block;
  -webkit-transform: translate(-50%, -50%) scale(1);
     -moz-transform: translate(-50%, -50%) scale(1);
      -ms-transform: translate(-50%, -50%) scale(1);
          transform: translate(-50%, -50%) scale(1);
}

.mx-cursor__image {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18rem;
  height: 18rem;
  overflow: hidden;
  -webkit-transform: translate(-50%, -50%);
     -moz-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-transform-origin: center center;
     -moz-transform-origin: center center;
      -ms-transform-origin: center center;
          transform-origin: center center;
  visibility: hidden;
  clip-path: inset(50% 50% 50% 50% round 50%);
  -webkit-clip-path: inset(50% 50% 50% 50% round 50%);
  -webkit-transition: clip-path var(--_animspeed-medium) var(--_animbezier), visibility 0s linear var(--_animspeed-medium);
  -moz-transition: clip-path var(--_animspeed-medium) var(--_animbezier), visibility 0s linear var(--_animspeed-medium);
  transition: clip-path var(--_animspeed-medium) var(--_animbezier), visibility 0s linear var(--_animspeed-medium);
  will-change: clip-path;
  z-index: 1;
}
.mx-cursor__image img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.mx-cursor__image.show {
  visibility: visible;
  clip-path: inset(0% 0% 0% 0% round 0%);
  -webkit-clip-path: inset(0% 0% 0% 0% round 0%);
  -webkit-transition: clip-path var(--_animspeed-slow) var(--_animbezier), visibility 0s;
  -moz-transition: clip-path var(--_animspeed-slow) var(--_animbezier), visibility 0s;
  transition: clip-path var(--_animspeed-slow) var(--_animbezier), visibility 0s;
}