/* ===== KEYFRAME ANIMATIONS ===== */

/* Particle Animation */
@keyframes particleFloat {
  0% {
    transform: translateY(0px) translateX(0px);
  }
  25% {
    transform: translateY(-10px) translateX(5px);
  }
  50% {
    transform: translateY(-20px) translateX(-5px);
  }
  75% {
    transform: translateY(-10px) translateX(10px);
  }
  100% {
    transform: translateY(0px) translateX(0px);
  }
}

/* Matrix Rain Effect */
@keyframes matrixFall {
  0% {
    transform: translateY(-100px);
  }
  100% {
    transform: translateY(100vh);
  }
}

/* Floating Coins */
@keyframes floatCoin {
  0% {
    transform: translateY(0px) rotate(0deg);
  }
  25% {
    transform: translateY(-20px) rotate(90deg);
  }
  50% {
    transform: translateY(-10px) rotate(180deg);
  }
  75% {
    transform: translateY(-30px) rotate(270deg);
  }
  100% {
    transform: translateY(0px) rotate(360deg);
  }
}

/* Badge Pulse */
@keyframes pulse {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

/* General Pulse Effect */
@keyframes pulseGlow {
  0% {
    box-shadow: 0 0 5px var(--primary);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 20px var(--primary), 0 0 30px var(--primary);
    transform: scale(1.05);
  }
  100% {
    box-shadow: 0 0 5px var(--primary);
    transform: scale(1);
  }
}

/* Float Animation */
@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0px);
  }
}

/* Slide In Animations */
@keyframes slideInLeft {
  0% {
    opacity: 0;
    transform: translateX(-50px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  0% {
    opacity: 0;
    transform: translateX(50px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInUp {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInDown {
  0% {
    opacity: 0;
    transform: translateY(-50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade In Animations */
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translateY(-30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Scale Animations */
@keyframes scaleIn {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes scaleInBounce {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Rotate Animations */
@keyframes rotateIn {
  0% {
    opacity: 0;
    transform: rotate(-200deg);
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Glow Effects */
@keyframes neonGlow {
  0% {
    text-shadow: 0 0 5px var(--primary), 0 0 10px var(--primary),
      0 0 15px var(--primary);
  }
  50% {
    text-shadow: 0 0 10px var(--primary), 0 0 20px var(--primary),
      0 0 30px var(--primary), 0 0 40px var(--primary);
  }
  100% {
    text-shadow: 0 0 5px var(--primary), 0 0 10px var(--primary),
      0 0 15px var(--primary);
  }
}

@keyframes borderGlow {
  0% {
    border-color: var(--glass-border);
    box-shadow: 0 0 5px transparent;
  }
  50% {
    border-color: var(--primary);
    box-shadow: 0 0 20px rgba(83, 82, 237, 0.5);
  }
  100% {
    border-color: var(--glass-border);
    box-shadow: 0 0 5px transparent;
  }
}

/* Typing Effect */
@keyframes typing {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

@keyframes blink {
  0%,
  50% {
    border-color: transparent;
  }
  51%,
  100% {
    border-color: var(--primary);
  }
}

/* Bounce Animations */
@keyframes bounce {
  0%,
  20%,
  53%,
  80%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  40%,
  43% {
    transform: translate3d(0, -30px, 0);
  }
  70% {
    transform: translate3d(0, -15px, 0);
  }
  90% {
    transform: translate3d(0, -4px, 0);
  }
}

@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Shake Animation */
@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateX(-10px);
  }
  20%,
  40%,
  60%,
  80% {
    transform: translateX(10px);
  }
}

/* Wobble Animation */
@keyframes wobble {
  0% {
    transform: translateX(0%);
  }
  15% {
    transform: translateX(-25%) rotate(-5deg);
  }
  30% {
    transform: translateX(20%) rotate(3deg);
  }
  45% {
    transform: translateX(-15%) rotate(-3deg);
  }
  60% {
    transform: translateX(10%) rotate(2deg);
  }
  75% {
    transform: translateX(-5%) rotate(-1deg);
  }
  100% {
    transform: translateX(0%);
  }
}

/* Flip Animations */
@keyframes flipInX {
  0% {
    opacity: 0;
    transform: perspective(400px) rotateX(90deg);
  }
  40% {
    transform: perspective(400px) rotateX(-20deg);
  }
  60% {
    transform: perspective(400px) rotateX(10deg);
  }
  80% {
    transform: perspective(400px) rotateX(-5deg);
  }
  100% {
    opacity: 1;
    transform: perspective(400px);
  }
}

@keyframes flipInY {
  0% {
    opacity: 0;
    transform: perspective(400px) rotateY(90deg);
  }
  40% {
    transform: perspective(400px) rotateY(-20deg);
  }
  60% {
    transform: perspective(400px) rotateY(10deg);
  }
  80% {
    transform: perspective(400px) rotateY(-5deg);
  }
  100% {
    opacity: 1;
    transform: perspective(400px);
  }
}

/* Progress Bar Animation */
@keyframes progressFill {
  0% {
    width: 0%;
  }
  100% {
    width: var(--progress-width, 100%);
  }
}

/* Gradient Animation */
@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Morphing Animation */
@keyframes morph {
  0% {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  }
  50% {
    border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
  }
  100% {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  }
}

/* Count Up Animation for Numbers */
@keyframes countUp {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}

/* ===== ANIMATION UTILITY CLASSES ===== */

/* Basic Animations */
.animate-fade-in {
  animation: fadeIn 0.8s ease-out;
}

.animate-fade-in-up {
  animation: fadeInUp 0.8s ease-out;
}

.animate-fade-in-down {
  animation: fadeInDown 0.8s ease-out;
}

.animate-slide-in-left {
  animation: slideInLeft 0.8s ease-out;
}

.animate-slide-in-right {
  animation: slideInRight 0.8s ease-out;
}

.animate-scale-in {
  animation: scaleIn 0.6s ease-out;
}

.animate-bounce-in {
  animation: bounceIn 0.8s ease-out;
}

.animate-flip-in-x {
  animation: flipInX 0.8s ease-out;
}

.animate-flip-in-y {
  animation: flipInY 0.8s ease-out;
}

.animate-rotate-in {
  animation: rotateIn 0.8s ease-out;
}

/* Continuous Animations */
.animate-float {
  animation: float 6s ease-in-out infinite;
}

.animate-pulse {
  animation: pulseGlow 2s ease-in-out infinite;
}

.animate-spin {
  animation: spin 2s linear infinite;
}

.animate-bounce {
  animation: bounce 2s infinite;
}

.animate-shake {
  animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite;
}

.animate-wobble {
  animation: wobble 1s ease-in-out infinite;
}

.animate-neon-glow {
  animation: neonGlow 2s ease-in-out infinite;
}

.animate-border-glow {
  animation: borderGlow 2s ease-in-out infinite;
}

.animate-gradient-shift {
  background: linear-gradient(
    -45deg,
    var(--primary),
    var(--secondary),
    var(--accent),
    var(--warning)
  );
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

.animate-morph {
  animation: morph 8s ease-in-out infinite;
}

/* Delayed Animations */
.animate-delay-100 {
  animation-delay: 0.1s;
}
.animate-delay-200 {
  animation-delay: 0.2s;
}
.animate-delay-300 {
  animation-delay: 0.3s;
}
.animate-delay-400 {
  animation-delay: 0.4s;
}
.animate-delay-500 {
  animation-delay: 0.5s;
}
.animate-delay-600 {
  animation-delay: 0.6s;
}
.animate-delay-700 {
  animation-delay: 0.7s;
}
.animate-delay-800 {
  animation-delay: 0.8s;
}
.animate-delay-900 {
  animation-delay: 0.9s;
}
.animate-delay-1000 {
  animation-delay: 1s;
}

/* Hover Animations */
.hover-lift {
  transition: transform 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-10px);
}

.hover-scale {
  transition: transform 0.3s ease;
}

.hover-scale:hover {
  transform: scale(1.05);
}

.hover-rotate {
  transition: transform 0.3s ease;
}

.hover-rotate:hover {
  transform: rotate(5deg);
}

.hover-glow {
  transition: box-shadow 0.3s ease;
}

.hover-glow:hover {
  box-shadow: 0 0 20px var(--primary), 0 0 40px var(--primary);
}

/* ===== SPECIAL EFFECTS ===== */

/* Glitch Effect */
@keyframes glitch {
  0% {
    transform: translate(0);
  }
  20% {
    transform: translate(-2px, 2px);
  }
  40% {
    transform: translate(-2px, -2px);
  }
  60% {
    transform: translate(2px, 2px);
  }
  80% {
    transform: translate(2px, -2px);
  }
  100% {
    transform: translate(0);
  }
}

.glitch-effect {
  animation: glitch 0.3s ease-in-out infinite alternate;
}

/* Typewriter Effect */
.typewriter {
  overflow: hidden;
  border-right: 3px solid var(--primary);
  white-space: nowrap;
  animation: typing 3.5s steps(40, end), blink 0.75s step-end infinite;
}

/* Loading Spinner */
.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid var(--glass-bg);
  border-top: 4px solid var(--primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* Progress Bar */
.progress-bar {
  width: 100%;
  height: 8px;
  background: var(--glass-bg);
  border-radius: 4px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  border-radius: 4px;
  animation: progressFill 2s ease-out forwards;
}

/* Particle System */
.particle-system {
  position: relative;
  overflow: hidden;
}

.particle-system::before,
.particle-system::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--primary);
  border-radius: 50%;
  animation: particleFloat 4s ease-in-out infinite;
}

.particle-system::before {
  top: 20%;
  left: 10%;
  animation-delay: 0s;
}

.particle-system::after {
  top: 60%;
  right: 10%;
  animation-delay: 2s;
}

/* Intersection Observer Animations */
[data-aos] {
  opacity: 0;
  transition: opacity 0.8s ease, transform 0.8s ease;
}

[data-aos].aos-animate {
  opacity: 1;
}

[data-aos="fade-up"] {
  transform: translateY(50px);
}

[data-aos="fade-up"].aos-animate {
  transform: translateY(0);
}

[data-aos="fade-down"] {
  transform: translateY(-50px);
}

[data-aos="fade-down"].aos-animate {
  transform: translateY(0);
}

[data-aos="fade-left"] {
  transform: translateX(-50px);
}

[data-aos="fade-left"].aos-animate {
  transform: translateX(0);
}

[data-aos="fade-right"] {
  transform: translateX(50px);
}

[data-aos="fade-right"].aos-animate {
  transform: translateX(0);
}

[data-aos="zoom-in"] {
  transform: scale(0.8);
}

[data-aos="zoom-in"].aos-animate {
  transform: scale(1);
}

[data-aos="zoom-out"] {
  transform: scale(1.2);
}

[data-aos="zoom-out"].aos-animate {
  transform: scale(1);
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */

/* GPU Acceleration */
.gpu-accelerated {
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

/* Reduce Motion for Accessibility */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}