/* Cursor Clicker — Aura-Visuals. Aura = Umgebungs-Effekt: jede Aura hat eine
   eigene Partikel-Identität (siehe js/ui/auraGlyph.js für die Rezepte je
   Aura), keine gestapelten gleich aussehenden Ringe. Alles liegt HINTER dem
   Cursor (siehe Layering-Kommentar in panels.css) und darf ihn nie verdecken.

   Layering in .cc-click-stage (siehe panels.css), niedrig nach hoch:
     1 = Aura (dieses File)
     2 = Cursor-Button (.cc-big-cursor; Mutation-Effekt liegt als ::before/
         ::after INNERHALB dieser Ebene, Cosmetic-Hintergrund ebenfalls
         direkt auf .cc-big-cursor, siehe mutations-cosmetics.css)
     3 = Klick-Burst/Coin-Zahl (.cc-float-layer, siehe effectRenderer.js)
     4 = Klickserie-Anzeige (.cc-combo-pill) */

.cc-aura-layer {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(160px, 32vw, 260px);
  height: clamp(160px, 32vw, 260px);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1;
}

/* Muss exakt mit der Tablet-Vergrößerung von .cc-big-cursor in panels.css
   mitwachsen, sonst wirkt die Aura auf einmal zu klein relativ zum Cursor. */
@media (min-width: 600px) and (max-width: 1024px) {
  .cc-aura-layer {
    width: clamp(220px, 38vw, 320px);
    height: clamp(220px, 38vw, 320px);
  }
}

/* Sehr weicher, kleiner Anker-Schimmer — kein harter Ring, nur ein dezenter
   Hinweis darauf, dass die Aura hier "entspringt". Bleibt klar kleiner als
   der Cursor selbst, verdeckt ihn nie. */
.cc-aura-anchor {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 68%;
  height: 68%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--aura-color, transparent) 68%, transparent) 0%, transparent 75%);
  filter: blur(1px);
  animation: cc-aura-anchor-pulse 3.2s ease-in-out infinite;
}

@keyframes cc-aura-anchor-pulse {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 0.75; }
}

/* Seltenheit macht sich in der Präsenz bemerkbar, nicht in mehr Ringen (siehe
   Datei-Kopf) — legendär+ fällt sofort ins Auge, Secret (Voidstorm) wirkt
   spürbar beeindruckender als alles andere. */
.aura-radiant .cc-aura-anchor {
  width: 76%;
  height: 76%;
}
.aura-nebula .cc-aura-anchor {
  width: 82%;
  height: 82%;
}
.aura-voidstorm .cc-aura-anchor {
  width: 92%;
  height: 92%;
  filter: blur(0.5px) brightness(1.25);
}
@keyframes cc-aura-anchor-pulse-strong {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 0.95; }
}
.aura-radiant .cc-aura-anchor,
.aura-nebula .cc-aura-anchor,
.aura-voidstorm .cc-aura-anchor {
  animation: cc-aura-anchor-pulse-strong 2.6s ease-in-out infinite;
}

/* ---------- Primitive (von auraGlyph.js je Aura kombiniert) ---------- */

.cc-aura-p-rise {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--size, 5px);
  height: var(--size, 5px);
  border-radius: 50%;
  background: var(--color);
  box-shadow: 0 0 6px var(--color);
  animation: cc-aura-rise var(--duration, 2.8s) ease-in var(--delay, 0s) infinite;
}
@keyframes cc-aura-rise {
  0% { transform: translate(calc(-50% + var(--x, 0px)), 36px) scale(0.5); opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 0.85; }
  100% { transform: translate(calc(-50% + var(--x, 0px) * 1.3), -62px) scale(1); opacity: 0; }
}

.cc-aura-p-fall {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--size, 6px);
  height: var(--size, 6px);
  clip-path: polygon(50% 0%, 65% 35%, 100% 50%, 65% 65%, 50% 100%, 35% 65%, 0% 50%, 35% 35%);
  background: var(--color);
  opacity: 0;
  animation: cc-aura-fall var(--duration, 3.6s) linear var(--delay, 0s) infinite;
}
@keyframes cc-aura-fall {
  0% { transform: translate(calc(-50% + var(--x, 0px)), -58px) rotate(0deg); opacity: 0; }
  18% { opacity: 0.9; }
  82% { opacity: 0.8; }
  100% { transform: translate(calc(-50% + var(--x, 0px) * -1), 58px) rotate(160deg); opacity: 0; }
}

.cc-aura-p-orbit-spoke {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  animation: cc-aura-orbit-spin var(--duration, 7s) linear var(--delay, 0s) infinite;
  animation-direction: var(--direction, normal);
}
@keyframes cc-aura-orbit-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.cc-aura-p-orbit-dot {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--size, 6px);
  height: var(--size, 6px);
  border-radius: 50%;
  background: var(--color);
  box-shadow: 0 0 5px var(--color);
  transform: translate(var(--radius, 55px), -50%);
}

.cc-aura-p-leaf {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(var(--size, 6px) * 1.7);
  height: var(--size, 6px);
  background: var(--color);
  border-radius: 60% 15% 60% 15%;
  box-shadow: 0 0 4px var(--color);
  transform: translate(var(--radius, 55px), -50%) rotate(28deg);
}

.cc-aura-p-shard {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--size, 8px);
  height: var(--size, 8px);
  background: var(--color);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  transform: translate(var(--radius, 55px), -50%) rotate(20deg);
  opacity: 0.92;
}

.cc-aura-p-flash {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--size, 15px);
  height: calc(var(--size, 15px) * 2.2);
  background: var(--color);
  clip-path: polygon(45% 0%, 20% 55%, 42% 55%, 15% 100%, 85% 40%, 55% 40%, 75% 0%);
  filter: drop-shadow(0 0 4px var(--color));
  transform: translate(calc(-50% + var(--x, 0px)), calc(-50% + var(--y, 0px)));
  opacity: 0;
  animation: cc-aura-flash var(--duration, 2.6s) ease-in-out var(--delay, 0s) infinite;
}
@keyframes cc-aura-flash {
  0%, 84%, 100% { opacity: 0; }
  86% { opacity: 1; }
  89% { opacity: 0.2; }
  91% { opacity: 0.9; }
  94% { opacity: 0; }
}

.cc-aura-p-beam-group {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  animation: cc-aura-orbit-spin var(--duration, 22s) linear infinite;
}
.cc-aura-p-beam {
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: var(--length, 50px);
  background: linear-gradient(to top, transparent, var(--color));
  transform: rotate(var(--angle, 0deg)) translateY(calc(-1 * var(--length, 50px)));
  transform-origin: 50% 100%;
  opacity: 0.5;
  animation: cc-aura-beam-pulse 2.6s ease-in-out var(--delay, 0s) infinite;
}
@keyframes cc-aura-beam-pulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.75; }
}

.cc-aura-p-fog {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--size, 60px);
  height: var(--size, 60px);
  border-radius: 50%;
  background: radial-gradient(circle, var(--color) 0%, transparent 72%);
  filter: blur(3px);
  animation: cc-aura-fog-drift var(--duration, 7s) ease-in-out var(--delay, 0s) infinite;
}
@keyframes cc-aura-fog-drift {
  0%, 100% { transform: translate(calc(-50% + var(--x1, 0px)), calc(-50% + var(--y1, 0px))) scale(0.9); opacity: 0.3; }
  50% { transform: translate(calc(-50% + var(--x2, 0px)), calc(-50% + var(--y2, 0px))) scale(1.15); opacity: 0.55; }
}

.cc-aura-p-star {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--size, 5px);
  height: var(--size, 5px);
  background: var(--color);
  clip-path: polygon(50% 0%, 65% 35%, 100% 50%, 65% 65%, 50% 100%, 35% 65%, 0% 50%, 35% 35%);
  animation: cc-aura-twinkle var(--duration, 2s) ease-in-out var(--delay, 0s) infinite;
}
@keyframes cc-aura-twinkle {
  0%, 100% { opacity: 0.15; transform: translate(calc(-50% + var(--x, 0px)), calc(-50% + var(--y, 0px))) scale(0.7); }
  50% { opacity: 1; transform: translate(calc(-50% + var(--x, 0px)), calc(-50% + var(--y, 0px))) scale(1.1); }
}

body.cc-no-animations .cc-aura-anchor,
body.cc-no-animations .cc-aura-p-rise,
body.cc-no-animations .cc-aura-p-fall,
body.cc-no-animations .cc-aura-p-orbit-spoke,
body.cc-no-animations .cc-aura-p-flash,
body.cc-no-animations .cc-aura-p-beam-group,
body.cc-no-animations .cc-aura-p-beam,
body.cc-no-animations .cc-aura-p-fog,
body.cc-no-animations .cc-aura-p-star {
  animation: none !important;
}

/* Kompakte Vorschau-Größe für Aura-Karten/Reveal-Modal. Die Partikel-Rezepte
   sind für die große Klick-Bühne bemessen — hier einfach als Ganzes
   herunterskalieren statt eine zweite Größentabelle zu pflegen. */
.cc-aura-preview {
  position: relative;
  width: 84px;
  height: 84px;
  margin: 0 auto 6px;
  display: grid;
  place-items: center;
}
.cc-aura-preview .cc-aura-layer {
  width: 260px;
  height: 260px;
  transform: translate(-50%, -50%) scale(0.32);
}
.cc-aura-preview-glyph {
  width: 40%;
  height: 40%;
  z-index: 2;
  position: relative;
}