/* Mystical SVG Sprites for Helionis */
.mystical-sprite {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  vertical-align: middle;
  fill: currentColor;
  transition: all 0.3s ease;
}

.mystical-sprite:hover {
  transform: scale(1.1);
  filter: drop-shadow(0 0 8px currentColor);
}

.mystical-sprite.small {
  width: 0.8em;
  height: 0.8em;
}

.mystical-sprite.large {
  width: 1.5em;
  height: 1.5em;
}

.mystical-sprite.xl {
  width: 2em;
  height: 2em;
}

/* Hover effects for interactive sprites */
.mystical-sprite.interactive {
  transition: transform 0.3s ease, filter 0.3s ease;
  cursor: pointer;
}

.mystical-sprite.interactive:hover {
  transform: scale(1.1);
  filter: brightness(1.2) drop-shadow(0 0 5px rgba(26, 107, 90, 0.5));
}

/* Animation for special sprites */
.mystical-sprite.animated {
  animation: mysticalGlow 2s ease-in-out infinite alternate;
}

@keyframes mysticalGlow {
  from {
    filter: brightness(1) drop-shadow(0 0 2px rgba(26, 107, 90, 0.3));
  }
  to {
    filter: brightness(1.3) drop-shadow(0 0 8px rgba(26, 107, 90, 0.7));
  }
}

/* Sparkle accent specific styles */
.sparkle-accent {
  width: 1rem;
  height: 1rem;
  color: var(--primary, #FFD700);
  animation: sparkle 2s ease-in-out infinite;
}

@keyframes sparkle {
  0%,
  100% {
    opacity: 0.5;
    transform: scale(1) rotate(0deg);
  }
  50% {
    opacity: 1;
    transform: scale(1.2) rotate(180deg);
  }
}

/* Navigation specific sprites */
.nav-link .mystical-sprite {
  width: 1.2rem;
  height: 1.2rem;
  margin-right: 0.5rem;
}

.cart-icon .mystical-sprite {
  width: 1.3rem;
  height: 1.3rem;
}

/* Context-specific styling */
.mystical-sprite.star-rating {
  color: var(--gold-accent);
  margin: 0 1px;
}

.mystical-sprite.heart-wishlist {
  color: var(--smoke-1);
  transition: all 0.3s ease;
}

.mystical-sprite.heart-wishlist:hover {
  color: var(--silver-light);
  transform: scale(1.2);
}

.mystical-sprite.sparkle-accent {
  color: var(--gold-accent);
  opacity: 0.8;
}

.mystical-sprite.moon-mystical {
  color: var(--silver);
  opacity: 0.9;
}

.mystical-sprite.fire-energy {
  color: var(--gold-accent);
  animation: mysticalGlow 1.5s ease-in-out infinite alternate;
}