/* Cursor styles */
body {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><circle cx="8" cy="8" r="6" fill="none" stroke="%238b5cf6" stroke-width="2"/></svg>') 8 8, auto;
}

a, button, [role="button"] {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path fill="%23f43f5e" d="M10 0L20 10L10 20L0 10Z"/></svg>') 10 10, pointer;
}

/* Hover effects */
a:hover, button:hover, [role="button"]:hover {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="%23f43f5e" opacity="0.7"/></svg>') 12 12, pointer;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #1e293b;
}

::-webkit-scrollbar-thumb {
    background: #8b5cf6;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #7c3aed;
}
/* Hover animations */
.card-hover {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-hover:hover {
  transform: translateY(-5px) rotate(1deg);
  box-shadow: 0 10px 20px rgba(139, 92, 246, 0.2);
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="%238b5cf6" d="M12 2L22 12L12 22L2 12Z" opacity="0.7"/></svg>') 12 12, pointer;
}

/* Text hover effects */
.text-hover {
  transition: all 0.3s ease;
}
.text-hover:hover {
  text-shadow: 0 0 10px rgba(139, 92, 246, 0.7);
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8" fill="none" stroke="%238b5cf6" stroke-width="2"/><circle cx="12" cy="12" r="4" fill="%238b5cf6"/></svg>') 12 12, pointer;
}

.glow-text {
  text-shadow: 0 0 8px rgba(139, 92, 246, 0.5);
  animation: textGlow 2s ease-in-out infinite alternate;
}

@keyframes textGlow {
  from {
    text-shadow: 0 0 8px rgba(139, 92, 246, 0.5);
  }
  to {
    text-shadow: 0 0 15px rgba(139, 92, 246, 0.8), 0 0 20px rgba(139, 92, 246, 0.6);
  }
}
/* Animation classes */
.fade-in {
    animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px) rotate(-1deg); }
    to { opacity: 1; transform: translateY(0) rotate(0); }
}
/* Joker-themed animations */
@keyframes jokerLaugh {
    0%, 100% { transform: rotate(0) scale(1); }
    25% { transform: rotate(-2deg) scale(1.01); }
    50% { transform: rotate(2deg) scale(1.02); }
    75% { transform: rotate(-2deg) scale(1.01); }
}

/* Command example images */
.command-example img {
    filter: brightness(0.9) contrast(1.1);
    transition: all 0.3s ease;
}

.command-example:hover img {
    filter: brightness(1) contrast(1.2);
    transform: scale(1.05);
}
.joker-animate {
    animation: jokerLaugh 3s ease-in-out infinite;
}

/* Custom cursor for demo items */
.demo-item {
  transition: all 0.3s ease;
}

.demo-item:hover {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="%23f43f5e" d="M12 0L24 12L12 24L0 12Z" opacity="0.7"/></svg>') 12 12, pointer;
  transform: scale(1.02);
}
/* Cursor trail particles */
@keyframes particle-float {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  100% { transform: translate(var(--tx), var(--ty)) rotate(360deg); opacity: 0; }
}

.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: #8b5cf6;
  border-radius: 50%;
  animation: particle-float 1s ease-out forwards;
  pointer-events: none;
}

/* Additional custom styles */
.glow {
    box-shadow: 0 0 15px rgba(139, 92, 246, 0.3);
}

.glow:hover {
    box-shadow: 0 0 25px rgba(139, 92, 246, 0.5);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .hero-image {
        max-width: 90%;
        margin: 0 auto;
    }
}