/* =====================================================================
   SPARKLE-TRAIL  –  Cursor-Glows, Sterne & Klick-Explosion
   Neue Y2K / Tenshi-Kawaii Palette: Eisblau · Weiß · Lila · Cyan
   ===================================================================== */

.sparkle, .star {
  position: absolute;
  pointer-events: none;
  z-index: 99999;
  will-change: transform, opacity;
}

/* weicher Glow im Trail – wechselt zwischen Eisblau, Lila & Cyan (per Inline-Var) */
.sparkle {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 255, 255, 0.95) 0%,
    var(--spark-color, rgba(109, 182, 255, 0.55)) 40%,
    rgba(109, 182, 255, 0) 100%
  );
  box-shadow:
    0 0 5px rgba(255, 255, 255, 0.7),
    0 0 12px var(--spark-glow, rgba(168, 216, 255, 0.8));
  animation: sparkleFade 0.7s ease-out forwards;
}

/* kleine Sterne im Trail (selten) */
.star {
  width: 9px;
  height: 9px;
  background: var(--spark-color, #fff);
  clip-path: polygon(
    50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 100%,
    50% 75%, 21% 100%, 32% 57%, 2% 35%, 39% 35%
  );
  box-shadow: 0 0 9px var(--spark-glow, rgba(201, 167, 255, 0.85));
  animation: sparkleStar 0.7s ease-out forwards;
}

/* Klick-Explosion – kleine Sterne fliegen auseinander */
.click-star {
  position: absolute;
  width: 5px;
  height: 5px;
  background: var(--spark-color, #fff);
  clip-path: polygon(
    50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 100%,
    50% 75%, 21% 100%, 32% 57%, 2% 35%, 39% 35%
  );
  pointer-events: none;
  z-index: 99999;
  box-shadow: 0 0 7px var(--spark-glow, rgba(168, 216, 255, 0.85));
  animation: clickExplode 0.75s ease-out forwards;
  will-change: transform, opacity;
}

@keyframes sparkleFade {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.4); }
}

@keyframes sparkleStar {
  0%   { opacity: 1;   transform: scale(1.1) rotate(0deg); }
  50%  { opacity: 0.8; transform: scale(0.9) rotate(40deg); }
  100% { opacity: 0;   transform: scale(0.4) rotate(80deg); }
}

@keyframes clickExplode {
  from { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 1; }
  to   { transform: translate(var(--dx), var(--dy)) scale(0.4) rotate(120deg); opacity: 0; }
}

/* Bewegungsreduktion respektieren – kompletter Trail aus */
@media (prefers-reduced-motion: reduce) {
  .sparkle, .star, .click-star { display: none !important; }
}