/* Heart Cursor Effect */
body {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><text x="16" y="24" text-anchor="middle" font-size="24" fill="%23DC143C">❤</text></svg>'), auto;
}

a, button, input, textarea, select, .clickable {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><text x="16" y="24" text-anchor="middle" font-size="28" fill="%23FF1493">💖</text></svg>'), pointer;
}

/* Heart trail effect container */
.heart-trail {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  animation: heart-float 1.5s ease-out forwards;
}

.heart-trail svg {
  width: 20px;
  height: 20px;
  opacity: 0.8;
}

@keyframes heart-float {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(0.5) rotate(0deg);
  }
  50% {
    opacity: 0.8;
    transform: translate(var(--random-x), -30px) scale(1) rotate(180deg);
  }
  100% {
    opacity: 0;
    transform: translate(calc(var(--random-x) * 2), -60px) scale(0.3) rotate(360deg);
  }
}

/* Different heart colors for variety */
.heart-trail:nth-child(odd) svg {
  fill: #DC143C;
}

.heart-trail:nth-child(even) svg {
  fill: #FF69B4;
}

.heart-trail:nth-child(3n) svg {
  fill: #FF1493;
}

/* Cursor glow effect on hover */
.heart-hover-effect {
  position: fixed;
  width: 40px;
  height: 40px;
  pointer-events: none;
  z-index: 9998;
  background: radial-gradient(circle, rgba(220, 20, 60, 0.3) 0%, transparent 70%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

body:hover .heart-hover-effect {
  opacity: 1;
}

/* Special cursor for heart cards */
.heart-card {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><text x="16" y="24" text-anchor="middle" font-size="28" fill="%23FFD700">💛</text></svg>'), pointer;
}

/* Animated cursor on buttons */
.btn:hover {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><text x="16" y="24" text-anchor="middle" font-size="28" fill="%23FF69B4">💗</text></svg>'), pointer;
}

/* Disable custom cursor on mobile */
@media (hover: none) and (pointer: coarse) {
  body, a, button, input, textarea, select, .clickable, .heart-card, .btn:hover {
    cursor: auto;
  }
  
  .heart-trail, .heart-hover-effect {
    display: none;
  }
}