/* ============================================================
   INSANE.CSS — ULTIMATE cursor + eye-candy layer
   ============================================================ */

/* ── 1. HIDE OS CURSOR globally, force-show custom one ── */
@media (hover: hover) {
  html, body, *, a, button, .btn, input, textarea, select {
    cursor: none !important;
  }
}

/* ── 2. CURSOR — MUCH MORE VISIBLE ─────────────── */
@media (hover: hover) {
  .cursor {
    width: 16px !important;
    height: 16px !important;
    background: radial-gradient(circle, #00d4ff 0%, #007bff 70%, transparent 100%) !important;
    border: 2px solid #ffffff !important;
    box-shadow:
      0 0 18px rgba(0, 220, 255, 1),
      0 0 35px rgba(0, 180, 255, 0.85),
      0 0 60px rgba(0, 140, 255, 0.55) !important;
    z-index: 1000005 !important;
    mix-blend-mode: normal !important;
  }
  .cursor2 {
    width: 54px !important;
    height: 54px !important;
    border: 2px solid rgba(0, 200, 255, 0.85) !important;
    box-shadow:
      0 0 24px rgba(0, 180, 255, 0.45),
      inset 0 0 10px rgba(0, 180, 255, 0.18) !important;
    z-index: 1000004 !important;
  }
  .cursor.magnet {
    width: 26px !important;
    height: 26px !important;
    background: radial-gradient(circle, #ffffff 0%, #00d4ff 60%, transparent 100%) !important;
    box-shadow:
      0 0 24px rgba(255, 255, 255, 1),
      0 0 50px rgba(0, 220, 255, 0.9) !important;
  }
  .cursor2.magnet {
    width: 76px !important;
    height: 76px !important;
    border-color: #00d4ff !important;
    border-width: 3px !important;
  }
}

/* ── 3. CURSOR PARTICLE TRAIL (small dots fade behind cursor) ── */
.cr-trail {
  position: fixed;
  top: 0; left: 0;
  width: 8px; height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 220, 255, 0.95), rgba(0, 120, 255, 0.4));
  pointer-events: none;
  z-index: 1000003;
  animation: crTrailFade 0.85s ease-out forwards;
}
@keyframes crTrailFade {
  0%   { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.2); }
}

/* ── 4. SPOTLIGHT — soft white glow following cursor ── */
#cr-spotlight {
  position: fixed;
  top: 0; left: 0;
  width: 600px; height: 600px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(closest-side, rgba(0, 180, 255, 0.10), transparent 70%);
  transform: translate(-50%, -50%);
  filter: blur(20px);
  mix-blend-mode: multiply;
  transition: opacity 0.3s;
}
@media (hover: none), (max-width: 860px) {
  #cr-spotlight { display: none; }
}

/* ── 5. ELECTRIC PULSE ON SKILL BARS ──────────── */
.colorlib-skills .progress-bar {
  position: relative;
  overflow: hidden !important;
}
.colorlib-skills .progress-bar::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.5) 50%,
      transparent 100%);
  background-size: 200% 100%;
  animation: crShine 2.4s linear infinite;
  pointer-events: none;
}
@keyframes crShine {
  0%   { background-position: -100% 0; }
  100% { background-position: 200% 0; }
}

/* ── 6. FLOATING ORBS in page background (subtle) ──── */
.cr-orb {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(40px);
  opacity: 0.5;
  mix-blend-mode: multiply;
}
.cr-orb-1 {
  width: 480px; height: 480px;
  top: 30%; left: -120px;
  background: radial-gradient(closest-side, rgba(0, 140, 255, 0.18), transparent 70%);
  animation: crOrbFloat1 16s ease-in-out infinite;
}
.cr-orb-2 {
  width: 380px; height: 380px;
  top: 60%; right: -100px;
  background: radial-gradient(closest-side, rgba(0, 200, 255, 0.16), transparent 70%);
  animation: crOrbFloat2 18s ease-in-out infinite reverse;
}
.cr-orb-3 {
  width: 320px; height: 320px;
  bottom: 10%; left: 40%;
  background: radial-gradient(closest-side, rgba(0, 100, 255, 0.12), transparent 70%);
  animation: crOrbFloat3 22s ease-in-out infinite;
}
@keyframes crOrbFloat1 {
  0%,100% { transform: translate(0, 0); }
  50%     { transform: translate(50px, -40px); }
}
@keyframes crOrbFloat2 {
  0%,100% { transform: translate(0, 0); }
  50%     { transform: translate(-60px, 30px); }
}
@keyframes crOrbFloat3 {
  0%,100% { transform: translate(0, 0) scale(1); }
  50%     { transform: translate(40px, -50px) scale(1.15); }
}

/* ── 7. RIPPLE EFFECT on click (added via JS) ───── */
.cr-ripple {
  position: fixed;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 180, 255, 0.55), rgba(0, 180, 255, 0.2) 60%, transparent 100%);
  pointer-events: none;
  z-index: 1000002;
  transform: translate(-50%, -50%);
  animation: crRipple 0.6s ease-out forwards;
}
@keyframes crRipple {
  0%   { width: 0; height: 0; opacity: 1; }
  100% { width: 240px; height: 240px; opacity: 0; }
}

/* ── 8. SHIMMER ON CARDS on hover ──────────────── */
.shv-side li, .colorlib-services .services, .timeline-label, .colorlib-about .services {
  position: relative;
  overflow: hidden;
}
.shv-side li::before, .colorlib-services .services::before {
  /* re-use existing top bar transition without breaking layout */
}

/* ── 9. SHIMMERING GRADIENT BORDERS ON KEY CARDS ── */
.colorlib-about .hire {
  position: relative;
}
.colorlib-about .hire::after {
  content: '';
  position: absolute; inset: -2px;
  z-index: -1;
  background: conic-gradient(from 0deg, #007bff, #00d4ff, #007bff, #00d4ff, #007bff);
  border-radius: 26px;
  animation: crConic 4s linear infinite;
  opacity: 0.35;
  filter: blur(8px);
}
@keyframes crConic { to { transform: rotate(360deg); } }

/* ── 10. SECTION-NUMBER HOLOGRAM EFFECT ─────────── */
.fx-num {
  background: linear-gradient(135deg, rgba(0, 180, 255, 0.18), rgba(0, 120, 255, 0.06));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px rgba(0, 150, 255, 0.18);
  animation: crNumPulse 4s ease-in-out infinite;
}
@keyframes crNumPulse {
  0%,100% { opacity: 0.9; }
  50%     { opacity: 0.5; -webkit-text-stroke-color: rgba(0, 200, 255, 0.3); }
}