/* Cyber Animations & Effects */

@keyframes rotateClockwise {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes rotateCounterClockwise {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}

@keyframes pulseCoreGlow {
  0% {
    transform: scale(0.95);
    opacity: 0.6;
  }
  100% {
    transform: scale(1.15);
    opacity: 0.95;
  }
}

@keyframes blinkDot {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
}

@keyframes energyShimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

@keyframes modalPop {
  0% {
    opacity: 0;
    transform: scale(0.85);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes pulseTurbo {
  0% {
    box-shadow: 0 0 10px var(--neon-yellow);
  }
  100% {
    box-shadow: 0 0 25px var(--neon-yellow), inset 0 0 10px #ff0055;
  }
}

/* Floating Click Damage / Numbers */
.floating-numbers-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 50;
}

.floating-number {
  position: absolute;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 0 10px var(--neon-cyan), 0 0 20px var(--neon-cyan);
  pointer-events: none;
  animation: floatUpAndFade 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.floating-number.crit {
  color: var(--neon-yellow);
  font-size: 2rem;
  text-shadow: 0 0 15px var(--neon-yellow), 0 0 30px var(--neon-magenta);
}

@keyframes floatUpAndFade {
  0% {
    opacity: 1;
    transform: translate(-50%, -20%) scale(0.8);
  }
  40% {
    opacity: 1;
    transform: translate(-50%, -70%) scale(1.2);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -130%) scale(0.9);
  }
}

/* Core Click Compression Effect */
.cyber-core.clicked {
  transform: scale(0.92);
}

.cyber-core:active {
  transform: scale(0.93);
}

/* Particle Sparks */
.particle-spark {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  pointer-events: none;
  background: var(--neon-cyan);
  box-shadow: 0 0 8px var(--neon-cyan);
  animation: sparkDisperse 0.6s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}

@keyframes sparkDisperse {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--tx), var(--ty)) scale(0);
  }
}