/* === Animations & Keyframes === */

/* Neon Grid Shift Animation */
@keyframes gridShift {
  0% {
    background-position: 0 0;
    filter: brightness(0.9) saturate(1);
  }
  25% {
    background-position: 50px 50px;
    filter: brightness(1.1) saturate(1.2);
  }
  50% {
    background-position: 0 0;
    filter: brightness(1) saturate(1.1);
  }
  75% {
    background-position: -50px -50px;
    filter: brightness(1.1) saturate(1.2);
  }
  100% {
    background-position: 0 0;
    filter: brightness(0.9) saturate(1);
  }
}

/* Neon Glow Pulse */
@keyframes neonGlow {
  0%, 100% {
    text-shadow: 0 0 10px #7afcff, 0 0 20px #7afcff;
    box-shadow: 0 0 10px rgba(122, 252, 255, 0.5), 0 0 20px rgba(122, 252, 255, 0.3);
  }
  50% {
    text-shadow: 0 0 20px #7afcff, 0 0 30px #7afcff;
    box-shadow: 0 0 20px rgba(122, 252, 255, 0.8), 0 0 40px rgba(122, 252, 255, 0.5);
  }
}

/* Card Glow on Hover */
@keyframes cardGlowIn {
  from {
    box-shadow: 0 0 10px rgba(122, 252, 255, 0.4);
  }
  to {
    box-shadow: 0 0 30px rgba(122, 252, 255, 0.8), 0 0 60px rgba(122, 252, 255, 0.4), inset 0 0 20px rgba(122, 252, 255, 0.1);
  }
}

/* Pulse Border */
@keyframes pulseBorder {
  0%, 100% {
    border-color: rgba(122, 252, 255, 0.3);
  }
  50% {
    border-color: rgba(122, 252, 255, 0.8);
  }
}

/* Float Up Animation */
@keyframes floatUp {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  100% {
    transform: translateY(-10px);
    opacity: 1;
  }
}

/* Logo Pulse */
@keyframes logoPulse {
  0%, 100% {
    box-shadow: 0 0 20px rgba(122, 252, 255, 0.4), 0 0 40px rgba(255, 122, 162, 0.2);
  }
  50% {
    box-shadow: 0 0 40px rgba(122, 252, 255, 0.8), 0 0 80px rgba(255, 122, 162, 0.4);
  }
}

/* Icon Glow */
@keyframes iconGlow {
  0%, 100% {
    text-shadow: 0 0 5px rgba(122, 252, 255, 0.5);
  }
  50% {
    text-shadow: 0 0 15px rgba(122, 252, 255, 0.9), 0 0 25px rgba(255, 122, 162, 0.5);
  }
}

@keyframes color-cycle-1 {
  0% {
    color: #7afcff;
  }
  25% {
    color: #ff7aa2;
  }
  50% {
    color: #9d4edd;
  }
  75% {
    color: #7afcff;
  }
  100% {
    color: #7afcff;
  }
}

@keyframes subtle-float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
}