/* ═══════════════════════════════════
   GRADINGPEN CUSTOM CURSOR SYSTEM
   ═══════════════════════════════════ */

/* Hide default cursor everywhere */
* { cursor: none !important; }

/* 1. Main pen cursor — follows mouse exactly */
#gp-cursor {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 99999;
  will-change: transform;
  transform: translate(-18px, -3px) rotate(160deg);
  transition: opacity 0.2s;
}
#gp-cursor svg {
  width: 36px; height: 36px;
  transition: transform 0.18s cubic-bezier(0.34,1.56,0.64,1), filter 0.18s ease;
  filter: drop-shadow(1px 2px 4px rgba(0,0,0,0.15));
}
body.gp-hover #gp-cursor svg {
  transform: scale(1.12) translateY(-2px);
  filter: drop-shadow(0 3px 10px rgba(37,99,235,0.35));
}
body.gp-click #gp-cursor svg {
  transform: scale(0.88) translateY(3px) rotate(8deg);
  filter: drop-shadow(0 1px 3px rgba(37,99,235,0.5));
}

/* 2. Dot — tiny tip dot, no lag */
#gp-dot {
  position: fixed;
  top: 0; left: 0;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #2563EB;
  pointer-events: none;
  z-index: 100000;
  transform: translate(-2.5px, -2.5px);
  will-change: transform;
  transition: background 0.15s, transform 0.1s;
  box-shadow: 0 0 0 0 rgba(37,99,235,0);
}
body.gp-hover #gp-dot {
  background: #2563EB;
  transform: translate(-2.5px, -2.5px) scale(1.6);
  box-shadow: 0 0 8px 2px rgba(37,99,235,0.3);
}
body.gp-click #gp-dot {
  background: #16a34a;
  transform: translate(-2.5px, -2.5px) scale(0.7);
}

/* 3. Trailing aura — smooth lag ring */
#gp-aura {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 99997;
  width: 36px; height: 36px;
  transform: translate(-18px, -18px);
  will-change: transform;
}
#gp-aura-ring {
  width: 100%; height: 100%;
  border-radius: 50%;
  border: 1.5px solid rgba(37,99,235,0.2);
  background: rgba(37,99,235,0.03);
  transition: transform 0.15s ease, border-color 0.2s, background 0.2s;
}
body.gp-hover #gp-aura-ring {
  transform: scale(1.6);
  border-color: rgba(37,99,235,0.3);
  background: rgba(37,99,235,0.05);
}
body.gp-click #gp-aura-ring {
  transform: scale(0.5);
  border-color: rgba(22,163,74,0.5);
  background: rgba(22,163,74,0.08);
}

/* 4. Pencil shaving trail particles */
.gp-shaving {
  position: fixed;
  pointer-events: none;
  z-index: 99994;
  top: 0; left: 0;
  width: var(--w, 8px); height: var(--h, 3px);
  border-radius: var(--r, 50%);
  background: var(--col, #2563EB);
  opacity: 0;
  transform-origin: center center;
  animation: shavingFade var(--dur, 500ms) ease forwards;
  animation-delay: var(--delay, 0ms);
}
@keyframes shavingFade {
  0%   { opacity: 0.65; transform: translate(-50%,-50%) rotate(var(--rot,0deg)) scale(1); }
  100% { opacity: 0;    transform: translate(calc(-50% + var(--tx,0px)), calc(-50% + var(--ty,12px))) rotate(var(--rot2,20deg)) scale(0.3); }
}

/* Graphite dust dots */
.gp-dust {
  position: fixed;
  pointer-events: none;
  z-index: 99993;
  top: 0; left: 0;
  width: var(--s, 3px); height: var(--s, 3px);
  border-radius: 50%;
  background: rgba(100,116,139,0.5);
  animation: dustFade var(--dur, 400ms) ease forwards;
}
@keyframes dustFade {
  0%   { opacity: 0.5; transform: translate(-50%,-50%) scale(1); }
  100% { opacity: 0;   transform: translate(calc(-50% + var(--tx,0px)), calc(-50% + var(--ty,0px))) scale(0); }
}

/* 5. Click mark burst — pencil stroke lines */
.gp-stroke {
  position: fixed;
  pointer-events: none;
  z-index: 99996;
  top: 0; left: 0;
  height: 2px;
  border-radius: 1px;
  background: var(--col, #2563EB);
  transform-origin: left center;
  animation: strokeBurst 0.4s ease forwards;
}
@keyframes strokeBurst {
  0%  { opacity: 0.9; transform: translate(var(--sx,0px), var(--sy,0px)) rotate(var(--angle,0deg)) scaleX(0); }
  50% { opacity: 0.8; transform: translate(var(--sx,0px), var(--sy,0px)) rotate(var(--angle,0deg)) scaleX(1); }
  100%{ opacity: 0;   transform: translate(var(--sx,0px), var(--sy,0px)) rotate(var(--angle,0deg)) scaleX(1) translateX(var(--ex,0px)); }
}

/* 6. Grade check stamp */
#gp-stamp {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 99998;
  font-size: 13px;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
  color: #16a34a;
  opacity: 0;
  transform: translate(-50%, -180%) scale(0.4);
  white-space: nowrap;
  letter-spacing: -0.01em;
}
#gp-stamp.gp-pop {
  animation: checkPop 0.55s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
@keyframes checkPop {
  0%  { opacity:0; transform:translate(-50%,-160%) scale(0.3); }
  40% { opacity:1; transform:translate(-50%,-195%) scale(1.1); }
  70% { opacity:1; transform:translate(-50%,-200%) scale(1.0); }
  100%{ opacity:0; transform:translate(-50%,-230%) scale(0.9); }
}

/* Hide cursor elements on touch devices */
@media (hover: none) and (pointer: coarse) {
  * { cursor: auto !important; }
  #gp-cursor, #gp-dot, #gp-aura, #gp-stamp { display: none !important; }
}