/* RGB Animations */
@keyframes rgb-text-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes rgb-bar-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes rgb-glow {
  0% {
    box-shadow: 0 0 5px var(--color-rgb-red),
                0 0 10px var(--color-rgb-red);
  }
  25% {
    box-shadow: 0 0 5px var(--color-rgb-purple),
                0 0 10px var(--color-rgb-purple);
  }
  50% {
    box-shadow: 0 0 5px var(--color-rgb-blue),
                0 0 10px var(--color-rgb-blue);
  }
  75% {
    box-shadow: 0 0 5px var(--color-rgb-green),
                0 0 10px var(--color-rgb-green);
  }
  100% {
    box-shadow: 0 0 5px var(--color-rgb-red),
                0 0 10px var(--color-rgb-red);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

/* Animation Classes */
.animate-text {
  opacity: 0;
  transform: translateY(20px);
  animation: fade-in 0.5s ease forwards;
}

.delay-1 {
  animation-delay: 0.2s;
}

.delay-2 {
  animation-delay: 0.4s;
}

.delay-3 {
  animation-delay: 0.6s;
}

.pulse {
  animation: pulse 2s ease infinite;
}

.float {
  animation: float 6s ease-in-out infinite;
}

.rgb-glow {
  animation: rgb-glow 10s linear infinite;
}

/* Element-specific animations */
.feature-icon {
  animation: float 6s ease-in-out infinite;
}

.feature-card:hover {
  animation: rgb-glow 10s linear infinite;
}

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

.play-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(180, 0, 255, 0.4);
}

.cta-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(180, 0, 255, 0.4);
}

.submit-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(180, 0, 255, 0.4);
}

/* Scroll animations */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}