/* Cursor Clicker — zentraler Klick-Effekt-Layer (js/ui/effectRenderer.js).
   Läuft in derselben Ebene wie die fliegenden "+N"-Zahlen (#click-float-layer),
   also bewusst ÜBER Cursor/Mutation/Cosmetic, siehe Layering-Reihenfolge in
   panels.css (.cc-click-stage). Rein additiv zur Ambient-Mutation-Optik auf dem
   Cursor selbst — kein Überschneiden von Zuständigkeiten. */

.cc-effect-particle {
  position: absolute;
  left: 0;
  top: 0;
  width: 6px;
  height: 6px;
  background: var(--particle-color, #ffffff);
  transform: translate(-50%, -50%);
  animation: cc-effect-burst var(--particle-duration, 700ms) cubic-bezier(0.15, 0.6, 0.35, 1) forwards;
  will-change: transform, opacity;
}

.cc-effect-circle {
  border-radius: 50%;
  box-shadow: 0 0 6px 1px var(--particle-color, #ffffff);
}

.cc-effect-shard {
  width: 7px;
  height: 10px;
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

.cc-effect-spark {
  width: 9px;
  height: 9px;
  clip-path: polygon(50% 0%, 65% 35%, 100% 50%, 65% 65%, 50% 100%, 35% 65%, 0% 50%, 35% 35%);
}

.cc-effect-square {
  width: 6px;
  height: 6px;
  border-radius: 1px;
}

@keyframes cc-effect-burst {
  0% {
    transform: translate(-50%, -50%) rotate(var(--angle)) translateX(0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) rotate(var(--angle)) translateX(var(--distance)) scale(0.4);
    opacity: 0;
  }
}

/* Void: Partikel ziehen erst zur Klickmitte, statt nach außen zu fliegen. */
.cc-effect-implode {
  animation-name: cc-effect-implode;
}

@keyframes cc-effect-implode {
  0% {
    transform: translate(-50%, -50%) rotate(var(--angle)) translateX(var(--distance)) scale(1);
    opacity: 0;
  }
  35% {
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) rotate(var(--angle)) translateX(0) scale(0.3);
    opacity: 0;
  }
}

/* Void: expandierender Ring nach der Implosion. */
.cc-effect-shockwave {
  position: absolute;
  left: 0;
  top: 0;
  width: 10px;
  height: 10px;
  border: 2px solid var(--particle-color, #a855f7);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: cc-effect-shockwave-expand var(--particle-duration, 630ms) ease-out forwards;
  will-change: width, height, opacity;
}

@keyframes cc-effect-shockwave-expand {
  0% { width: 8px; height: 8px; opacity: 0.9; }
  100% { width: 100px; height: 100px; opacity: 0; }
}

body.cc-no-animations .cc-effect-particle,
body.cc-no-animations .cc-effect-shockwave {
  display: none;
}