/* assets/css/cursor.css */
.c-dot, .c-r, .c-g, .c-b {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  will-change: left, top;
}

.c-r, .c-g, .c-b {
  width: 8px; height: 8px;
  mix-blend-mode: multiply;
}

/* Darker saturated colors for multiply on white backgrounds */
.c-r { background: rgba(210,  20,  20, 0.80); }
.c-g { background: rgba( 20, 160,  20, 0.80); }
.c-b { background: rgba( 20,  40, 210, 0.80); }

/* Homepage: screen blending on dark video backgrounds */
.homepage .c-r,
.homepage .c-g,
.homepage .c-b { mix-blend-mode: screen; }
.homepage .c-r  { background: rgba(255,  55,  55, 0.85); }
.homepage .c-g  { background: rgba( 55, 255,  55, 0.85); }
.homepage .c-b  { background: rgba( 55,  90, 255, 0.85); }

.c-dot {
  z-index: 10000;
  width: 10px; height: 10px;
  background: #fff;
  mix-blend-mode: difference;
  transition:
    width  0.35s cubic-bezier(0.16, 1, 0.3, 1),
    height 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

body.cursor-hover .c-dot {
  width: 36px;
  height: 36px;
}