/* Mouse Glitch - Cursor styles */
#mg-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  transform: none;
  pointer-events: none;
  z-index: 99999;
  mix-blend-mode: difference;
  opacity: 0;
  transition: opacity 0.25s ease;
}

#mg-cursor.mg-visible {
  opacity: 1;
}

#mg-cursor .mg-core {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.5),
    inset 0 0 20px rgba(255, 255, 255, 0.35);
  transform: translateZ(0);
  will-change: transform, width, height, border-radius, filter;
}

/* RGB ghost channels for chromatic aberration/glitch */
#mg-cursor .gb {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  mix-blend-mode: screen;
  opacity: 0.45;
  filter: blur(2px);
  transform: translateZ(0);
  will-change: transform;
}

#mg-cursor .mg-r {
  background: rgba(255, 0, 70, 0.5);
}
#mg-cursor .mg-g {
  background: rgba(0, 255, 180, 0.5);
}
#mg-cursor .mg-b {
  background: rgba(0, 120, 255, 0.5);
}

/* Static noise overlay */
#mg-cursor .mg-noise {
  position: absolute;
  inset: -20%;
  width: 140%;
  height: 140%;
  opacity: 0.12;
  pointer-events: none;
}

/* Hovered state when over interactive elements */
#mg-cursor.mg-active .mg-core {
  box-shadow: 0 0 28px rgba(255, 255, 255, 0.7),
    inset 0 0 28px rgba(255, 255, 255, 0.55);
}

/* Smooth, glitchy trail segments */
#mg-cursor .mg-trail {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  pointer-events: none;
  /* Base fill as white; subtle channels layered by CSS vars */
  background: radial-gradient(
    circle at 50% 50%,
    rgba(255, 255, 255, 0.6),
    rgba(255, 255, 255, 0.2)
  );
  mix-blend-mode: screen;
  /* Each segment gets its own transform; JS sets translate/rotate */
  transform: translate(-50%, -50%);
  /* Chromatic offsets applied via CSS variables set in JS */
  box-shadow: var(--mg-rx, 0px) var(--mg-ry, 0px) 0 rgba(255, 0, 70, 0.25),
    var(--mg-gx, 0px) var(--mg-gy, 0px) 0 rgba(0, 255, 180, 0.22),
    var(--mg-bx, 0px) var(--mg-by, 0px) 0 rgba(0, 120, 255, 0.22);
  will-change: transform, opacity, filter, width, height, border-radius;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  #mg-cursor,
  #mg-cursor * {
    transition: none !important;
    animation: none !important;
  }
  #mg-cursor .gb {
    opacity: 0.25;
    filter: none;
  }
  #mg-cursor .mg-trail {
    box-shadow: none;
    filter: none !important;
    opacity: 0.12 !important;
  }
}

/* On touch devices or small screens we can auto-hide via JS; keep CSS minimal. */
html.mg-hide-cursor,
body.mg-hide-cursor,
html.mg-hide-cursor * {
  cursor: auto !important;
}

/* Morphing cursor base element (no legacy trail/ghosts) */
#mg-cursor .morphing-cursor {
  position: fixed;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  /* Base white that inverts with the page */
  background: #fff;
  mix-blend-mode: difference;
  pointer-events: none;
  will-change: transform, width, height, border-radius, filter, opacity;
  z-index: 100000;
  /* Removed TV/CRT overlay and glow */
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  /* No special TV/CRT animations to disable */
}