/* Guide System - Neon Anime Mascot */
:root {
  --cursor-girl-neon: #ff4df2;
  --cursor-girl-neon-alt: #ff9cf9;
  --cursor-girl-glow: rgba(255, 77, 242, 0.65);
  --cursor-girl-glow-soft: rgba(255, 77, 242, 0.35);
}

.cursor-girl {
  position: fixed;
  width: 100px;
  height: 120px;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: transform 0.15s ease-out;
  will-change: transform, left, top;
}

.cursor-girl-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Character SVG/Visual */
.cursor-girl-character {
  position: relative;
  width: 80px;
  height: 100px;
  filter: drop-shadow(0 0 15px var(--cursor-girl-glow));
  animation: float 3s ease-in-out infinite, breathe 2s ease-in-out infinite, fly-glow 4s ease-in-out infinite;
}

@keyframes fly-glow {
  0%, 100% {
    filter: drop-shadow(0 0 15px var(--cursor-girl-glow));
  }
  50% {
    filter: drop-shadow(0 0 25px var(--cursor-girl-neon)) drop-shadow(0 0 10px var(--cursor-girl-neon-alt));
  }
}

/* Floating Animation */
@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-8px);
  }
}

/* Breathing Animation */
@keyframes breathe {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

/* Neon Glow Trail */
.cursor-girl-trail {
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--cursor-girl-glow-soft) 0%, transparent 70%);
  opacity: 0.6;
  animation: pulse 2s ease-in-out infinite, trail-glow 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes trail-glow {
  0%, 100% {
    opacity: 0.4;
    transform: scale(0.9);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.1);
  }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(0.8);
    opacity: 0.3;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.6;
  }
}

/* Sparkle Effects */
.cursor-girl-sparkle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--cursor-girl-neon);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--cursor-girl-neon);
  opacity: 0;
  pointer-events: none;
}

.cursor-girl-sparkle.active {
  animation: sparkle 0.6s ease-out forwards;
}

@keyframes sparkle {
  0% {
    opacity: 1;
    transform: scale(0) translate(0, 0);
  }
  50% {
    opacity: 1;
    transform: scale(1.5) translate(var(--sparkle-x, 20px), var(--sparkle-y, -20px));
  }
  100% {
    opacity: 0;
    transform: scale(0.5) translate(var(--sparkle-x, 40px), var(--sparkle-y, -40px));
  }
}

/* Hover States */
.cursor-girl.hovering {
  transform: translate(-50%, -50%) scale(1.1);
}

.cursor-girl.hovering .cursor-girl-character {
  animation: float 2s ease-in-out infinite, breathe 1.5s ease-in-out infinite, glow-pulse 0.15s ease-out;
}

@keyframes glow-pulse {
  0%, 100% {
    filter: drop-shadow(0 0 10px var(--cursor-girl-glow));
  }
  50% {
    filter: drop-shadow(0 0 20px var(--cursor-girl-neon));
  }
}

/* Click Animation */
.cursor-girl.clicking {
  animation: click-bounce 0.3s ease-out;
}

@keyframes click-bounce {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(0.9);
  }
}

.cursor-girl.clicking .cursor-girl-character {
  animation: hair-move 0.3s ease-out;
}

@keyframes hair-move {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  25% {
    transform: translateY(-2px) rotate(-2deg);
  }
  75% {
    transform: translateY(-2px) rotate(2deg);
  }
}

/* Wink Animation */
.cursor-girl.winking .cursor-girl-character {
  animation: wink 0.4s ease-out;
}

@keyframes wink {
  0%, 100% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(0.1);
  }
}

/* Celebration Animation */
.cursor-girl.celebrating {
  animation: celebrate 0.8s ease-out;
}

@keyframes celebrate {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
  }
  25% {
    transform: translate(-50%, -50%) scale(1.2) rotate(-10deg);
  }
  75% {
    transform: translate(-50%, -50%) scale(1.2) rotate(10deg);
  }
}

/* Speech Bubble */
.cursor-girl-speech {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.9);
  color: var(--cursor-girl-neon);
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 12px;
  white-space: nowrap;
  margin-bottom: 10px;
  border: 1px solid var(--cursor-girl-neon);
  box-shadow: 0 0 10px var(--cursor-girl-glow);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.cursor-girl-speech::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: rgba(0, 0, 0, 0.9);
}

.cursor-girl-speech.show {
  opacity: 1;
}

/* Character SVG - Simple Anime Style */
.cursor-girl-character svg {
  width: 100%;
  height: 100%;
}

/* Flying Animation Enhancement */
.cursor-girl.flying {
  animation: flying-rotation 20s linear infinite;
}

@keyframes flying-rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  25% {
    transform: translate(-50%, -50%) rotate(5deg);
  }
  50% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  75% {
    transform: translate(-50%, -50%) rotate(-5deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
}

/* Responsive */
@media (max-width: 768px) {
  .cursor-girl {
    width: 80px;
    height: 100px;
  }
  
  .cursor-girl-character {
    width: 60px;
    height: 80px;
  }
  
  .cursor-girl-trail {
    width: 120px;
    height: 120px;
  }
  
  .cursor-girl-speech {
    font-size: 10px;
    padding: 6px 10px;
  }
}

/* Hide on mobile touch devices */
@media (hover: none) and (pointer: coarse) {
  .cursor-girl {
    display: none;
  }
}