/* ============================================================
   CrosshairGG — custom FPS cursor system
   Paired with js/cursor.js. Everything visual lives here.
   ============================================================ */

/* Hide the native cursor only when the custom one is active
   (desktop + fine pointer). Touch devices never get this class. */
body.cgg-cursor-on,
body.cgg-cursor-on * { cursor: none !important; }

/* The reticle that follows the mouse */
#cgg-cursor {
  position: fixed;
  top: 0; left: 0;
  width: var(--cgg-cursor-size, 26px);
  height: var(--cgg-cursor-size, 26px);
  margin-left: calc(var(--cgg-cursor-size, 26px) / -2);
  margin-top:  calc(var(--cgg-cursor-size, 26px) / -2);
  pointer-events: none;
  z-index: 2147483646;
  will-change: transform;
  transform: translate3d(-100px, -100px, 0);
  transition: opacity 200ms ease;
  contain: layout style paint;
}
#cgg-cursor .cgg-cursor__inner {
  position: relative;
  width: 100%; height: 100%;
  color: var(--cgg-cursor-color, #ef4444);
  transition: transform 140ms cubic-bezier(0.22, 1, 0.36, 1), opacity 140ms ease;
}
/* cheap static glow that rides along (no per-frame filter repaint) */
#cgg-cursor .cgg-cursor__inner::after {
  content: "";
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(239, 68, 68, 0.45) 0%, rgba(239, 68, 68, 0) 70%);
  z-index: -1;
}
#cgg-cursor .cgg-cursor__inner svg,
#cgg-cursor .cgg-cursor__inner img { width: 100%; height: 100%; display: block; }

/* hover state — over buttons / links / inputs */
body.cgg-hover #cgg-cursor .cgg-cursor__inner { transform: scale(1.55) rotate(45deg); }
/* recoil pulse on click */
body.cgg-fire #cgg-cursor .cgg-cursor__inner { transform: scale(0.7); }
body.cgg-hover.cgg-fire #cgg-cursor .cgg-cursor__inner { transform: scale(1.15) rotate(45deg); }

/* hide when the pointer leaves the window */
#cgg-cursor.is-hidden { opacity: 0; }

/* ============================================================
   Click effects layer — muzzle flash + bullet holes
   ============================================================ */
#cgg-fx {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2147483645;
  overflow: hidden;
  contain: strict;
}
.cgg-impact {
  position: absolute;
  width: 26px; height: 26px;
  margin-left: -13px; margin-top: -13px;
  color: var(--cgg-impact-color, #ef4444);
  will-change: transform, opacity;
}
.cgg-impact svg { width: 100%; height: 100%; display: block; }
.cgg-impact.is-fading {
  opacity: 0;
  transform: scale(1.08);
  transition: opacity var(--cgg-fade, 700ms) ease, transform var(--cgg-fade, 700ms) ease;
}

/* muzzle flash burst */
.cgg-flash {
  position: absolute;
  width: 60px; height: 60px;
  margin-left: -30px; margin-top: -30px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 240, 220, 0.95) 0%, rgba(239, 68, 68, 0.7) 30%, rgba(239, 68, 68, 0) 70%);
  animation: cggFlash var(--cgg-muzzle, 260ms) cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes cggFlash {
  0%   { transform: scale(0.2); opacity: 0; }
  25%  { transform: scale(1);   opacity: 1; }
  100% { transform: scale(1.5); opacity: 0; }
}
/* sparks ring */
.cgg-ring {
  position: absolute;
  width: 18px; height: 18px;
  margin-left: -9px; margin-top: -9px;
  border-radius: 50%;
  border: 2px solid var(--cgg-impact-color, #ef4444);
  animation: cggRing 420ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes cggRing {
  0%   { transform: scale(0.3); opacity: 0.9; }
  100% { transform: scale(3);   opacity: 0;   }
}

@media (prefers-reduced-motion: reduce) {
  .cgg-flash, .cgg-ring { animation-duration: 1ms; }
  #cgg-cursor .cgg-cursor__inner { transition: none; }
}