/* ============================================
   TALEY MAGIC EFFECTS
   Custom Cursor, Magnetic Buttons, Particle Effects
   Desktop only - disabled on touch devices
============================================ */

/* ============================================
   CUSTOM CURSOR
============================================ */

.magic-cursor {
  position: fixed;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(76, 175, 80, 0.6) 0%, rgba(76, 175, 80, 0) 70%);
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  transition:
    width 0.2s ease,
    height 0.2s ease,
    background 0.2s ease;
  mix-blend-mode: normal;
  will-change: transform;
}

.magic-cursor.hover {
  width: 50px;
  height: 50px;
  background: radial-gradient(
    circle,
    rgba(76, 175, 80, 0.3) 0%,
    rgba(139, 195, 74, 0.1) 50%,
    transparent 70%
  );
}

.magic-cursor.click {
  transform: translate(-50%, -50%) scale(0.8);
}

/* Cursor trail particles */
.cursor-particle {
  position: fixed;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green-primary);
  pointer-events: none;
  z-index: 9997;
  opacity: 0.6;
  will-change: transform, opacity;
}

/* ============================================
   MAGNETIC BUTTON EFFECT
============================================ */

.magnetic-btn:not(.sticky-cta):not(.back-to-top) {
  /* Magnetic transition only for non-sticky buttons */
  position: relative;
  transition: transform 0.3s var(--ease-spring);
}

/* Note: .sticky-cta keeps its original transition (all 0.3s) from buttons.css */
/* This ensures smooth fade-in animation like the arrow */

.magnetic-btn-inner {
  display: inline-block;
  transition: transform 0.3s var(--ease-spring);
}

/* ============================================
   CLICK PARTICLE BURST
============================================ */

.particle-burst {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
}

.burst-particle {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform, opacity;
}

.burst-particle.star {
  width: 12px;
  height: 12px;
  background: none;
}

.burst-particle.star::before {
  content: '✨';
  font-size: 12px;
}

/* ============================================
   HIDE ON TOUCH DEVICES
============================================ */

@media (hover: none) and (pointer: coarse) {
  .magic-cursor,
  .cursor-particle {
    display: none !important;
  }
}

/* ============================================
   REDUCED MOTION - Disable effects
============================================ */

@media (prefers-reduced-motion: reduce) {
  .magic-cursor,
  .cursor-particle,
  .particle-burst {
    display: none !important;
  }

  .magnetic-btn,
  .magnetic-btn-inner {
    transition: none !important;
  }
}