/* ----------------------------

  cursor styles

--------------------------- */
:root {
  --csr-color: #fff;
}
.cursor {
  /*pointer-events: none;*/
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  display: block;

  /*styles applied for showing / hiding cursor - do not touch*/
  -webkit-transition: opacity 300ms linear;
  -o-transition: opacity 300ms linear;
  transition: opacity 300ms linear;
  opacity: 0;

  /*element width*/
  width: 6px;
  height: 6px;
  overflow: hidden;
  display: none;
}

.cursor.moving {
  opacity: 1;
}

.cursor::before {
  content: " ";
  height: 100%;
  width: 100%;
  position: fixed;
  background-color: var(--csr-color);
  border-radius: 50%;
  top: 0;
  left: 0;

  /* transitions animations*/
  opacity: 1;
  -webkit-transition: opacity 300ms linear;
  -o-transition: opacity 300ms linear;
  transition: opacity 300ms linear;
}

/* expand is the class you assigned with the plugin to cursor when a selected element is hovered*/
.cursor.expand::before {
  opacity: 0;
}

/* ----------------------------

  node styles

--------------------------- */

.node {
  pointer-events: none;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  display: block;

  /*styles applied for showing / hiding cursor - do not touch*/
  -webkit-transition: opacity 300ms linear;
  -o-transition: opacity 300ms linear;
  transition: opacity 300ms linear;
  opacity: 0;

  /*element width*/
  width: 24px;
  height: 24px;
}
.node {
  @media (hover: none) and (pointer: coarse) {
    display: none;
  }
}
.node.bg-m-effect{
    z-index: -1;
}
.node.moving {
  opacity: 1;
}

.node::before {
  content: " ";
  height: 100%;
  width: 100%;
  position: absolute;
  background-color: transparent;
  border-radius: 50%;
  top: 0;
  left: 0;
  border: 1px solid var(--csr-color);
  /*states and transitions animations*/
  -webkit-transform: scale(1.5);
  -ms-transform: scale(1.5);
  transform: scale(1.5);
  opacity: 1;
  -webkit-transition: opacity 300ms linear, transform 300ms linear,
    border 300ms linear, background-color 300ms linear;
  -o-transition: opacity 300ms linear, transform 300ms linear,
    border 300ms linear, background-color 300ms linear;
  -webkit-transition: opacity 300ms linear, border 300ms linear,
    background-color 300ms linear, -webkit-transform 300ms linear;
  transition: opacity 300ms linear, border 300ms linear,
    background-color 300ms linear, -webkit-transform 300ms linear;
  transition: opacity 300ms linear, transform 300ms linear, border 300ms linear,
    background-color 300ms linear;
  transition: opacity 300ms linear, transform 300ms linear, border 300ms linear,
    background-color 300ms linear, -webkit-transform 300ms linear;
  filter: invert(0);
}

/* expand is the class you assigned with the plugin to cursor when a selected element is hovered*/
.node.expand::before {
  -webkit-transform: scale(2);
  -ms-transform: scale(2);
  transform: scale(2);
  background-color: var(--csr-color);
  opacity: 0.2;
}
.node.bg-m-effect::before {
  -webkit-transform: scale(20);
  -ms-transform: scale(20);
  transform: scale(20);
  width: 400px;
  height: 400px;
  left: -200px;
  top: -200px;
  border: unset;
  background: rgb(251,192,63);
  background: radial-gradient(circle, #ecdcbb 0%, rgba(0,0,0,0) 80%);
  opacity: 0.9;
  animation: InfiniteCicle 20s infinite ease-in-out;
  pointer-events: none;
}  
  @keyframes InfiniteCicle{
    from{
      transform: rotate(0);
    }
    50%{
      scale: 1 1.25;
    }
    to{
      transform: rotate(360deg)
    }
  }
/* drag cursor */
.node.drag-cursor::before {
  -webkit-transform: scale(2);
  -ms-transform: scale(2);
  transform: scale(2);
  background-color: transparent;
  border: 1px solid var(--csr-color);
  opacity: 1;
}

.node.drag-cursor::after {
  position: absolute;
  left: -38px;
  content: url("../../icons/cursor_drag.svg");
  opacity: 1;
}
.node.zoom-cursor::before {
  -webkit-transform: scale(3);
  -ms-transform: scale(3);
  transform: scale(3);
  background-color: transparent;
  border: 1px solid var(--csr-color);
}
.node.zoom-cursor::after {
  position: absolute;
  width: 25px;
  height: 25px;
  content: url("../../icons/cursor_view_project.svg");
  color: var(--csr-color);
}
/* zoom cursor-2 */
.node.zoom-cursor-2::before {
    -webkit-transform: scale(3);
        -ms-transform: scale(3);
            transform: scale(3);
    background-color: transparent;
    border: 1px solid #fff;
    opacity: 1;
}
.node.zoom-cursor-2::after {
    position: absolute;
    left:0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    content: '+';
    font-size: 45px;
    font-weight: 300;
    opacity: 1;
    color: #fff;
}